Добавление другого параметра в мою пользовательскую галерею jQuery - PullRequest
Новая
       23

Добавление другого параметра в мою пользовательскую галерею jQuery

0 голосов
/ 26 апреля 2010

Мой веб-сайт в настоящее время использует собственную систему галерей jQuery, которую я разработал ... она работает хорошо, но я хочу добавить одну возможность, которую я не могу понять. Я хочу, чтобы пользователь вместо того, чтобы нажимать на каждую миниатюру, также мог щелкнуть само изображение целиком, чтобы перейти в галерею. Рабочая галерея здесь: http://www.studioimbrue.com

Код выглядит следующим образом: 

$('.thumbscontainer ul li a').click(function() {
var li_index = $(this).parents('ul').children('li').index($(this).parent("li"));

    $(this).parents('.thumbscontainer').parent().find('.captions ul li').fadeOut();
 $(this).parents('.thumbscontainer').parent().find('.captions ul li:eq('+li_index+')').fadeIn();
});

});

и разметка HTML галереи выглядит следующим образом: 

<div class="container">
    <div class="captions" id="usbdrive">
     <ul>
         <li style="display:block">
                <img src="images/portfolio/usbdrive/1.jpg" />
                <div class="caption">
                 <span class='projecttitle'>Super Talent USB Drive Package.</span>
     A fancy, lavish package designed for Super Talent's specialty USB drive. It was known as the world's smallest flash drive <span class="amp">&amp;</span> it is dipped in gold!
                </div>
            </li>
         <li>
             <img src="images/portfolio/usbdrive/2.jpg" />
            </li>
         <li>
                <img src="images/portfolio/usbdrive/3.jpg" />
            </li>
         <li>
                <img src="images/portfolio/usbdrive/4.jpg" />
            </li>
         <li>
                <img src="images/portfolio/usbdrive/5.jpg" />
            </li>   
        </ul>
</div>

    <div class="thumbscontainer verticalthumbs">
        <ul>
            <li><a href="javascript:void(0);" name="usbdrive1"><img src="images/portfolio/usbdrive/1.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive2"><img src="images/portfolio/usbdrive/2.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive3"><img src="images/portfolio/usbdrive/3.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive4"><img src="images/portfolio/usbdrive/4.jpg" /></a></li>
            <li><a href="javascript:void(0);" name="usbdrive5"><img src="images/portfolio/usbdrive/5.jpg" /></a></li>
        </ul>
    </div>
</div>

1 Ответ

2 голосов
/ 26 апреля 2010

Вам нужно обработать событие click для элементов li и показать следующее li.

Например: 

$('.container .captions li').click(function() {
    var nextLi = $(this).fadeOut().next().fadeIn();

    if (nextLi.length === 0)  //If we're the last one,
        nextLi = $(this).siblings(':first-child').fadeIn();
});
...