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" style="display:none;"></div>

CSS

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

#instagram-feed-slider {
  display: none;
}

#

JavaScript

// on ready
(function($) {

  $.instagramFeed({
    'username': 'github',
    '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
        $(this).show();

      // then our slick options
      }).slick({
        dots: true,
        infinite: true,
       ...