Customizing Pagertemplate With Lazy Load

November 10, 2024 Post a Comment

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 mus

Solution 1:

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'] = "<ahref='#'><imgsrc='{{children.0.src}}'class='lazyload'width=60height=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']"
}
  functiongenerateSlider(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-slideshowimg {
  width: 100%;
  height: 494px;
  max-width: 100%;
}

#single-pageraimg {
  width: 49.3px!important;
  height: 49.3px!important;
  border: 1px solid #fff;
}

#single-pagera.cycle-pager-activeimg {
  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: 10px30px;
}

.filterli {
  list-style-type: none;
  cursor: pointer;
  display: inline-block;
  background: rgba(0, 0, 0, .6);
  padding: 5px;
}

a[data-hidden="true"] {
  display: none;
}

<linkhref="https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css"rel="stylesheet" /><divclass="single-gallery"id="single-gallery"><divclass="single-gallery-carousel"><divclass="slideshow-area"><ulclass="filter"><liid="sports">Sports</li><liid="naturel">Naturel</li><liid="animals">Animals</li><liid="show-all">All</li></ul></div><divclass="mySlideShow"><adata-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"><imgclass="lazyload"data-src="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg"data-poster="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg"></a><adata-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"><imgclass="lazyload"data-src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg"></a><adata-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"><imgclass="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><adata-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"><imgclass="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><adata-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"><imgclass="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><adata-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"><imgclass="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><adata-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"><imgclass="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><adata-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"><imgclass="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><adata-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"><imgclass="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><divclass="center external"id="single-pager"></div></div><divid="single-next-prev"><spanclass="ani-icon-chevron-pointing-to-the-left ani-cycle-control"id="single-left"></span><spanclass="ani-icon-right-chevron ani-cycle-control"id="single-right"></span></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js"></script>

Solution 2:

Okay, do the following:

Remove the quotes from the pagerTemplate
Use {{exthumbimage}} for data-src. {{parents.0.exthumbimage}} would select the a's parent with is the slider itself. For it's own attribute, you just have to use the name of that attribute.

$(document).ready(function() {
  functiongenerateSlider() {
    $(".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={{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-slideshowimg {
  width: 100%;
  height: 494px;
  max-width: 100%;
}

#single-pageraimg {
  width: 49.3px!important;
  height: 49.3px!important;
  border: 1px solid #fff;
}

#single-pagera.cycle-pager-activeimg {
  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: 10px30px;
}

.filterli {
  list-style-type: none;
  cursor: pointer;
  display: inline-block;
  background: rgba(0, 0, 0, .6);
  padding: 5px;
}

a[data-hidden="true"] {
  display: none;
}

<linkhref="https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css"rel="stylesheet" /><divclass="single-gallery"id="single-gallery"><divclass="single-gallery-carousel"><divclass="slideshow-area"><ulclass="filter"><liid="sports">Sports</li><liid="naturel">Naturel</li><liid="animals">Animals</li><liid="show-all">All</li></ul></div><divclass="mySlideShow"><adata-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"><imgclass="lazyload"data-src="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg"data-poster="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg"></a><adata-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"><imgclass="lazyload"data-src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg"></a><adata-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"><imgclass="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><adata-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"><imgclass="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><adata-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"><imgclass="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><adata-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"><imgclass="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><adata-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"><imgclass="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><adata-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"><imgclass="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><adata-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"><imgclass="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><divclass="center external"id="single-pager"></div></div><divid="single-next-prev"><spanclass="ani-icon-chevron-pointing-to-the-left ani-cycle-control"id="single-left"></span><spanclass="ani-icon-right-chevron ani-cycle-control"id="single-right"></span></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js"></script>

Learn Html5

Customizing Pagertemplate With Lazy Load

Solution 1:

Solution 2:

Post a Comment for "Customizing Pagertemplate With Lazy Load"