custom lightbox using gallery module in custom module

{% set slides = [] %}

{% for slide in module.slides %}

{% if (slide.link_url is string_startingwith "http") or (slide.link_url is string_startingwith "/") %}
{% set link = slide.link_url %}
{% elif !slide.link_url %}
{% set link = none %}
{% else %}
{% set link = "//" ~ slide.link_url %}
{% endif %}

{{ slides.append({ "caption":  slide.caption,
        "show_caption": slide.show_caption,
        "link_url": link,
        "alt_text": slide.img.alt,
        "img_src": slide.img.src,
        "open_in_new_tab": slide.open_in_new_tab
        }) | string | replace('true', '')
    }}
{% endfor %}


<div class='custom_lightbox_slider image_{{ module.display_mode }}'>
  {% gallery
      "Gallery"
      display_mode='{{ module.display_mode }}'
      sizing='{{ module.sizing }}',
      transition='{{ module.transition }}',
      caption_position='{{ module.caption_position }}',
      auto_advance='{{ module.auto_advance }}',
      overrideable=True,
      description_text='',
      show_pagination='{{ module.show_pagination }}',
      label='{{title}}',
      slides='{{ slides }}',
      loop_slides='{{ module.loop_slides }}',
      num_seconds='{{ module.num_seconds }}',
  %}
</div>



{% if module.display_mode == "lightbox" %}
<script src="//cdn2.hubspot.net/hubfs/4515283/Signum_Biosciences_August2018/js/slick.js"></script>

<script>
  $(document).ready(function(){
    $('.image_{{ module.display_mode }} .hs_cos_gallery').removeAttr("id");
      $('.image_{{ module.display_mode }} .hs_cos_gallery .slick-slide-inner-wrapper img').each(function(){
      var getSrc = $(this).attr('src') || $(this).attr('data-lazy');
    $(this).attr('src', getSrc);
  });

  //========== pop styling===========

  $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main').after('<a class="pop-close" href="javascript:void(0);"></a>');
  $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main').after('<a class="prev pop-button" href="javascript:void(0);"></a>');
  $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main').after('<a class="next pop-button" href="javascript:void(0);"></a>');
  if ( $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide').length == 1 ){
    $('.prev.pop-button,.next.pop-button').css('display','none');
  }

  $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_thumbnails .hs_cos_gallery_slide.slick-slide .slick-slide-inner-wrapper').click(function(){
    var currentThumIndex = $(this).parent().index();
    var eachPopIndex;
    $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide').each(function(){
      eachPopIndex = $(this).index();
      if( currentThumIndex == eachPopIndex ){
        $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main').addClass('active');
        $(this).addClass('active');
        $('body').addClass('pop-active');
      }
    });
  });

  //========== close button =========
  $('.pop-close').click(function(){
    $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main').removeClass('active');
    $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide').removeClass('active');
    $('body').removeClass('pop-active');
  });
  //===== next button
  $('.image_{{ module.display_mode }} .hs_cos_gallery a.next.pop-button').click(function(){
    var totalList = $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide').length;
    var activeIndex = $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide.active').index() + 1;
    if ( totalList == activeIndex ){
      $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide.active').removeClass('active');
      $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide:first-child').addClass('active');
    }
    else{
      $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide.active').removeClass('active').next().addClass('active');
    }

  });
  //===== prev button
  $('.image_{{ module.display_mode }} .hs_cos_gallery a.prev.pop-button').click(function(){
    var activeIndex = $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide.active').index() + 1;
    if ( activeIndex == 1 ) {
      $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide.active').removeClass('active');
      $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide:last-child').addClass('active');
    }
    else{
      $('.image_{{ module.display_mode }} .hs_cos_gallery .hs_cos_gallery_main .hs_cos_gallery_slide.slick-slide.active').removeClass('active').prev().addClass('active');
    }

  });






  });
</script>

<style>
  .image_{{ module.display_mode }} .hs_cos_gallery_thumbnails .slick-slide {
    display: block;
  }
  .image_{{ module.display_mode }} .hs_cos_gallery_main {
    opacity: 0;
    pointer-events: none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:100%;
    width:100%;
    z-index:99999;
    background-color:rgba(0,0,0,.6);
    transition:1s;
  }
  .image_{{ module.display_mode }}  .hs_cos_gallery_main.active {
    opacity:1;
    pointer-events:auto;
  }
  .image_{{ module.display_mode }} .hs_cos_gallery_main .slick-slide {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:1s;
  }
  .image_{{ module.display_mode }} .hs_cos_gallery_main.active .slick-slide.active {
    opacity:1;
    pointer-events:auto;
  }
  .image_{{ module.display_mode }} .hs_cos_gallery_main + a.next.pop-button,
  .image_{{ module.display_mode }} .hs_cos_gallery_main + a.next.pop-button + a.prev.pop-button,
  .image_{{ module.display_mode }} .hs_cos_gallery_main + a.next.pop-button + a.prev.pop-button + a.pop-close {
    display: block;
    opacity: 0;
    pointer-events: none;
    width:100px;
    height:100px;
    background-color:red;
    position:fixed;
    z-index:999999;
    transition:1s;
  }
  .image_{{ module.display_mode }} .hs_cos_gallery_main + a.next.pop-button {
    top:50%;
    transform:translateY(-50%);
    right:0;
  }
  .image_{{ module.display_mode }} .hs_cos_gallery_main + a.next.pop-button + a.prev.pop-button {
    top:50%;
    transform:translateY(-50%);
    left:0;
  }
  .image_{{ module.display_mode }} .hs_cos_gallery_main + a.next.pop-button + a.prev.pop-button + a.pop-close {
    top:0;
    right:0;
  }
  .image_{{ module.display_mode }} .hs_cos_gallery_main.active + a.next.pop-button,
  .image_{{ module.display_mode }} .hs_cos_gallery_main.active + a.next.pop-button + a.prev.pop-button,
  .image_{{ module.display_mode }} .hs_cos_gallery_main.active + a.next.pop-button + a.prev.pop-button + a.pop-close {
    opacity:1;
    pointer-events:auto;
  }
</style>

{% endif %}