我有一个画廊,我将这个画廊与 lazySizes 一起使用我正在尝试让所有图像变得懒惰。
但是,我的寻呼机缩略图图像不起作用。图片必须从 a
标签上的 data-exthumbimage
属性加载。
$(document).ready(function() {
function generateSlider() {
$(".mySlideShow").cycle({
next: "#single-right",
log: false,
fx: "fade",
caption: ".cycle-caption",
captionTemplate: "{{title}}",
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<a href='#'><img class='lazyload' data-src='{{parents.0.exthumbimage}}' width=60 height=60></a>",
prev: "#single-left",
slides: "a[data-hidden='false']"
});
}
generateSlider();
$(".filter li").on("click", function() {
var activeId = $(this).attr("id");
if (activeId == "show-all") {
$("a").attr("data-hidden", "false");
} else {
$("a").attr("data-hidden", "true");
$("a[data-id = '" + activeId + "']").attr("data-hidden", "false");
}
$(".mySlideShow").cycle("destroy");
generateSlider();
});
$(" .mySlideShow").lightGallery({
exThumbImage: "data-exthumbimage",
download: false,
thumbnail: true,
loadYoutubeThumbnail: true,
youtubeThumbSize: "default",
loadVimeoThumbnail: true,
vimeoThumbSize: "thumbnail_medium"
});
});
.single-gallery {
width: 800px;
overflow: hidden;
position: relative;
}
.cycle-slideshow img {
width: 100%;
height: 494px;
max-width: 100%;
}
#single-pager a img {
width: 49.3px !important;
height: 49.3px !important;
border: 1px solid #fff;
}
#single-pager a.cycle-pager-active img {
opacity: 0.4;
}
#single-left,
#single-right {
position: absolute;
top: 50%;
z-index: 1000;
background: rgba(255, 255, 255, .8);
padding: 12px;
cursor: pointer;
}
#single-left {
left: 0;
}
#single-right {
right: 0;
}
.filter {
position: absolute;
z-index: 1000;
right: 0;
top: 0;
padding: 0;
color: #FFF;
background: rgba(255, 255, 255, 0.6);
padding: 10px 30px;
}
.filter li {
list-style-type: none;
cursor: pointer;
display: inline-block;
background: rgba(0, 0, 0, .6);
padding: 5px;
}
a[data-hidden="true"] {
display: none;
}
<link href="https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css" rel="stylesheet" />
<div class="single-gallery" id="single-gallery">
<div class="single-gallery-carousel">
<div class="slideshow-area">
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
<li id="show-all">All</li>
</ul>
</div>
<div class="mySlideShow">
<a data-exthumbimage="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg" data-id="naturel" data-hidden="false" data-src="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg">
<img class="lazyload" data-src="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg" data-poster="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg">
</a>
<a class="video" data-hidden="false" data-id="naturel" data-src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg" href="https://vimeo.com/1084537">
<img class="lazyload" data-src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg">
</a>
<a data-exthumbimage="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg" data-hidden="false" data-id="naturel" data-src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg">
<img data-exthumbimage="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg" class="lazyload" data-src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg" data-poster="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg">
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-hidden="false" data-id="animals" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg"></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg"></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg"></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-hidden="false" data-id="animals" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
</a>
</div>
</div>
<div class="center external" id="single-pager">
</div>
</div>
<div id="single-next-prev">
<span class="ani-icon-chevron-pointing-to-the-left ani-cycle-control" id="single-left"></span> <span class="ani-icon-right-chevron ani-cycle-control" id="single-right"></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.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://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js"></script>
最佳答案
这可能是一个 JQuery 问题,我不太确定 :) 但在破坏循环后,选项设置不正确。为了克服这个问题,稍微调整一下@Chris Happy 的回答:
在变量中定义选项,以便您有机会对其进行操作。像这样:
options = {
next: "#single-right",
log: false,
fx: "fade",
caption: ".cycle-caption",
captionTemplate: "{{title}}",
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<a href='#'><img class=lazyload data-src={{exthumbimage}} width=60 height=60></a>",
prev: "#single-left",
slides: "a[data-hidden='false']"
}
稍后,在您销毁循环之后,只需在重新启动循环功能之前添加一行来更改选项对象:
options['pagerTemplate'] = "<a href='#'><img src='{{children.0.src}}' class='lazyload' width=60 height=60></a>"
下面是工作代码。希望这有效。
$(document).ready(function() {
options = {
next: "#single-right",
log: false,
fx: "fade",
caption: ".cycle-caption",
captionTemplate: "{{title}}",
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<a href='#'><img class=lazyload data-src={{exthumbimage}} width=60 height=60></a>",
prev: "#single-left",
slides: "a[data-hidden='false']"
}
function generateSlider(opt) {
$(".mySlideShow").cycle(opt);
}
generateSlider(options);
$(".filter li").on("click", function() {
var activeId = $(this).attr("id");
if (activeId == "show-all") {
$("a").attr("data-hidden", "false");
} else {
$("a").attr("data-hidden", "true");
$("a[data-id = '" + activeId + "']").attr("data-hidden", "false");
}
$(".mySlideShow").cycle("destroy");
options['pagerTemplate'] = "<a href='#'><img src='{{children.0.src}}' class='lazyload' width=60 height=60></a>"
generateSlider(options);
});
$(" .mySlideShow").lightGallery({
exThumbImage: "data-exthumbimage",
download: false,
thumbnail: true,
loadYoutubeThumbnail: true,
youtubeThumbSize: "default",
loadVimeoThumbnail: true,
vimeoThumbSize: "thumbnail_medium"
});
});
.single-gallery {
width: 800px;
overflow: hidden;
position: relative;
}
.cycle-slideshow img {
width: 100%;
height: 494px;
max-width: 100%;
}
#single-pager a img {
width: 49.3px !important;
height: 49.3px !important;
border: 1px solid #fff;
}
#single-pager a.cycle-pager-active img {
opacity: 0.4;
}
#single-left,
#single-right {
position: absolute;
top: 50%;
z-index: 1000;
background: rgba(255, 255, 255, .8);
padding: 12px;
cursor: pointer;
}
#single-left {
left: 0;
}
#single-right {
right: 0;
}
.filter {
position: absolute;
z-index: 1000;
right: 0;
top: 0;
padding: 0;
color: #FFF;
background: rgba(255, 255, 255, 0.6);
padding: 10px 30px;
}
.filter li {
list-style-type: none;
cursor: pointer;
display: inline-block;
background: rgba(0, 0, 0, .6);
padding: 5px;
}
a[data-hidden="true"] {
display: none;
}
<link href="https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css" rel="stylesheet" />
<div class="single-gallery" id="single-gallery">
<div class="single-gallery-carousel">
<div class="slideshow-area">
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
<li id="show-all">All</li>
</ul>
</div>
<div class="mySlideShow">
<a data-exthumbimage="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg" data-id="naturel" data-hidden="false" data-src="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg">
<img class="lazyload" data-src="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg" data-poster="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg">
</a>
<a data-exthumbimage="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg" href="https://vimeo.com/1084537" class="video" data-hidden="false" data-id="naturel" data-src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg" href="https://vimeo.com/1084537">
<img class="lazyload" data-src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg">
</a>
<a data-exthumbimage="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg" data-hidden="false" data-id="naturel" data-src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg">
<img class="lazyload" data-src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg" data-poster="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg">
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-hidden="false" data-id="animals" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" ></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" ></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" ></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-hidden="false" data-id="animals" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" >
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
<img class="lazyload" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-poster="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" >
</a>
</div>
</div>
<div class="center external" id="single-pager">
</div>
</div>
<div id="single-next-prev">
<span class="ani-icon-chevron-pointing-to-the-left ani-cycle-control" id="single-left"></span> <span class="ani-icon-right-chevron ani-cycle-control" id="single-right"></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.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://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js"></script>
关于javascript - 使用延迟加载自定义 pagerTemplate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43727061/