SHARE
TWEET

Untitled

a guest Apr 23rd, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function initGallery() {
  2.     $('.gallery').each((index, element) => {
  3.         let $gallery = $(element);
  4.  
  5.         let onAnimation = false;
  6.  
  7.         let $galleryItem = $gallery.find('.gallery__item');
  8.  
  9.         let $pagination = $gallery.find('.gallery__pagination');
  10.  
  11.         let $galleryNav = $gallery.find('.gallery__nav');
  12.  
  13.         let $galleryNavPrev = $galleryNav.filter('[data-nav="prev"]');
  14.  
  15.         let $galleryNavNext = $galleryNav.filter('[data-nav="next"]');
  16.  
  17.         let $galleryNavPrevArrow = $galleryNavPrev.find('.gallery__nav__arrow');
  18.  
  19.         let $galleryNavNextArrow = $galleryNavNext.find('.gallery__nav__arrow');
  20.  
  21.         let $galleryNavPrevImage = $galleryNavPrev.find('.gallery__nav__image');
  22.  
  23.         let $galleryNavNextImage = $galleryNavNext.find('.gallery__nav__image');
  24.  
  25.         function galleryHeight() {
  26.             $gallery.attr('style', `height: ${Math.max(...$galleryItem.find('img').get().map((item) => item.offsetHeight))}px`);
  27.         }
  28.  
  29.         let galleryHeightTimeout = setTimeout(() => {
  30.             galleryHeight();
  31.         }, 100);
  32.  
  33.         $(window).on('resize', () => {
  34.             clearTimeout(galleryHeightTimeout);
  35.  
  36.             galleryHeightTimeout = setTimeout(() => {
  37.                 galleryHeight();
  38.             }, 100);
  39.         });
  40.  
  41.         let currentSlideIndex = 0;
  42.  
  43.         for (let i = 0; i < $galleryItem.length; i++) {
  44.             $galleryItem.eq(i).data('slide', i).attr('data-slide', i);
  45.  
  46.             $pagination.append(`
  47.                 <div class="gallery__pagination__item" data-item="${i}"></div>
  48.             `);
  49.         }
  50.  
  51.         let $paginationItem = $gallery.find('.gallery__pagination__item');
  52.  
  53.         let $currentSlide;
  54.  
  55.         let $nextSlide;
  56.  
  57.         let $prevSlide;
  58.  
  59.         let $currentPuginationItem;
  60.  
  61.         function sortSlides() {
  62.             $currentSlide = $galleryItem.filter(`[data-slide="${currentSlideIndex}"]`);
  63.  
  64.             if (currentSlideIndex !== $galleryItem.length - 1) {
  65.                 $nextSlide = $galleryItem.filter(`[data-slide="${currentSlideIndex + 1}"]`);
  66.             } else {
  67.                 $nextSlide = $galleryItem.filter('[data-slide="0"]');
  68.             }
  69.  
  70.             if (currentSlideIndex !== 0) {
  71.                 $prevSlide = $galleryItem.filter(`[data-slide="${currentSlideIndex - 1}"]`);
  72.             } else {
  73.                 $prevSlide = $galleryItem.filter(`[data-slide="${$galleryItem.length - 1}"]`);
  74.             }
  75.  
  76.             $galleryNavPrevImage.find('img').remove();
  77.  
  78.             $galleryNavPrevImage.append(`
  79.                 <img src="${$prevSlide.find('img').attr('src')}" alt="" />
  80.             `);
  81.  
  82.             $galleryNavNextImage.find('img').remove();
  83.  
  84.             $galleryNavNextImage.append(`
  85.                 <img src="${$nextSlide.find('img').attr('src')}" alt="" />
  86.             `);
  87.  
  88.             $currentPuginationItem = $paginationItem.filter(`[data-item="${currentSlideIndex}"]`);
  89.  
  90.             $currentPuginationItem.addClass('is-active');
  91.         }
  92.  
  93.         sortSlides();
  94.  
  95.         $currentSlide.addClass('is-current');
  96.         $nextSlide.addClass('is-next');
  97.         $prevSlide.addClass('is-prev');
  98.  
  99.         function nextSlide() {
  100.             new TimelineMax({
  101.                 onStart() {
  102.                     $nextSlide.addClass('is-before-current');
  103.                     onAnimation = true;
  104.                     $currentPuginationItem.removeClass('is-active');
  105.                 },
  106.                 onComplete() {
  107.                     $currentSlide.removeClass('is-current');
  108.                     $nextSlide.removeClass('is-next is-before-current').addClass('is-current');
  109.                     $prevSlide.removeClass('is-prev');
  110.                     currentSlideIndex = $nextSlide.data('slide');
  111.                     TweenMax.set($currentSlide, {clearProps: 'all'});
  112.                     sortSlides();
  113.                     onAnimation = false;
  114.                 },
  115.             })
  116.                 .to($currentSlide, 1, {
  117.                     x: '-100%',
  118.                 });
  119.         }
  120.  
  121.         function prevSlide() {
  122.             new TimelineMax({
  123.                 onStart() {
  124.                     $prevSlide.addClass('is-before-current');
  125.                     onAnimation = true;
  126.                     $currentPuginationItem.removeClass('is-active');
  127.                 },
  128.                 onComplete() {
  129.                     $currentSlide.removeClass('is-current');
  130.                     $prevSlide.removeClass('is-prev is-before-current').addClass('is-current');
  131.                     $nextSlide.removeClass('is-next');
  132.                     currentSlideIndex = $prevSlide.data('slide');
  133.                     TweenMax.set($currentSlide, {clearProps: 'all'});
  134.                     sortSlides();
  135.                     onAnimation = false;
  136.                 },
  137.             })
  138.                 .to($currentSlide, 1, {
  139.                     x: '100%',
  140.                 });
  141.         }
  142.  
  143.         $galleryNavPrev.on('click', () => {
  144.             if (!onAnimation) {
  145.                 prevSlide();
  146.             }
  147.         });
  148.  
  149.         $galleryNavNext.on('click', () => {
  150.             if (!onAnimation) {
  151.                 nextSlide();
  152.             }
  153.         });
  154.  
  155.         $(document).on('mousemove', (e) => {
  156.             if (innerWidth > 1024) {
  157.                 if (
  158.                     e.pageX > $gallery.offset().left &&
  159.                     e.pageX < $gallery.offset().left + $galleryNavPrev.width() &&
  160.                     e.pageY > $gallery.offset().top &&
  161.                     e.pageY < $gallery.offset().top + $gallery.height()
  162.                 ) {
  163.                     if (
  164.                         e.pageX > $gallery.offset().left + $galleryNavPrevArrow.width() / 2 &&
  165.                         e.pageX < $gallery.offset().left + $galleryNavPrev.width() - $galleryNavPrevArrow.width() / 2
  166.                     ) {
  167.                         $galleryNavPrevArrow.css({
  168.                             left: e.pageX - $gallery.offset().left,
  169.                         });
  170.                     } else if (e.pageX > $gallery.offset().left + $galleryNavPrevArrow.width() / 2) {
  171.                         $galleryNavPrevArrow.css({
  172.                             left: $galleryNavNext.width() - $galleryNavPrevArrow.width() / 2,
  173.                         });
  174.                     } else if (
  175.                         e.pageX < $gallery.offset().left + $galleryNavPrev.width() - $galleryNavPrevArrow.width() / 2
  176.                     ) {
  177.                         $galleryNavPrevArrow.css({
  178.                             left: 0 + $galleryNavPrevArrow.width() / 2,
  179.                         });
  180.                     }
  181.  
  182.                     if (
  183.                         e.pageY > $gallery.offset().top + $galleryNavPrevArrow.height() / 2 &&
  184.                         e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavPrevArrow.height() / 2
  185.                     ) {
  186.                         $galleryNavPrevArrow.css({
  187.                             top: e.pageY - $gallery.offset().top,
  188.                         });
  189.                     } else if (e.pageY > $gallery.offset().top + $galleryNavPrevArrow.height() / 2) {
  190.                         $galleryNavPrevArrow.css({
  191.                             top: $gallery.height() - $galleryNavPrevArrow.height() / 2,
  192.                         });
  193.                     } else if (
  194.                         e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavPrevArrow.height() / 2
  195.                     ) {
  196.                         $galleryNavPrevArrow.css({
  197.                             top: 0 + $galleryNavPrevArrow.height() / 2,
  198.                         });
  199.                     }
  200.  
  201.                     if (!$galleryNavPrevArrow.hasClass('is-active')) {
  202.                         $galleryNavPrevArrow.addClass('is-active');
  203.                     }
  204.                 } else {
  205.                     $galleryNavPrevArrow.removeClass('is-active');
  206.                 }
  207.  
  208.                 if (
  209.                     e.pageX > $gallery.offset().left + $gallery.width() - $galleryNavNext.width() &&
  210.                     e.pageX < $gallery.offset().left + $gallery.width() &&
  211.                     e.pageY > $gallery.offset().top &&
  212.                     e.pageY < $gallery.offset().top + $gallery.height()
  213.                 ) {
  214.                     if (
  215.                         e.pageX > $gallery.offset().left + $gallery.width() - $galleryNavNext.width() +
  216.                         $galleryNavNextArrow.width() / 2 &&
  217.                         e.pageX < $gallery.offset().left + $gallery.width() - $galleryNavNextArrow.width() / 2
  218.                     ) {
  219.                         $galleryNavNextArrow.css({
  220.                             left: e.pageX - $gallery.offset().left - $gallery.width() + $galleryNavNext.width(),
  221.                         });
  222.                     } else if (
  223.                         e.pageX > $gallery.offset().left + $gallery.width() - $galleryNavNext.width() +
  224.                         $galleryNavNextArrow.width() / 2
  225.                     ) {
  226.                         $galleryNavNextArrow.css({
  227.                             left: $galleryNavNext.width() - $galleryNavNextArrow.width() / 2,
  228.                         });
  229.                     } else if (
  230.                         e.pageX < $gallery.offset().left + $gallery.width() - $galleryNavNextArrow.width() / 2
  231.                     ) {
  232.                         $galleryNavNextArrow.css({
  233.                             left: 0 + $galleryNavNextArrow.width() / 2,
  234.                         });
  235.                     }
  236.  
  237.                     if (
  238.                         e.pageY > $gallery.offset().top + $galleryNavNextArrow.height() / 2 &&
  239.                         e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavNextArrow.height() / 2
  240.                         - $pagination.height()
  241.                     ) {
  242.                         $galleryNavNextArrow.css({
  243.                             top: e.pageY - $gallery.offset().top,
  244.                         });
  245.                     } else if (e.pageY > $gallery.offset().top + $galleryNavNextArrow.height() / 2) {
  246.                         $galleryNavNextArrow.css({
  247.                             top: $gallery.height() - $galleryNavNextArrow.height() / 2 - $pagination.height(),
  248.                         });
  249.                     } else if (
  250.                         e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavNextArrow.height() / 2
  251.                     ) {
  252.                         $galleryNavNextArrow.css({
  253.                             top: 0 + $galleryNavNextArrow.height() / 2,
  254.                         });
  255.                     }
  256.  
  257.                     if (!$galleryNavNextArrow.hasClass('is-active')) {
  258.                         $galleryNavNextArrow.addClass('is-active');
  259.                     }
  260.                 } else {
  261.                     $galleryNavNextArrow.removeClass('is-active');
  262.                 }
  263.             }
  264.         });
  265.     });
  266. }
  267.  
  268. initGallery();
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top