Responsiveslides with JSON as Datasource

Question

After much search for a very simple image gallery I ended up finding the Responsiveslides.js which is not only quite simple, but also works satisfactorily in smartphones (even if the latter does not recognise Gestures for slide exchange - but that’s another story).

However, like many gallery/slide plugins, the Responsiveslides works with the existing and/or predefined HTML markup and it is precisely in this that I seek adaptation or, suddenly, suggestion of alternative because, at least initially, the images used will be hosted in the Imgur and consumed through your API.

I even found an Issue in the Github repository of someone’s project with similar intent to mine that went beyond an initial implementation, but also failed to succeed.,

And this limitation is bad in terms of performance because it requires that the images that will be part of the gallery are previously loaded, hindering or even preventing the Lazy Load theirs.

As requested, the importing part of the current code:

<article id="uCSg1">

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

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

    <section class="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 there are articles on the page. The element <article> has the same ID as the album ID. In this example, the album is that.

The image in the element <figure> is the album cover image, set in the album settings by the Imgur interface. As this album in question is not mine, I used the first image even.

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 the Album and in that case produces as a response this JSON

The API Imgur requires authentication with an access key which was purposely falsified here. However the registration for new keys is free.

Answer 1

As no one has expressed more, I will give my opinion (not an answer, but does not fit in a comment), if you want I can delete.

From what I saw in the repository Github, the author does not support more than 1 year in the library (it seems that it has been abandoned) and has many issues open and pull requests not accepted. I do not know if I would use a gallery like this (my opinion, :D).

I found another, it is much more complete (and complex), has few open issues (90% of them already closed) and active development, but accepts JSON as DataSource, of support to lazyload and still works on mobile: https://github.com/blueimp/Gallery. I don’t know if you like it, since one requirement of choice is that it be simple.

To Gallery from what I understand, it was conceived on the principle of plugins, that is, you do not need to import all the files js, only matter what you want (see: https://github.com/blueimp/Gallery#Chirements).

I have other suggestions:

1. Do fork of the library and include this feature. From what I saw of the source, It’s pretty simple so just do one decorator to preserve the original code and only add functionality.
2. If you use a framework (MVVM, MVC, MVW...), just do it. bind of your JSON/Template in html (generating the elements <figure>), and see a way to update the gallery control by the plugin, something like a refresh. In that case you would need to implement lazyload/reuse on its own. Whenever I get an idea of recycling in mind, I think of the algorithm of Adapter of ListView android (http://android.amberfog.com/? p=296).