Странное поведение jquery-lightbox (не будет переходить к следующему / предыдущему изображению) - PullRequest
Новая
       0

Странное поведение jquery-lightbox (не будет переходить к следующему / предыдущему изображению)

0 голосов
/ 15 марта 2011

У меня две поведенческие проблемы, которые я не могу преодолеть.Во-первых, я не могу успешно прокручивать изображения.Когда я нажимаю кнопки «Далее» и «Назад» внутри лайтбокса, он просто остается на текущем изображении.

Кроме того, если я щелкну прямо в центре изображения лайтбокса, оно закроется.

$(function(){


$('#photos a').lightBox({fixedNavigation:true, imageBtnPrev:'{{site}}media/imageslightbox-btn-prev.gif',imageBtnNext:'{{site}}media/images/lightbox-btn-next.gif',containerResizeSpeed:350,});

});

Итак, я попробовал это с и без параметра "fixedNavigation: true".

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

  <div id="photos">
        <ul>
            <li><a href="{{site}}media/apt-img4.jpg"><img src="{{site}}media/apt-img4.jpg" width="185" height="110" alt="Thumb" /></a></li> 
            <li><a href="{{site}}media/apt-img4.jpg"><img src="{{site}}media/apt-img5.jpg" width="185" height="110" alt="Thumb" /></a></li>
            <li><a href="{{site}}media/apt-img4.jpg"><img src="{{site}}media/apt-img6.jpg" width="185" height="110" alt="Thumb" /></a></li>
            <li><a href="{{site}}media/apt-img4.jpg"><img src="{{site}}media/apt-img7.jpg" width="185" height="110" alt="Thumb" /></a></li>
        </ul>
    </div>

спасибо за любую помощь!

Ответы [ 2 ]

0 голосов
/ 16 марта 2012

Брендан - Похоже, все ваши оригинальные ссылки указывали на одно и то же (первое) изображение, и YNhat это исправил Если вы скопировали / вставили его разметку, это, вероятно, является первоначальной причиной проблемы.

0 голосов
/ 15 марта 2011

Я обнаружил проблему в вашем скрипте, но не уверен, что она решит вашу проблему.

  1. У вас есть лишняя запятая в вашем JavaScript. Это вызовет проблему в IE. Должно быть: 

    $('#photos a').lightBox({fixedNavigation:true, imageBtnPrev:'{{site}}media/imageslightbox-btn-prev.gif',imageBtnNext:'{{site}}media/images/lightbox-btn-next.gif',containerResizeSpeed:350});

  2. В вашем HTML-коде вы загружаете образец изображения для всех миниатюр. Должно быть: 

     <div id="photos">
            <ul>
                <li><a href="{{site}}media/apt-img4.jpg"><img src="{{site}}media/apt-img4.jpg" width="185" height="110" alt="Thumb" /></a></li> 
                <li><a href="{{site}}media/apt-img5.jpg"><img src="{{site}}media/apt-img5.jpg" width="185" height="110" alt="Thumb" /></a></li>
                <li><a href="{{site}}media/apt-img6.jpg"><img src="{{site}}media/apt-img6.jpg" width="185" height="110" alt="Thumb" /></a></li>
                <li><a href="{{site}}media/apt-img7.jpg"><img src="{{site}}media/apt-img7.jpg" width="185" height="110" alt="Thumb" /></a></li>
            </ul>
        </div>
...