Question

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 http://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

Answer 1

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.