Creating a modal with Slick Slider

562
November 26, 2016, at 11:29 AM

I currently have a webpage which has about four or five individual slideshows. I'd like to create a feature such that when a user clicks on an image in a slideshow, a modal pops up displaying the slideshow bigger (and perhaps in center-mode). I can't think of a way to do this elegantly. Any thoughts would be much appreciated.

Regular view:

Modal view:

JS:

$(document).ready(function() {
  createSliders();
  attachModalListeners();
});
function createSliders() {
  const $slideshows = $('.slider');
  const self = this;
  $slideshows.each(function(index) {
    const $this = $(this);
    const numSlidesToShow = calculateNumSlidesToShow($this, $this.find('img').length);
    startSliders($this, numSlidesToShow);
  });
}
function attachModalListeners() {
  const $slideshows = $('.slider');
  $slideshows.each(function() {
    const $slideshow = $(this);
    $slideshow.find('img').click(function() {
      // $('#site-main').
      // open in modal
    })
  });
}
function calculateNumSlidesToShow(slider, numSlidesInElm) {
  if(slider.hasClass('main-slider')) {
    return 1;
  }
  return numSlidesInElm < 3 ? numSlidesInElm : 3;
}
function startSliders($elm, numSlides) {
  const options = {
    arrows: true,
    adaptiveHeight: false,
    pauseOnHover: true,
    infinite: false,
    centerMode: $elm.hasClass('main-slider'),
    centerPadding: `${$(document).width() * 0.15}px`,
    slidesToShow: numSlides < 2 ? 1 : 2,
    rows: $elm.hasClass('grid') ? Math.ceil(numSlides/2) : 1,
    slidesPerRow: 2,
    nextArrow: '<div class="slick-next"><img src="/images/sliders/next.svg"></div>',
    prevArrow: '<div class="slick-prev"><img src="/images/sliders/prev.svg"></div>',
    slidesToScroll: 1
  }
  $elm.on('init', function(event, slick) {
    const $buttons = $('.slick-arrow', slick.$slider)
      .add($('.slick-dots li', slick.$slider))
      .add($('.slick-dots li button', slick.$slider))
      .add($('[data-slide]', slick.$slider));
    $buttons.on('click', function(){
      slick.$slider.slick('slickPause');
    });
  }).slick(options);
  $('.slider').css('visibility', 'visible');
}

HTML

<section class="slider">
    <div>
        <img src="<%= image_path('/shared_photos/some_photo.jpg') %>" srcset="<%= image_path('/shared_photos/some_photo.jpg') %> 1x, <%= image_path('/shared_photos/some_photo@2x.jpg') %> 2x" alt="">
    </div>
    <div>
        <img src="<%= image_path('/shared_photos/some_photo.jpg') %>" srcset="<%= image_path('/shared_photos/some_photo.jpg') %> 1x, <%= image_path('/shared_photos/some_photo@2x.jpg') %> 2x" alt="">
    </div>
</section>

Thanks so much for your help!

READ ALSO
Google Cloud Print used to work but now print jobs sent from my Android Tablet always queued

Google Cloud Print used to work but now print jobs sent from my Android Tablet always queued

I'm working with Google cloud printingEverything else works just fine

195
How to remove bullet from tooltip when using highchart?

How to remove bullet from tooltip when using highchart?

I am working on column chart using HighchartMy chart is working fine

321