jQuery技术:使用延迟加载自定义pagerTemplate

2021年1月13日下午12:12 • JQuery使用教程 • 阅读 0

我有一个画廊，我正在使用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: "", 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; }

      Sports
 Naturel
 Animals
 All

它可能是一个JQuery问题，我不太确定:)但在销毁周期后，选项设置不正确。要克服这个问题调整一下@Chris Happy的答案：

定义变量中的选项，以便您可以有机会进行操作。 像这样：

options = { next: "#single-right", log: false, fx: "fade", caption: ".cycle-caption", captionTemplate: "{{title}}", pauseOnHover: true, pager: "#single-pager", pagerTemplate: "", prev: "#single-left", slides: "a[data-hidden='false']" }

然后，在您销毁循环之后，只需在重新启动循环函数之前添加一行来更改选项对象 ：

 options['pagerTemplate'] = ""

以下是工作代码。希望这有效。

 $(document).ready(function() { options = { next: "#single-right", log: false, fx: "fade", caption: ".cycle-caption", captionTemplate: "{{title}}", pauseOnHover: true, pager: "#single-pager", pagerTemplate: "", 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'] = "" 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; }

      Sports
 Naturel
 Animals
 All

好的，请执行以下操作：

 $(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: "", 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; }

      Sports
 Naturel
 Animals
 All

以上就是jQuery教程分享使用延迟加载自定义pagerTemplate相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址：https://www.ctvol.com/jquerytutorial/548154.html

jquery

jQuery技术:使用延迟加载自定义pagerTemplate

精彩推荐