1

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?

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.

| improve this answer | |
  • thanks for the elaborate answer. I really appreciate it and it's a lot of help for me. Few questions: for the add to lightbox, I can do something like this right? <p>Image 1 <a href="#" data-lightbox="imgID1">Add to Lightbox</a></p> and then after I collected the images, I'll call a submit button. I got my fiddle here: jsfiddle.net/vanduzled/Vc529/3 On the next page, I found a jquery plugin which can zip the images for download.viralpatel.net/blogs/create-zip-file-javascript can that be integrated too? – vanduzled Jun 13 '14 at 2:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.