Problems, need help? Have a tip or advice? Post it here.
5 posts Page 1 of 1
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!
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.
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
I've now thrown out all unnessesarry javascript and it working. Thank you!

https://gutemasche.samariterbund.net/galerie/
Great :)
5 posts Page 1 of 1