CouchCMS • View topic - Isotop js Gallery integration

Problems, need help? Have a tip or advice? Post it here.

5 posts Page 1 of 1

Isotop js Gallery integration

: cl; Registered User

: Posts: 156; Joined: Fri May 11, 2012 6:35 pm; Location: Vienna

by cl » Mon Feb 19, 2018 4:44 pm

Hi all, my problem has nothing to do with the CMS, which is getting better and better btw., but maybe someone with more knowledge of js can guide me into the right direction.

I build a nice gallery with isotop https://isotope.metafizzy.co/. Wich is working fine so far. But at the moment I want to link to a special category from another page I'm lost. There are a lot of options to filter the gallery. One is the url hash filtering https://isotope.metafizzy.co/filtering.html#combination-filters-ui. So it should be possible to build a link.

However, several people found several solutions https://github.com/metafizzy/isotope/issues/594 but nothing works for me as i dont know were to place the js. Cracking my head for 2 days now :roll:

This is my js:

Code: Select all

// galerie

$(window).load(function ( ) { 
  
    var $container = $('.grid'); 
    $container.isotope({ 
        filter: '*', 
        animationOptions: { 
            duration: 750, 
            easing: 'linear', 
            queue: false, 
        } 
    }); 
  
    $('.root a').click(function(){
        
        $('.root .selected').removeClass('selected');
        $(this).addClass('selected');

        
        var selector = $(this).attr('data-filter'); 
        $container.isotope({ 
            filter: selector, 
            animationOptions: { 
                duration: 750, 
                easing: 'linear', 
                queue: false, 
            } 
        }); 
      return false; 
    }); 
    
  
});

//-Test hash
$(window).load(function(){
// Store # parameter and add "." before hash
var hashID = "." + window.location.hash.substring(1);

//  the current version of isotope, the hack works in v2 also
var $container = $('.grid');

$container.imagesLoaded(function(){
    $container.isotope({
        itemSelector: ".grid-item",
        filter: hashID, // the variable filter hack
    });             
});

});
//-Test hash End

$('.grid').isotope({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // use element for option
    columnWidth: '.grid-sizer'
  }
});

HTML:

Code: Select all

<div class="grid">
                        <div class="grid-sizer"></div>
                        <cms:pages masterpage='galerie.php'>
                           <cms:if k_folder_name ><cms:set current_folder=k_folder_name /></cms:if>
                           <cms:if k_page_foldername ><cms:set current_folder=k_page_foldername /></cms:if>
                           
                            <figure class="grid-item <cms:parentfolders folder=k_page_foldername >
                                    <cms:show k_folder_name/></cms:parentfolders> ">
                               
                                <a href="<cms:show gg_image/>" title="<cms:show k_page_title/>" class="swipebox" rel="galerie">
                                 
                                <figcaption>
                                    <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
                                    <p><cms:show k_page_title/></p>
                                </figcaption>
                                </a>
                                    
                                 <img src="<cms:show gg_thumb/>" alt="<cms:show k_page_title />">
                                
                            </figure>
                         </cms:pages>
  </div>

Anyone who worked with isotope or simmilar yet? I'm willing to pay a coffee if usefull help is provided. And it would be a nice plugin for our couchcms as well.

Thank you!

http://www.lightcrafted.at

Re: Isotop js Gallery integration

: KK; Moderator

: Posts: 8729; Joined: Wed Dec 01, 2010 5:35 pm

by KK » Mon Feb 19, 2018 11:26 pm

Hi,

I quickly adapted some sample code given on the vendor's site and the following seems to be working just fine for me.

Code: Select all

<head>
    <script src="<cms:show k_site_link />assets/js/jquery-2.1.4.min.js"></script>
    <script src="<cms:show k_site_link />assets/js/isotope.pkgd.min.js"></script>
</head>

..
..

<div class="button-group filter-button-group">
  <button data-filter="*">show all</button>
  <cms:folders masterpage='gallery.php'>
    <button data-filter=".<cms:show k_folder_name />"><cms:show k_folder_title /></button>
  </cms:folders>  
</div>

<div class="grid">
    <cms:pages masterpage='gallery.php'>
        <figure class="grid-item <cms:parentfolders folder=k_page_foldername masterpage=k_template_name>
                <cms:show k_folder_name/></cms:parentfolders> ">
           
            <a href="<cms:show gg_image/>" title="<cms:show k_page_title/>" class="swipebox" rel="galerie">
             
            <figcaption>
                <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
                <p><cms:show k_page_title/></p>
            </figcaption>
            </a>
                
             <img src="<cms:show gg_thumb/>" alt="<cms:show k_page_title />">
            
        </figure>
     </cms:pages>
</div> 

<script>
    $( function(){
        var isIsotopeInit = false;
        var $grid = $('.grid');

        // bind filter button click
        var $filters = $('.filter-button-group').on( 'click', 'button', function(){
            var filterValue = $(this).attr('data-filter');
            // set filter in hash
            location.hash = 'filter=' + encodeURIComponent( filterValue );
        });

        function getHashFilter() {
            var hash = location.hash;
            // get filter=filterName
            var matches = location.hash.match( /filter=([^&]+)/i );
            var hashFilter = matches && matches[1];
            return hashFilter && decodeURIComponent( hashFilter );
        }

        function onHashchange(){
            var hashFilter = getHashFilter();
            if ( !hashFilter && isIsotopeInit ){
                return;
            }
            isIsotopeInit = true;

            // filter isotope
            $grid.isotope({
                itemSelector: '.grid-item',
                filter: hashFilter
            });

            // set selected class on button
            if ( hashFilter ) {
                $filters.find('.is-checked').removeClass('is-checked');
                $filters.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
            }
        }


        $(window).on( 'hashchange', onHashchange );

        // trigger event handler to init Isotope
        onHashchange();
    });
</script>

You might need to change the gallery template name (at two locations) from 'gallery.php' to whatever you are using.
Please test and let me know if this helps.

Re: Isotop js Gallery integration

: cl; Registered User

: Posts: 156; Joined: Fri May 11, 2012 6:35 pm; Location: Vienna

by cl » Tue Feb 20, 2018 4:53 pm

Thanks Kamran you are my Hero! When coping your code in a blank page it works, in my template it don't. Isotope do not get initiatet. Initiation only works by adding.

Code: Select all

$('.grid').isotope ({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // use element for option
    columnWidth: '.grid-sizer'
  }
});

Thrown Errors :

Code: Select all

Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#],[data-toggle],[data-target],[data-slide])
jQuery_v2.2.4.min.js:2:12556
t</fa.error
t</fa.tokenize
t</fa.select
fa
find
n.fn.init
n
<anonym>
i
fireWith
ready
J

looks like i have to setup a clean template without any other js stuff to make it work. Maybe Swipebox is in conflict.
Thank you anyway I will fiddle may way around

http://www.lightcrafted.at