http://jquery.malsup.com/cycle2/demo/carousel.php https://lokeshdhakar.com/projects/lightbox2/
我正在尝试合并上面两个使用jquery的代码脚本。
我想有一个旋转木马-可以装灯箱
而且我已经能够使用以下代码笔将其全部工作
https://codepen.io/anon/pen/yGWLVx
我的问题是这个。
当我使用灯箱时-与轮播分开-在“一组”图像上计数-工作正常。 （根据笔的前2批html
但是当我将灯箱和转盘组合在一起时-图像计数最终是错误的-在示例中提供了5张图像的计数-当只有4张是编码的时。
要重现此问题-在代码笔的html输出中单击第三行图像，然后查看图像标题
有人知道为什么图像计数错误以及是否有解决方法吗？
注意：我已经尝试放入rel =“ lightbox [something]”和data-lightbox =“ setname”-并没有用。
预先感谢
下面的代码是为了防止codepen消失
<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