Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- HTML
- ====
- <div class="wp-gallery__filter">
- <button class="btn-filtration btn-filtration-js" data-filtration="wp-gallery__item">Alle</button>
- <button class="btn-filtration btn-filtration-js" data-filtration="management-category">Management</button>
- <button class="btn-filtration btn-filtration-js" data-filtration="immobilienmakler-category">CENTURY 21 Immobilienmakler</button>
- <button class="btn-filtration btn-filtration-js" data-filtration="logos-category">Logos</button>
- <button class="btn-filtration btn-filtration-js" data-filtration="mrkenbilder-category">Markenbilder</button>
- <button class="btn-filtration open-projects">
- Projekte
- <i class="fas fa-angle-down filter-icon"></i>
- </button>
- </div>
- <div id="projects-wrapper">
- <button class="btn-project btn-filtration-js" data-filtration="project-1">Project 1</button>
- <button class="btn-project btn-filtration-js" data-filtration="project-2">Project 2</button>
- <button class="btn-project btn-filtration-js" data-filtration="project-3">Project 3</button>
- <button class="btn-project btn-filtration-js" data-filtration="project-4">Project 4</button>
- <button class="btn-project btn-filtration-js" data-filtration="project-5">Project 5</button>
- <button class="btn-project btn-filtration-js" data-filtration="project-6">Project 6</button>
- </div>
- <div id="wp-gallery">
- <div id="animated-thumbnails" class="wp-gallery">
- <?php $images = get_field('managment_gallery'); ?>
- <?php foreach( $images as $image ): ?>
- <a href='<?php echo $image['url']; ?>' class="wp-gallery__item management-category">
- <img src="<?php echo $image['sizes']['thumbnail']; ?>" class="wp-gallery__image hide-item" alt="<?php echo $image['caption']; ?>" />
- <div class="wp-gallery__image" style="background-image: url('<?php echo $image['sizes']['large']; ?>')">
- <div class="gallery-inner">
- <div class="wp-gallery__image-inner">
- <?php echo $image['caption']; ?>
- </div>
- </div>
- </div>
- </a>
- <?php endforeach; ?>
- </div>
- </div>
- JS
- ==
- function galleryFilter() {
- //check gallery image quantity
- var galleryItems = $('.wp-gallery__item');
- var galleryContainer = $('#wp-gallery');
- var maxImages = 8;
- var loadBtn = $('#load__gallery-images');
- function imagesQuantity(currentAttr, inc) {
- $.each($('#animated-thumbnails').find($('.wp-gallery__item')), function (index, value) {
- if (index < maxImages) {
- $(value).show();
- }
- });
- var currentAttr = currentAttr;
- if (currentAttr == undefined) {
- currentAttr = 'wp-gallery__item';
- }
- var inc = inc;
- if (inc == undefined) {
- inc = maxImages;
- }
- if ($('.' + currentAttr).length > maxImages) {
- loadBtn.fadeIn(200);
- loadBtn.on('click', function () {
- inc += 8;
- galleryContainer.fadeIn(200);
- if ($('#animated-thumbnails').find($('.wp-gallery__item')).length <= inc) {
- loadBtn.fadeOut(200);
- }
- $.each($('#animated-thumbnails').find($('.wp-gallery__item')), function (index, value) {
- if (index < inc) $(value).show();
- });
- });
- } else {
- loadBtn.fadeOut(200);
- galleryItems.show();
- }
- }
- imagesQuantity();
- //init gallery filter
- $('.btn-filtration-js').on('click', function () {
- var currentAttr = $(this).attr('data-filtration');
- if (!$(this).hasClass('btn-project')) {
- $('#projects-wrapper').slideUp(200);
- }
- galleryContainer.fadeOut(200);
- galleryItems.css('display', '');
- function replaceEl() {
- $('#animated-thumbnails').append(galleryItems);
- $.each(galleryItems, function () {
- $('#animated-thumbnails').find($('.wp-gallery__item').not($('.' + currentAttr))).remove();
- });
- loadBtn.off('click');
- imagesQuantity(currentAttr, maxImages);
- if ($('body').hasClass('page-template-tpl-downloads')) {
- $("#animated-thumbnails").data('lightGallery').destroy(true);
- $("#animated-thumbnails").lightGallery();
- }
- }
- setTimeout(replaceEl, 200);
- galleryContainer.fadeIn(200);
- loadBtn.hide();
- });
- //open gallery projects wrapper
- $('.open-projects').on('click', function () {
- $('#projects-wrapper').slideToggle(300);
- $('.filter-icon').toggleClass('nav-icon_active');
- });
- //trim image description
- var currentEl = $('.wp-gallery__image-inner');
- $.each(currentEl, function (index, value) {
- var currenInfo = value.outerText;
- if (currenInfo !== undefined && currenInfo !== null) {
- if (currenInfo.length > 201) {
- var trimmedString = currenInfo.substring(0, 200) + ' ...';
- value.innerHTML = trimmedString
- }
- }
- });
- }
- //init on load
- galleryFilter();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement