Javascript / JQuery показать и скрыть Div на фотогалерее - PullRequest
2 голосов
/ 16 августа 2011

Показывает код, который скрывает слайды фотографии и т.д. при нажатии кнопки. Вы можете найти сайт, который я создаю здесь 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;
}
 });
 });

Этот код показывает основной HTML-код, который содержит список миниатюр и т. Д.

<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>

Большие изображения загружаются в div #slideshow, который показывает и легко скрывает, однако я не могу скрыть тег thumbs? Даже когда я установил отображение #thumbs div, оно все равно не отображается. Я просто хочу, чтобы большое изображение отображалось при загрузке страницы, а затем с помощью превью thumbs для переключения между полным просмотром и просмотром миниатюр, но я не хочу видеть эскизы и большое изображение одновременно. Любая помощь приветствуется. Надеюсь, я объяснил и показал достаточно примеров?

Софи

1 Ответ

0 голосов
/ 16 августа 2011

Я посмотрел сайт, который, кстати, выглядит великолепно.

Это работает для меня отдельно от загрузки, когда фактически показывается div `#thumbs '. Вы пробовали поставить:

$('#thumbs').hide();

в одной из функций `.ready ()? Это должно скрыть этот div в начале.

...