EasyZoom and Slick jQuery

https://stackoverflow.com/q/64470545

by joshmoto

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/easyzoom.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/easyzoom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<script src="https://www.sowecms.com/demos/jquery.instagramFeed/jquery.instagramFeed.min.js"></script>
<div id="instagram-feed-slider"></div>

CSS

BODY {
  margin: 0;
  padding: 20px;
}

#instagram-feed-slider {
  display: none;
  opacity: 0;
  transition: all .5s ease;
}

#instagram-feed-slider.slick-initialized {
  display: block;
}

#instagram-feed-slider.slick-initialized.slick-reveal {
  opacity: 1;
}

#instagram-feed-slider .slick-slide {
  display: block;
}

#instagram-feed-slider .slick-slide IMG {
  width: 100%;
}

JavaScript

// on ready
(function($) {

  // instagram username
  let username = 'github';

  // grab our instagram feed
  $.instagramFeed({
    'username': username,
    'container': false,
    'display_profile': false,
    'display_biography': false,
    'display_gallery': true,
    'callback': function(data) {

      // const instagram feed slider
      const $slider = $('#instagram-feed-slider');

      // slide count
      let count = 8;

      // latest owner timeline media not videos
      let media = data.edge_owner_to_timeline_media.edges;

      // slider media data
      let slides = {};

      // each media function
      $.each(media, function(i, item) {

        // current slide index
        let id = item.node.shortcode;

        // create thumb data object
        let thumb_data = {};

        // each item node thumb resource function
        $.each(item.node.thumbnail_resources, function(i, thumb) {

          // get thumb data width and src url
          thumb_data[thumb.config_width] = thumb.src;

          // add thumb data to our slides object
          slides[id] = thumb_data;

        });

      });

      // interator counter
      let iterator = 0

      // each slides function
      $.each(slides, function(id, slide) {

        // add 1 to iterator
        iterator++;

        // if iterator is less than or equal to count
        if (iterator <= count) {

          // create our slide html string
          let slickSlide = '<a href="https://www.instagram.com/p/' + id + '" target="_blank"><img src="' + slide[640] + '" alt=""/></a>';

          // append it to feed div
          $slider.append(slickSlide);

        }

      });

      // init slider with slick
      $slider.on('init', function(slick) {

        // do stuff here when slick initializes
        
        // slight delay so slick init completes render
        setTimeout(function() {
  
          // reveal the slider with opacity
        	$(this).addClass('slick-reveal');  
    
    		},...