Paul

My feedback

  1. 3 votes
    Vote
    Sign in
    (thinking…)
    Sign in with: facebook google
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    2 comments  ·  General » DJ-Catalog2  ·  Flag idea as inappropriate…  ·  Admin →
    Paul commented  · 

    I achieved this using http://masonry.desandro.com.
    You have to change the file components/com_djcatalog2/views/items/tmpl/default.php
    In here you change the class .djc_items by .grid

    then in here components/com_djcatalog2/views/items/tmpl/default_items you chenge the class ".djc_row" by ".grid-item".

    then in the <head> of your template add :
    <script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
    <script src="https://npmcdn.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(window).load(function(){
    // init Masonry
    var grid = jQuery('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 310
    });
    // layout Masonry after each image loads
    grid.imagesLoaded().progress( function() {
    grid.masonry('layout');
    });});
    </script>

    310 is the column width that you can change.
    And in css you change the item width : .grid-item{width:300px}

    Hope this helps
    Paul

Feedback and Knowledge Base