JAVASCRIPT   38

expandableGallery js

Guest on 2nd July 2022 01:30:00 AM

  1. jQuery(document).ready(function($){
  2.         var itemInfoWrapper = $('.expandable-gallery'); // Expandable Gallery Section
  3.  
  4.         itemInfoWrapper.each(function(){
  5.                 var container = $(this),
  6.                         // create slider pagination
  7.                         sliderPagination = createSliderPagination(container);
  8.  
  9.                 container.find('.expandable-gallery-item').on('click', function(event){ // Expandable Gallery Nav
  10.                         //enlarge slider images
  11.                         if( !container.hasClass('expand-gallery-active') && $(event.target).is('.expandable-gallery-item')) {
  12.                                 itemInfoWrapper.removeClass('expand-gallery-active');
  13.                                 container.addClass('expand-gallery-active').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
  14.                                         $('body,html').animate({'scrollTop':container.offset().top}, 200);
  15.                                 });
  16.                         }
  17.                 });
  18.  
  19.                 container.find('.expandable-close').on('click', function(){
  20.                         //shrink slider images
  21.                         container.removeClass('expand-gallery-active');
  22.                 });
  23.  
  24.                 //update visible slide
  25.                 container.find('.expand-next').on('click', function(){
  26.                         nextSlide(container, sliderPagination);
  27.                 });
  28.  
  29.                 container.find('.expand-prev').on('click', function(){
  30.                         prevSlide(container, sliderPagination);
  31.                 });
  32.  
  33.                 container.find('.expandable-gallery-item').on('swipeleft', function(){
  34.                         var wrapper = $(this),
  35.                                 bool = enableSwipe(container);
  36.                         if(!wrapper.find('.selected').is(':last-child') && bool) {nextSlide(container, sliderPagination);}
  37.                 });
  38.  
  39.                 container.find('.expandable-gallery-item').on('swiperight', function(){
  40.                         var wrapper = $(this),
  41.                                 bool = enableSwipe(container);
  42.                         if(!wrapper.find('.selected').is(':first-child') && bool) {prevSlide(container, sliderPagination);}
  43.                 });
  44.  
  45.                 sliderPagination.on('click', function(){
  46.                         var selectedDot = $(this);
  47.                         if(!selectedDot.hasClass('selected')) {
  48.                                 var selectedPosition = selectedDot.index(),
  49.                                         activePosition = container.find('.expandable-gallery-item .selected').index();
  50.                                 if( activePosition < selectedPosition) {
  51.                                         nextSlide(container, sliderPagination, selectedPosition);
  52.                                 } else {
  53.                                         prevSlide(container, sliderPagination, selectedPosition);
  54.                                 }
  55.                         }
  56.                 });
  57.         });
  58.  
  59.         //keyboard slider navigation
  60.         $(document).keyup(function(event){
  61.                 if(event.which=='37' && $('.expand-gallery-active').length > 0 && !$('.expand-gallery-active .expandable-gallery-item .selected').is(':first-child')) {
  62.                         prevSlide($('.expand-gallery-active'), $('.expand-gallery-active').find('.expandable-slider-pagination li'));
  63.                 } else if( event.which=='39' && $('.expand-gallery-active').length && !$('.expand-gallery-active .expandable-gallery-item .selected').is(':last-child')) {
  64.                         nextSlide($('.expand-gallery-active'), $('.expand-gallery-active').find('.expandable-slider-pagination li'));
  65.                 } else if(event.which=='27') {
  66.                         itemInfoWrapper.removeClass('expand-gallery-active');
  67.                 }
  68.         });
  69.  
  70.         function createSliderPagination($container){
  71.                 var wrapper = $('<ul class="expandable-slider-pagination"></ul>').insertAfter($container.find('.expandable-gallery-nav'));
  72.                 $container.find('.expandable-gallery-item li').each(function(index){
  73.                         var dotWrapper = (index == 0) ? $('<li class="selected"></li>') : $('<li></li>'),
  74.                                 dot = $('<a href="#0"></a>').appendTo(dotWrapper);
  75.                         dotWrapper.appendTo(wrapper);
  76.                         dot.text(index+1);
  77.                 });
  78.                 return wrapper.children('li');
  79.         }
  80.  
  81.         function nextSlide($container, $pagination, $n){
  82.                 var visibleSlide = $container.find('.expandable-gallery-item .selected'),
  83.                         navigationDot = $container.find('.expandable-slider-pagination .selected');
  84.                 if(typeof $n === 'undefined') $n = visibleSlide.index() + 1;
  85.                 visibleSlide.removeClass('selected');
  86.                 $container.find('.expandable-gallery-item li').eq($n).addClass('selected').prevAll().addClass('move-left');
  87.                 navigationDot.removeClass('selected')
  88.                 $pagination.eq($n).addClass('selected');
  89.                 updateNavigation($container, $container.find('.expandable-gallery-item li').eq($n));
  90.         }
  91.  
  92.         function prevSlide($container, $pagination, $n){
  93.                 var visibleSlide = $container.find('.expandable-gallery-item .selected'),
  94.                         navigationDot = $container.find('.expandable-slider-pagination .selected');
  95.                 if(typeof $n === 'undefined') $n = visibleSlide.index() - 1;
  96.                 visibleSlide.removeClass('selected')
  97.                 $container.find('.expandable-gallery-item li').eq($n).addClass('selected').removeClass('move-left').nextAll().removeClass('move-left');
  98.                 navigationDot.removeClass('selected');
  99.                 $pagination.eq($n).addClass('selected');
  100.                 updateNavigation($container, $container.find('.expandable-gallery-item li').eq($n));
  101.         }
  102.  
  103.         function updateNavigation($container, $active) {
  104.                 $container.find('.expand-prev').toggleClass('inactive', $active.is(':first-child'));
  105.                 $container.find('.expand-next').toggleClass('inactive', $active.is(':last-child'));
  106.         }
  107.  
  108.         function enableSwipe($container) {
  109.                 var mq = window.getComputedStyle(document.querySelector('.expandable-gallery-item'), '::before').getPropertyValue('content');
  110.                 return ( mq=='mobile' || $container.hasClass('expand-gallery-active'));
  111.         }
  112. });

Raw Paste


Login or Register to edit or fork this paste. It's free.