简体   繁体   中英

Javascript / jquery show and hide div on photogallery

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM