Hi all,
I'm new jquery. I'm trying to create a photo gallery/slideshow using
the cycle plugin. There will be three elements, a large graphic, a
text section, and a thumbnail gallery of the large graphics. I have
the large graphics and thumbnails connected (so when you click on the
thumbnail the correct photo comes up), but can't seem to connect these
elements to the title and text for the photo. The goal is to click on
the thumbnail and have it bring fade the graphic and the text!
So far here is what I have:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></
script>
<script type="text/javascript">
$(function(evt) {
$("a:has(img.gallery)").click(function() {
var largePath = $(this).attr("href");
var caption = $(this).attr("title");
$("#photo_large").attr({ src: largePath });
$("#caption1").text(caption);
return false;
});
$('#graphic').cycle({
fx: 'fade',
speed: 1000,
timeout: 1000,
next: '#graphic',
pause: 1
});
$('#copy').cycle({
fx: 'none',
speed: 1000,
timeout: 1,
next: '#copy',
pause: 1
});
});
</script>
<body>
<div id="content">
<div id="graphic">
<img id="photo_large" alt="ventura photo" height="341"
name="photo_large" src="img/graphic_main.jpg" width="660" />
<img id="photo_large" alt="ventura photo" height="341"
name="photo_large" src="img/graphic_main2.jpg" width="660" />
</div>
<div id="copy">
<div id="copy_title" class="title">College Seen Photo Contest 2009
<span class="copy"><br />
An image depicting a single mother balancing home life and school work
was selected from among 243 entries to win this year’s College Seen,
an annual photo contest co-sponsored by the Foundation, its
CollegeBuys program, and Adobe®
Read more ></span></div>
<div id="copy_title" class="title">Different Slide Altogether
<span class="copy"><br />
An image depicting a single mother balancing home life and school work
was selected from among 243 entries to win this year’s
Read more ></span></div>
</div>
<div id="gallery">
<div id="gallery_thumbs"><a href="img/graphic_main.jpg" title="Getting
ready to hit the surf"><img id="thumb_01" alt="ventura set"
class="gallery" height="57" name="thumb_01" src="file:///C|/Documents
and Settings/jvella/Desktop/Projects/Gallery/img/thumb_1.jpg"
width="57" /></a>
<a href="img/graphic_main2.jpg" title="A title about this and
that"><img id="thumb_01" alt="ventura set" class="gallery" height="57"
name="thumb_01" src="file:///C|/Documents and Settings/jvella/Desktop/
Projects/Gallery/img/thumb_2.jpg" width="57" /></a></div>
</div>
</div>
</body>
