Jquery flexslid нажмите на DIV и показать DIV

Question

У меня есть следующий код:

$(document).ready(function(){ 
    $('.porslider > .slides > li > div > ul > li').click(function() { 
     var which = $(this).index(); 
     $('#big').find('div').hide().eq(which).show(); 
    }); 
}); 

Когда я нажимаю на элемент LI, там Виль, показывая вверх DIV. Это работает. Но не тогда, когда я положил это в flexslider. Мой HTML выглядит так.

<div class="flexslider porslider"> 
    <ul class="slides"> 
     <li> 
      <div> 
       <ul class="porimages ulpor"> 
        <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li> 
        <li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li> 
        <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li> 
        <li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li> 
        <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li> 
       </ul> 
      </div>     
     </li> 
     <li> 
      <div> 
       <ul class="porimages ulpor"> 
        <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li> 
        <li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li> 
        <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li> 
        <li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li> 
        <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li> 
       </ul> 
      </div>     
     </li> 
    </ul> 
</div> 

<div id="big"> 
    <div><img src="por_big/piWD00001.png" /></div> 
    <div><img style="opacity: 0.5;" src="por_big/piWD00001.png" /></div> 
    <div><img style="border: 2px solid red;" src="por_big/piWD00001.png" /></div> 
    <div><img src="por_big/piWD00001.png" /></div> 
    <div><img src="por_big/piWD00001.png" /></div> 
    <div><img src="por_big/piWD00001.png" /></div> 
    <div><img style="opacity: 0.1;" src="por_big/piWD00001.png" /></div> 
    <div><img style="border: 2px solid blue;" src="por_big/piWD00001.png" /></div> 
    <div><img src="por_big/piWD00001.png" /></div> 
    <div><img src="por_big/piWD00001.png" /></div> 
</div> 

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

#big div { 
display: none; 
} 

Есть простой способ, что он также увидеть второй слайд? Теперь он видит только первые пять миниатюр, но я хочу больше слайдов. Итак, когда люди идут на второй слайд, они также видят одинаковый образ, но больше. Как я могу использовать этот скрипт для большего количества слайдов?

Спасибо!

Answer 1

http://jsfiddle.net/4KhUb/4/

Просто попробуйте это начать, и посмотреть, если он работает ... я думаю FlexSlider оборачивает что-то в вашем HTML, которые делают ваши (некрасивых) селекторы не в состоянии работать.

$('.porimages > li').click(function() { 
    var which = $(this).index(); 
    $('#big').find('div').hide().eq(which).show(); 
}); 

ИЛИ

$('.porslider li li').click(function() { 
    var which = $(this).index(); 
    $('#big').find('div').hide().eq(which).show(); 
});