2
我創建了一個與lightgallery和cycle2一起使用的相冊，循環是一個輪播插件，lightgallery是一個燈箱畫廊。爲什麼我的燈箱看不到這個屬性？
，所以當我在旋轉木馬點擊任何圖像比它的形象在收藏打開，我想告訴你，一切都運行得非常好，直到你點擊carousel.so任何類別我想麻煩你這個問題
點擊任何類別後，如果您點擊輪播圖片上的圖片並在控制檯上看到錯誤，則燈箱不會打開。
插件給了我這個錯誤回報
[email protected],[email protected],[email protected],[email protected],[email protected],[email protected]…:10 Uncaught TypeError: Cannot read property 's' of undefined
at new c ([email protected],[email protected],[email protected],[email protected],[email protected],[email protected]…:10)
at Function.<anonymous> ([email protected],[email protected],[email protected],[email protected],[email protected],[email protected]…:5)
at Function.each (jquery.min.js:2)
at b.build ([email protected],[email protected],[email protected],[email protected],[email protected],[email protected]…:5)
at HTMLDivElement.<anonymous> ([email protected],[email protected],[email protected],[email protected],[email protected],[email protected]…:5)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.q.handle (jquery.min.js:3)
兩個星期我試圖解決這個問題
或
$(document).ready(function() {
options = {
next: "#single-right",
log: false,
fx: "fade",
caption: ".cycle-caption",
captionTemplate: "{{title}}",
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<img class='lazyload' data-src='{{exthumbimage}}' width='70' height='70'>",
prev: "#single-left",
slides: "div[data-hidden='false']"
}
function generateSlider(opt) {
$("#myCarousel").cycle(opt);
}
generateSlider(options);
$('#myCarousel').lightGallery({
selector: "div[data-hidden='false']",
exThumbImage: "data-exthumbimage",
loadYoutubeThumbnail: true,
youtubeThumbSize: 'default',
loadVimeoThumbnail: true,
vimeoThumbSize: 'thumbnail_medium',
});
$("#filter li").on("click", function() {
var activeId = $(this).attr("id");
if (activeId == "show-all") {
$(".item").attr("data-hidden", "false");
} else {
$(".item").attr("data-hidden", "true");
$("div[data-id = '" + activeId + "']").attr("data-hidden", "false");
}
$("#myCarousel").cycle("destroy");
options['pagerTemplate'] = "<img class='lazyload' data-src='{{children.0.src}}' width='70' height='70'>"
generateSlider(options);
return false;
});
});.mySlideShow {
width: 700px;
position: relative;
}
.item img {
cursor: pointer;
}
#single-pager img {
margin: 3px;
cursor: pointer;
width: 60px;
height: 60px;
}
#filter {
position: absolute;
top: 0;
right: 10%;
z-index: 100;
}
#filter li {
display: inline-block;
background: rgba(0, 0, 0, .7);
color: #FFF;
cursor: pointer;
padding: 12px;
}
.cycle-caption {
position: absolute;
bottom: 14%;
left: 0;
padding: 12px;
background: rgba(0, 0, 0, .5);
color: #FFF;
text-align: center;
width: 100%;
z-index: 100;
}
div[data-hidden='true'] {
display: none;
}<link rel='stylesheet' href='https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css'>
<div class="mySlideShow">
<div id="myCarousel">
<div class="item" data-src="http://images.freeimages.com/images/previews/49a/massive-gear-1255802.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/fa7/my-ride-1552678.jpg" data-id="animals" data-hidden="false" data-title="image 1">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/f7a/gear-1462890.jpg" />
</div>
<div class="item" data-src="http://images.freeimages.com/images/previews/7ae/autos-1194364.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/5f6/kaputtes-auto-1564173.jpg" data-id="sports" data-hidden="false" data-title="image 2">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/20e/some-grill-1450817.jpg" />
</div>
<div class="item" data-src="https://vimeo.com/1084537" data-exthumbimage="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg" data-id="natural" data-hidden="false" data-title="this is the video">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/c23/cat-1396828.jpg" />
</div>
<div id="single-pager">
</div>
</div>
<ul id="filter">
<li id="animals">Animals</li>
<li id="sports">Sports</li>
<li id="natural">Natural</li>
<li id="show-all">All</li>
</ul>
<div class="cycle-caption"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js'></script>
<script src='https://cdn.jsdelivr.net/g/[email protected],[email protected],[email protected],[email protected],[email protected],[email protected],[email protected],[email protected]'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js'></script>
<script src='https://f.vimeocdn.com/js/froogaloop2.min.js'></script>
的codepen不會拋出錯誤。 – Phix
@Pix點擊全部，然後點擊圖片.... – gaetanoM
嗨@Phix首先點擊任何類別，例如自然，然後點擊輪播圖像 –