Почему не работает счетчик изображений? устанавливает количество альбомов
http://jquery.malsup.com/cycle2/demo/carousel.php https://lokeshdhakar.com/projects/lightbox2/
Я пытаюсь объединить вышеупомянутые 2 сценария кода, которые используют jquery.
Я хотел бы иметь карусель - которая учитывает лайтбокс
и я смог заставить все это работать на следующем коде пера
http://%20https://codepen.io/anon/pen/yGWLVx
мой вопрос такой.
Когда я использую лайтбокс - отдельно от карусели - рассчитывать на "набор" изображений - работает нормально. (согласно перу первые 2 лота HTML)
но когда я объединяю лайтбокс и карусель - количество изображений оказывается неправильным - в примере при условии, что это число из 5 изображений - когда закодировано только 4.
чтобы воссоздать эту проблему - нажмите на третью строку изображений в выводе html кода ручки и посмотрите на заголовок изображения
Кто-нибудь знает, почему счетчик изображений неверен и если есть исправление?
примечание: я уже пробовал поместить в rel="lightbox[что-то]", а также data-lightbox="setname" - и это не сработало.
заранее спасибо
приведенный ниже код исчезает, если кодовая ручка исчезает
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="Golden Gate Bridge with San Francisco in distance">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="Forest with mountains behind">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="Bicyclist looking out over hill at ocean">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="Small lighthouse at bottom with ocean behind">
</a>
<br><br>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set2" data-title="Click the right half of the image to move forward.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="Golden Gate Bridge with San Francisco in distance">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set2" data-title="Or press the right arrow on your keyboard.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="Forest with mountains behind">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set2" data-title="The next image in the set is preloaded as you're viewing.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="Bicyclist looking out over hill at ocean">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set2" data-title="Click anywhere outside the image or the X to the right to close.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="Small lighthouse at bottom with ocean behind">
</a>
<br><br>
<div
class="cycle-slideshow"
data-cycle-fx="carousel"
data-cycle-timeout="3000"
data-cycle-slides="> a"
data-cycle-carousel-visible="5"
data-cycle-carousel-fluid="true"
data-cycle-next="#next"
data-cycle-prev="#prev"
>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set3" data-title="Click the right half of the image to move forward.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="Golden Gate Bridge with San Francisco in distance">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set3" data-title="Or press the right arrow on your keyboard.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="Forest with mountains behind">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set3" data-title="The next image in the set is preloaded as you're viewing.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="Bicyclist looking out over hill at ocean">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set3" data-title="Click anywhere outside the image or the X to the right to close.">
<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="Small lighthouse at bottom with ocean behind">
</a>
</div>
.cycle-slideshow { margin: auto }
.cycle-slideshow img { width: auto; height: auto; padding: 2px; }
div.responsive img { width: auto; height: auto }
.cycle-pager { position: static; margin-top: 5px }
div.vertical { width: 100px }
.cycle-slideshow
{
margin-top: 30px;
}
#Carousel a
{
margin-right: 10px;
}
a.prev
{
background: url( /SystemFiles/LIB-IMG/Carousel/prev.png ) no-repeat center;
cursor: pointer;
display: block;
float: left;
height: 250px;
margin-left: 10px;
margin-right: 10px;
width: 50px;
}
a.next
{
background: url( /SystemFiles/LIB-IMG/Carousel/next.png ) no-repeat center;
cursor: pointer;
display: block;
float: right;
height: 250px;
margin-left: 10px;
margin-right: 20px;
width: 50px;
}
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
css
https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.css
javacript
https://code.jquery.com/jquery-2.2.4.min.js
https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js
http://malsup.github.io/jquery.cycle2.carousel.js
http://malsup.github.io/jquery.cycle2.js