This shows the code that hides slides the photograph thumbails away etc when the button is clicked. You can find the site I'm creating here www.samuelbradley.com
$(document).ready(function(){
hidden = true;
$(".btn-slide").click(function () {
if(hidden == false) {
$("#slideshow").slideDown('3000, linear, callback');
$("#thumbs").slideUp('3000, linear, callback');
hidden = true;
} else {
$("#slideshow").slideUp('3000, linear, callback');
$("#thumbs").slideDown('3000, linear, callback');
hidden = false;
}
});
});
$(document).ready(function(){
hidden = true;
$(".thumb").click(function () {
if(hidden == false) {
$("#slideshow").slideDown('3000, linear, callback');
$("#thumbs").slideUp('3000, linear, callback');
hidden = true;
} else {
$("#slideshow").slideUp('3000, linear, callback');
$("#thumbs").slideDown('3000, linear, callback');
hidden = false;
}
});
});
This code shows the body HTML code which contains the list of the thumbnails etc.
<div id="thumbnail-image"><a href="#" ><img src="images/thumbnail.jpg" alt="thumanil- image" title="Thumbnail View for Samuel Bradley" width="40" border="0" class="btn-slide" /></a>
</div><!--end of thumbnail image-->
</div><!--end of header-->
<div id="controlholder">
<div id="controls"></div>
</div>
<div id="slideshow">
</div>
<div id="thumbs">
<ul class="thumbs noscript">
<li><a href="images/archive/live-tour/1_noelfielding.jpg" title="Samuel Bradley Photography" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/1 NOEL FIEDLING_THE BIG CHILL_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li>
<li><a href="images/archive/live-tour/2_noelfielding.jpg" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/2_NOEL FIELDING, THE BIG CHILL_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li>
<li><a href="images/archive/live-tour/3_dylanmoran.jpg" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/3_DYLAN MORAN_THE BIG CHILL_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li>
<li><a href="images/archive/live-tour/4_youmeatsix.jpg" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/4_YOU ME AT SIX, HOLD ME DOWN TOUR_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li>
The large images are loaded into the #slideshow div which shows and hides easily however I can't seem to hide the thumbs div? Even when I set the #thumbs div to display:none it still shows. I basically just want the large image to show when a page loads and then the thumbs div to toggle between full view & thumbnail view but I dont want to be able to see thumbnails and the large image at the same time. Any help would be much appreciated. I hope I've explained and shown enough of an example?
Sofi
I've had a look at the site, which looks great by the way.
It works for me apart from on load when the `#thumbs' div is actually be shown. Have you tried putting:
$('#thumbs').hide();
in one of the `.ready() functions? This should hide that div at the start.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.