SHARE
TWEET

Untitled

a guest May 19th, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. HTML
  2.     ====
  3.             <div class="wp-gallery__filter">
  4.                 <button class="btn-filtration btn-filtration-js" data-filtration="wp-gallery__item">Alle</button>
  5.                 <button class="btn-filtration btn-filtration-js" data-filtration="management-category">Management</button>
  6.                 <button class="btn-filtration btn-filtration-js" data-filtration="immobilienmakler-category">CENTURY 21 Immobilienmakler</button>
  7.                 <button class="btn-filtration btn-filtration-js" data-filtration="logos-category">Logos</button>
  8.                 <button class="btn-filtration btn-filtration-js" data-filtration="mrkenbilder-category">Markenbilder</button>
  9.                 <button class="btn-filtration open-projects">
  10.                     Projekte
  11.                     <i class="fas fa-angle-down filter-icon"></i>
  12.                 </button>
  13.             </div>
  14.  
  15.             <div id="projects-wrapper">
  16.                 <button class="btn-project btn-filtration-js" data-filtration="project-1">Project 1</button>
  17.                 <button class="btn-project btn-filtration-js" data-filtration="project-2">Project 2</button>
  18.                 <button class="btn-project btn-filtration-js" data-filtration="project-3">Project 3</button>
  19.                 <button class="btn-project btn-filtration-js" data-filtration="project-4">Project 4</button>
  20.                 <button class="btn-project btn-filtration-js" data-filtration="project-5">Project 5</button>
  21.                 <button class="btn-project btn-filtration-js" data-filtration="project-6">Project 6</button>
  22.             </div>
  23.  
  24.             <div id="wp-gallery">
  25.                 <div id="animated-thumbnails" class="wp-gallery">
  26.  
  27.                     <?php $images = get_field('managment_gallery'); ?>
  28.                     <?php foreach( $images as $image ): ?>
  29.                         <a href='<?php echo $image['url']; ?>' class="wp-gallery__item management-category">
  30.                             <img src="<?php echo $image['sizes']['thumbnail']; ?>" class="wp-gallery__image hide-item" alt="<?php echo $image['caption']; ?>" />
  31.                             <div class="wp-gallery__image" style="background-image: url('<?php echo $image['sizes']['large']; ?>')">
  32.                                 <div class="gallery-inner">
  33.                                     <div class="wp-gallery__image-inner">
  34.                                         <?php echo $image['caption']; ?>
  35.                                     </div>
  36.                                 </div>
  37.                             </div>
  38.                         </a>
  39.                     <?php endforeach; ?>
  40.                  
  41.                 </div>
  42.             </div>  
  43.  
  44.  
  45.     JS
  46.     ==
  47.    
  48.     function galleryFilter() {
  49.         //check gallery image quantity
  50.         var galleryItems = $('.wp-gallery__item');
  51.         var galleryContainer = $('#wp-gallery');
  52.         var maxImages = 8;
  53.         var loadBtn = $('#load__gallery-images');
  54.  
  55.         function imagesQuantity(currentAttr, inc) {
  56.             $.each($('#animated-thumbnails').find($('.wp-gallery__item')), function (index, value) {
  57.                 if (index < maxImages) {
  58.                     $(value).show();
  59.                 }
  60.             });
  61.  
  62.             var currentAttr = currentAttr;
  63.             if (currentAttr == undefined) {
  64.                 currentAttr = 'wp-gallery__item';
  65.             }
  66.  
  67.             var inc = inc;
  68.             if (inc == undefined) {
  69.                 inc = maxImages;
  70.             }
  71.  
  72.             if ($('.' + currentAttr).length > maxImages) {
  73.                 loadBtn.fadeIn(200);
  74.  
  75.                 loadBtn.on('click', function () {
  76.                     inc += 8;
  77.                     galleryContainer.fadeIn(200);
  78.                     if ($('#animated-thumbnails').find($('.wp-gallery__item')).length <= inc) {
  79.                         loadBtn.fadeOut(200);
  80.                     }
  81.  
  82.                     $.each($('#animated-thumbnails').find($('.wp-gallery__item')), function (index, value) {
  83.                         if (index < inc) $(value).show();
  84.                     });
  85.                 });
  86.             } else {
  87.                 loadBtn.fadeOut(200);
  88.                 galleryItems.show();
  89.             }
  90.         }
  91.         imagesQuantity();
  92.  
  93.  
  94.         //init gallery filter
  95.         $('.btn-filtration-js').on('click', function () {
  96.             var currentAttr = $(this).attr('data-filtration');
  97.             if (!$(this).hasClass('btn-project')) {
  98.                 $('#projects-wrapper').slideUp(200);
  99.             }
  100.  
  101.             galleryContainer.fadeOut(200);
  102.             galleryItems.css('display', '');
  103.  
  104.             function replaceEl() {
  105.                 $('#animated-thumbnails').append(galleryItems);
  106.                 $.each(galleryItems, function () {
  107.                     $('#animated-thumbnails').find($('.wp-gallery__item').not($('.' + currentAttr))).remove();
  108.                 });
  109.  
  110.                 loadBtn.off('click');
  111.                 imagesQuantity(currentAttr, maxImages);
  112.  
  113.                 if ($('body').hasClass('page-template-tpl-downloads')) {
  114.                     $("#animated-thumbnails").data('lightGallery').destroy(true);
  115.                     $("#animated-thumbnails").lightGallery();
  116.                 }
  117.             }
  118.  
  119.             setTimeout(replaceEl, 200);
  120.             galleryContainer.fadeIn(200);
  121.             loadBtn.hide();
  122.         });
  123.  
  124.  
  125.         //open gallery projects wrapper
  126.         $('.open-projects').on('click', function () {
  127.             $('#projects-wrapper').slideToggle(300);
  128.             $('.filter-icon').toggleClass('nav-icon_active');
  129.         });
  130.  
  131.  
  132.         //trim image description
  133.         var currentEl = $('.wp-gallery__image-inner');
  134.         $.each(currentEl, function (index, value) {
  135.             var currenInfo = value.outerText;
  136.  
  137.             if (currenInfo !== undefined && currenInfo !== null) {
  138.                 if (currenInfo.length > 201) {
  139.                     var trimmedString = currenInfo.substring(0, 200) + ' ...';
  140.                     value.innerHTML = trimmedString
  141.                 }
  142.             }
  143.         });
  144.     }
  145.    
  146.    
  147.     //init on load
  148.     galleryFilter();
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top