Your Cart

Galleria Galleries Not Loading Correctly After Infinite Scroll

These forums are now closed to new replies / tickets.

Please open a support ticket from our new Support page.

Front Page Forums Problems Galleria Galleries Not Loading Correctly After Infinite Scroll

  • gravatar
    Henry
    April 15, 2015 at 3:52 am

    I have a website built on WordPress with a couple of hundred
    posts. Each post contains up to 10 images. Infinite Scroll is used
    to load in more posts automatically. What I want is for the main
    page to be a page of image galleries; one per post.

    It works fine for the first set of Galleries but I have been
    having trouble getting it working via the infinite scroll callback
    function. Here is what I have:

    First, I have this code to initialise the galleries at the
    bottom of the page:

    <script>
        Galleria.loadTheme('/scripts/themes/classic/galleria.classic.js');
        Galleria.run('.galleria', {
            thumbnails: 'numbers',
            preload: 1
        });
    </script>
    

    …and I tried this code in a function called from the infinite
    scroll callback:

    function loadSliders() {
        Galleria.ready(function(options) {
    this.destroy(); }); Galleria.run('.galleria', { thumbnails: 'numbers', preload: 1 }); }

    Needless to say, this doesn’t work. Without the destroy() it
    seemingly works, loading new galleries as you scroll down; but,
    when you scroll back up the previously loaded galleries are gone!

    Any help would be much appreciated.

    Thanks.


    gravatar
    Henry
    April 21, 2015 at 12:27 am

    Got it working for anyone with a similar problem…

    The html (#galleria-1609 is only an eg. I use post-ID to make it
    dynamic) and JS in the loop for the first set of posts. Note I am
    passing the height ratio as a second class name (for lack of a
    better way).

    <div id="galleria-1609" class="galleria 0.5">
        <a href="img01-800x400.jpg" alt="Large Image" ><img src="thumb.png" /></a>
        <a href="img02-800x400.jpg" alt="Large Image" ><img src="thumb.png" /></a>
    </div>
    <script>
        Galleria.run('#galleria-1609', {
            thumbnails: 'numbers',
            height: 0.5, /* ratio */
            preload: 1
        });
    </script>
    

    For the posts fetched by Infinite Scroll I created a JS function
    which I call from the infinite scroll callback, passing through the
    Array of new elements:

    function loadSliders(arrayOfNewElems) {
        $(arrayOfNewElems).each(function( i ) {
            $(this).find('.galleria').each(function( j ) {
                            //grab 2nd class name > the height ratio
                var ratio = $(this).attr('class').split(' ')[1];
                var thisID = '#'+ $(this).attr('id');
    Galleria.run(thisID, { thumbnails: 'numbers', height: ratio, preload: 1 }); }); }); }

    And that is it.

    
    


Galleria.io uses cookies to store information. You can read more about that in our Privacy Policy. I understand