ResponsiveSlides with JSON as DataSource

After much searching for a very simple image gallery I ended up finding ResponsiveSlides.js which is not only simple enough, but also works ( smartphones even though it does not recognize gestures for slideshows - but that's another story).

However, like many gallery / slide plugins, ResponsiveSlides works with existing and / or pre-defined HTML markup, and it's just in that I am looking for adaptation or, suddenly, an alternative suggestion because, at least initially, the images used will be hosted in IMGur and consumed through your API.

I've even found an issue in the Github repository of the project of someone with similar intent to mine that was in addition to an initial implementation , but that was not successful either.

And this limitation is poor in terms of performance because it requires that the images that will be part of the gallery are preloaded, making it difficult or even preventing the Lazy Load .

As requested , the part that matters of the current code:

<article id="uCSg1">

    <h3 role="heading"></h3>

    <figure class="cover">
        <img src="http://i.imgur.com/Ik3yGs8.jpg"></figure><sectionclass="permalink">

        <div class="separator"></div>

        <p>Posted on Sunday, 9 December with 1 note.</p>
        <p>Reblog This Post.</p>

    </section>

</article>

This block repeats as many times as many articles as exist on the page. The <article> element has the same ID as the album ID. In this example, the album is this .

The image in the <figure> element is the album cover image, defined in the settings of the album by the IMGUr interface. As this album in question is not mine, I used the very first image.

In JavaScript:

$( document ).ready(function() {

    $( 'article' ).each( function() {

        buildGallery( $( this ) );
    });
});

function buildGallery( article ) {

    $.ajax({

        url: 'https://api.imgur.com/3/album/' + article.attr( 'id' ),
        type: 'get',

        headers: {
            Authorization: 'Client-ID 123456'
        },

        dataType: 'json',

        success: function( response ) {

            if( response.success ) {

                // Monta a galeria/slides
            }
        }
    });
}

The data model used is Album and in that case it produces a response this JSON

  

The IMGUr API requires authentication with an access key that was intentionally forged here. However the registration for new keys is free .