Switch between thumbnails and big image in jquery gallery?

Question

I'm a beginner (and sorry for my English) and I'm trying to build a jquery based photo gallery for my own website.

A feature I'd really love is this one (example): http://www.robindmoore.com/#!/index/G0000n_GEYuF3.rM/1

You have a big thumbnail grid and when you click on one of the thumbs the grid disappears to show the "big" images in a slideshow. From the slideshow itself you can switch back to the thumbs by clicking on the dedicated icon. I guess this kind of gallery is based on jquery but I don't understand how the switching from thumbs and slideshow (and vice versa) is done... css3 key-frames perhaps?

I don't want to copy the gallery, I'm just interested in reproducing this property. If you have any ideas on how I could start working on it I'd be greatful.

Thank you in advance

Answer 1

This little script I just wrote should get you started.

What I am doing is using column-count on the parent to break all of the images up into nice even rows, currently it is set to 3 rows but can be more or less.

(For the slideshow functionality, that is up to you. There are thousands of slideshow tutorials, plugins, etc.)

I am then taking the clicked img tag's src and turning that into a variable. The script then takes that var and adds it through .css() to the overlay class. Which will allow you to have an overlay of each image clicked.

The HTML Structure:

<div class="parent">
    <img src="urlGoesHere" alt="img" />
    <!-- Continue with the images -->
</div>

The CSS:

.parent {
    width: 100%;
    column-count: 3; /* controls the amount of columns */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-gap: 5px; /* controls the spacing between each column */
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    -o-column-gap: 5px;
    -ms-column-gap: 5px;
    position: relative;
    z-index: 10;
}

The script:

$('.parent img').on('click', function() {
   var imgSrc = $(this).attr('src'); // Stores the img's src into a var

    $('.overlay').fadeIn().css('background-image', 'url(' + imgSrc + ')'); // Adds the stored var to the overlay class and fades it in

    $('.close').on('click', function() { // The close button's functionality
        $('.overlay').fadeOut(); // Hides the overlay once clicked
    });
});

Here is a fiddle: Demo