How can I implement an Add to Collection function on my Image Gallery to be downloaded later?

Question

I am building a WordPress Image Gallery like a Stock Photo Gallery for internal office use. I am using the Media Gallery to upload files and then using the image gallery to display the photos. It's working all well with four download options which you can choose.

The problem I'm having is that I want to collect those images with a click of a button so that I can keep them and then later on, download them as a zip file. It'll make life easer for users to do this instead of downloading individuals photos.

This is kinda like istock or shutterstock Add to Lightbox feature.

I've seen a plugin which is the closes to what I want. It's called, Add to favorites. But it just gives you a list of titles in a widget.

I don't want users to register into the site therefore just using cookies is enough so that whenever they close the browser, the collections reset.

I dug into HTML5 local storage and jquery cookie but this seems kinda hardcore for me.

I also thought of a shopping cart plugin but I don't need the paypal or whatever payments because I just want people to collect and download with an ease.

Is there any way I can do this? Is there a kind of plugin which I can use?

Answer 1

I would skip cookies and use the awesome script store.js

Just kick out a data-lightbox attribute on the "Add to Lightbox" link with the image ID and (assuming you're using jQuery) it's this simple:

$( document.body ).on( "click", "a[data-lightbox]",
    function ( ev ) {
        ev.preventDefault();
        var id = $( this ).data( "lightbox" ), list = store.get( "lightbox" );
        if ( list ) {
            if ( $.inArray( id, list ) === -1 )
                list.push( id );    
        } else {
            list = [ id ];
        }

        store.set( "lightbox", list );
    }
);

And to download, just process the list & redirect to your server-side handler:

$( ".download" ).click(
    function ( ev ) {
        ev.preventDefault();
        var list = store.get( "lightbox" );
        if ( list ) {
            var href = window.location.href,
                args = ( href.indexOf( "?" ) !== -1 ? "&" : "?" ) + "download=" + list.join( "," );

            window.location = href + args;
        }
    }
);

I've made the assumption that your handler accepts a comma-separated list of IDs in $_GET['download'] for any given URL.