This script I just created will help you get started.
To organize the images into neat rows, I am utilizing the column-count property on the parent element. Currently set to 3 rows, this value can be adjusted as needed.
(For the slideshow feature, that part is open for customization. There are numerous tutorials and plugins available for creating slideshows.)
The clicked img tag's source is captured and converted into a variable within the script. This variable is then applied to the overlay class using the .css() method. This enables an overlay effect for each image that is clicked.
The Structure of HTML:
<div class="parent">
<img src="urlGoesHere" alt="img" />
<!-- Add more images here -->
</div>
The CSS Styling:
.parent {
width: 100%;
column-count: 3; /* determines the number of columns */
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-ms-column-count: 3;
column-gap: 5px; /* sets the spacing between columns */
-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 src attribute in a variable
$('.overlay').fadeIn().css('background-image', 'url(' + imgSrc + ')'); // Displays the overlay with the selected image and fades it in
$('.close').on('click', function() { // Functionality for the close button
$('.overlay').fadeOut(); // Hides the overlay upon clicking
});
});
Check out the demo on JSFiddle: Demo