Apply masonry dinamically

Home Forums Porto – Responsive HTML5 Template Apply masonry dinamically

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #10016163
    Flavio Dossena
    Participant

    Hi,
    I’ve a <ul> list with ajax pager where want apply the masonry plugin with this ul tag definition:
    <ul role="listbox" data-role="listview" class="products product-thumb-info-list k-widget k-listview" data-plugin-masonry="data-plugin-masonry" data-plugin-options="{'layoutMode': 'fitRows'}" id="ListView" style="border-style: none; position: relative; height: 1838.67px;">

    The first time that the page is loaded the masonry plugin is applyed correctly to the <li> element inside <ul>.

    When I change page new <li> elements are loaded but the masonry plugin it’s not applyed to the new element.
    How can I call via javascript the request to apply masonry to the new elements ?

    Thanks,
    Flavio


    #10016169
    Support
    Keymaster

    Hello,

    To call the masonry init function you need to use this:

    – Add an ID in the UL, for example: id=”theULId”

    – JS function:

    $('#theULId').themePluginMasonry({});

    Kind Regards,

    Jonas


    #10016227
    Flavio Dossena
    Participant

    Hi,

    I’ve try your suggestion but don’t work for me.
    I’m trying to send you a copy of html code (inside ‘code’ tag) but I receive an erorr 403 Forbidden: A potentially unsafe operation has been detected in your request to this site.

    Thanks,
    Flavio


    #10016230
    Support
    Keymaster

    Hi, please send me the URL as a private message so I can check that for you.

    Kind Regards,

    Jonas


    #10016234
    Flavio Dossena
    Participant
    This reply has been marked as private.
    #10016238
    Support
    Keymaster

    Hello, my suggestion is that when you make the ajax request to show next/prev items you remove the UL #ListView and add it again, so then you apply the Masonry Plugin, or this way:

    $('#ListView').isotope({
    	itemSelector: 'li',
    	layoutMode: 'fitRows'
    });

    Which is the same.

    Please try that and let me know.

    Kind Regards,

    Jonas


    #10016243
    Flavio Dossena
    Participant

    Hello,

    I’m sorry, but I can’t remove the UL and add it again, because I use a tool that manage the ajax request and paging automatically.
    There isn’t a method to unregister masonry plugin for UL and re-apply it ?
    Or have you other suggestion ?

    Thanks,
    Flavio


    #10016251
    Support
    Keymaster

    Hello, another way would be using the “adding/removing items” from isotope (masonry), but it may require customization.

    Here’s the documentation:

    http://isotope.metafizzy.co/methods.html#adding-and-removing-items

    Best Regards,

    Jonas


    #10016258
    Flavio Dossena
    Participant

    Hi,

    I’ve resolved calling this function :
    $('#ListView').isotope( 'reloadItems' ).isotope();

    This rebuild LI elements in UL.

    Thanks,
    Flavio


Viewing 9 posts - 1 through 9 (of 9 total)

This topic is marked as "RESOLVED" and can not rceive new replies.