本文介绍了使用延迟加载定制pagerTemplate的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个画廊，并使用上的这个画廊，我正在尝试让所有的图片都用懒。
然而，我的传呼机缩略图的图像不起作用。必须从 data-exthumbimage 属性的 a 标签中加载图片。
$（document）.ready（function（）{function generateSlider（）{$（。mySlideShow） .cycle（{next：＃single-right，log：false，fx：fade，caption：.cycle-caption，captionTemplate：{{title}}，pauseOnHover：true，pager：单页面，pagerTemplate：< a href ='＃'>< img class ='lazyload'data-src ='{{parents.0.exthumbimage}}'width = 60 height = 60>< / a>，prev：＃single-left，幻灯片：a [data-hidden ='false']}）;} generateSlider（）; $（。filter li）。 ，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，下载：false，缩略图：true，loadYoutubeThumbnail：true，youtubeThumbSize：default，loadVimeoThumbnail：true，vimeoThumbSize：thumbnail_medium}）;} ）; .single-gallery {width：800px;溢出：隐藏; position：relative;}。cycle-slideshow img {width：100％;身高：494px; max-width：100％;}＃single-pager a img {width：49.3px！important;身高：49.3px！重要; border：1px solid #fff;}＃single-pager a.cycle-pager-active img {opacity：0.4;}＃single-left，＃single-right {position：absolute;顶部：50％; z-index：1000;背景：rgba（255,255,255，.8）;填充：12px; cursor：pointer;}＃single-left {left：0;}＃single-right {right：0;}。filter {position：absolute; z-index：1000;正确：0; top：0;填充：0;颜色：#FFF;背景：rgba（255,255,255，0.6）; padding：10px 30px;}。filter li {list-style-type：none;光标：指针;显示：inline-block;背景：rgba（0，0，0，.6）; padding：5px;} a [data-hidden =true] {display：none;} < link href =https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.cssrel =stylesheet/>< div class =single -galleryid =single-gallery> < div class =single-gallery-carousel> < div class =slideshow-area> < ul class =filter> < li id =sports>运动< / li> < li id =naturel> Naturel< / li> < li id =动物>动物< / li> < li id =show-all>全部< / li> < / UL> < / DIV> < div class =mySlideShow> < a data-exthumbimage =http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpgdata-id =natureldata-hidden =falsedata-src = http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg\"> < img class =lazyloaddata-src =https://sachinchoolur.github.io/lightGallery/static/img/12.jpgdata-poster =https://sachinchoolur.github.io/lightGallery/静态/ IMG / 12.JPG> < / A> < a class =videodata-hidden =falsedata-id =natureldata-src =http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of -Pixar.jpghref =https://vimeo.com/1084537> < img class =lazyloaddata-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.jpgdata-hidden =falsedata -id =natureldata-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.jpgclass =lazyloaddata-src =http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpgdata-poster =http://betacontent.anitur.com .tr /网络/图片/ h494 / 2017-03 / otel_aurum-螺-SPA-海滩resort_sReNOBXcinbZI7lNGf3x.jpg> < / A> < a data-exthumbimage =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpgdata-hidden =falsedata-id =animals数据-SRC = https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg > < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpgdata-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.jpgdata-hidden =falsedata-id =sportsdata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg> < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpgdata-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.jpgdata-hidden =falsedata -id =sportsdata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg> < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg资料海报= 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.jpgdata-hidden =falsedata -id =sportsdata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg> < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg资料海报= 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.jpgdata-hidden =falsedata-id =animals数据-SRC = https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg > < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpgdata-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.jpgdata-hidden =falsedata-id =体育data-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg> < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpgdata-poster =https： //amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg\"> < / A> < / DIV> < / DIV> < div class =center externalid =single-pager> < / div>< / div>< div id =single-next-prev> < span class =ani-icon-chevron-pointing-to-the-left ani-cycle-controlid =single-left>< / span> < span class =ani-icon-right-chevron ani-cycle-controlid =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>
解决方案
在变量中定义选项，以便您可以有机会进行处理。像这样：
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，
幻灯片：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：单选左键，幻灯片：a [data-hidden ='false']} function generateSlider（opt）{$（。mySlideShow）.cycle（opt）;} generateSlider（options）; $（。filter （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（ 数据-H idden，false）; }（。mySlideShow）。cycle（destroy）; options ['pagerTemplate'] =< a href ='＃'>< img src ='{{children.0.src}}'class ='lazyload'width = 60 height = 60>< / a> ; generateSlider（选项）; }）; $（.mySlideShow）。lightGallery（{exThumbImage：data-exthumbimage，下载：false，缩略图：true，loadYoutubeThumbnail：true，youtubeThumbSize：default，loadVimeoThumbnail：true，vimeoThumbSize：thumbnail_medium}）;} ）; .single-gallery {width：800px;溢出：隐藏; position：relative;}。cycle-slideshow img {width：100％;身高：494px; max-width：100％;}＃single-pager a img {width：49.3px！important;身高：49.3px！重要; border：1px solid #fff;}＃single-pager a.cycle-pager-active img {opacity：0.4;}＃single-left，＃single-right {position：absolute;顶部：50％; z-index：1000;背景：rgba（255,255,255，.8）;填充：12px; cursor：pointer;}＃single-left {left：0;}＃single-right {right：0;}。filter {position：absolute; z-index：1000;正确：0; top：0;填充：0;颜色：#FFF;背景：rgba（255,255,255，0.6）; padding：10px 30px;}。filter li {list-style-type：none;光标：指针;显示：inline-block;背景：rgba（0，0，0，.6）; padding：5px;} a [data-hidden =true] {display：none;} < link href =https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.cssrel =stylesheet/>< div class =single -galleryid =single-gallery> < div class =single-gallery-carousel> < div class =slideshow-area> < ul class =filter> < li id =sports>运动< / li> < li id =naturel> Naturel< / li> < li id =动物>动物< / li> < li id =show-all>全部< / li> < / UL> < / DIV> < div class =mySlideShow> < a data-exthumbimage =http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpgdata-id =natureldata-hidden =falsedata-src = http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg\"> < img class =lazyloaddata-src =https://sachinchoolur.github.io/lightGallery/static/img/12.jpgdata-poster =https://sachinchoolur.github.io/lightGallery/静态/ IMG / 12.JPG> < / A> < a data-exthumbimage =http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpghref =https://vimeo.com/1084537class =videodata-hidden =falsedata-id =natureldata-src =http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg href =https://vimeo.com/1084537> < img class =lazyloaddata-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.jpgdata-hidden =falsedata -id =natureldata-src =http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg> < img class =lazyloaddata-src =http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpgdata-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.jpgdata-hidden =falsedata-id =animals数据-SRC = https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg > < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpgdata-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.jpgdata-hidden =falsedata-id =sportsdata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg> < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpgdata-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.jpgdata-hidden =falsedata -id =sportsdata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg> < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg资料海报=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.jpgdata-hidden =falsedata -id =sportsdata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg> < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg资料海报=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.jpgdata-hidden =falsedata-id =animals数据-SRC = https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg > < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpgdata-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.jpgdata-hidden =falsedata-id =体育data-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg> < img class =lazyloaddata-src =https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpgdata-poster =https： //amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg> < / A> < / DIV> < / DIV> < div class =center externalid =single-pager> < / DIV> < / DIV> < div id =single-next-prev> < span class =ani-icon-chevron-pointing-to-the-left ani-cycle-controlid =single-left>< / span> < span class =ani-icon-right-chevron ani-cycle-controlid =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>
I have a gallery and I'm using this gallery with lazySizes and I'm trying to get all images to with lazy.
However, the images of my pager thumbnails are not working. The images must be loaded from the data-exthumbimage attribute on the a tags.
$(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> 解决方案
It may be a JQuery Issue, i am not so sure of it :) but after destroying the cycle, options are not set correctly. To overcome this issue tweaking @Chris Happy's answer a little bit:
Define the options inside a variable, so that you may have chance to manupulate it. Like so :
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']"}
And later on, right after you destroy the cycle, just change the options object by adding a line before re-initiating the cycle function:
options['pagerTemplate'] = "<a href='#'><img src='{{children.0.src}}' class='lazyload' width=60 height=60></a>"
Below is the working code. Hope this works.
$(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>这篇关于使用延迟加载定制pagerTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！