Простая галерея для видео [jQuery] - PullRequest
Новая
       12

Простая галерея для видео [jQuery]

1 голос
/ 30 июня 2010 
<ul id="thumb">
    <li class="active"><a href="#"><img src="img/thumb1.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb2.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb3.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb4.png" alt="" /></a></li>
</ul>

<div id="video-display">
    <div class="video video-1 active"> Flash Video Object Here </div>
    <div class="video video-2"> Flash Video Object Here </div>
    <div class="video video-3"> Flash Video Object Here </div>
    <div class="video video-4"> Flash Video Object Here </div>
</div>

Первый эскиз и первое видео активны по умолчанию, нажатие на второе показывает второе видео и скрывает все остальные ... Как мне написать эту простую галерею в jQuery.

Я бы действительноценю любую помощь.

Спасибо!

1 Ответ

2 голосов
/ 30 июня 2010

Вы можете сделать это, используя .index() и .eq() следующим образом: 

$("#video-display .video:gt(0)").hide();
$("#thumb li").click(function() {
    $("#video-display .video").hide().eq($(this).index()).show();
});​​​​​​​​​​​​​

Вы можете попробовать это здесь , если вы хотите переместить класс .active, просто добавьте несколько вызовов .addClass() и .removeClass(), например: 

$("#video-display .video:not(.active)").hide();                  //hide initially
$("#thumb li").click(function() {
    $(this).addClass('active').siblings().removeClass('active'); //<li> portion
    $("#video-display .video").hide().removeClass('active')      //hide previous
       .eq($(this).index()).show().addClass('active');           //show new
});​​​​​​​​​​​​​

Подход в обоих случаях заключается в выборе видео <div> с тем же индексом внутри #video-display, что и индекс <li>, который вы щелкнули внутри #thumb.

...