Hide image sequence on click; show again when finished - html

Question

I have a layout with a sequence of images overlapping.
I want to hide them one by them when clicking and after you hided all the pictures, show them in a reversed way until having them all – like a loop.
I have this simple piece of code where I manage to hide the images when clicking them, but can't figure how to show them again.
$('.overlap-img').on("click", function() {
$(this).hide();
})
Is there any way to accomplish that?
It's not mandatory to hide the image you click, it can work that you click anywhere and the images are closing, maybe that way you have more control of the sequence.
Thanks in advance!

Answer 1

1st: It will be good to add fake hide class to the hidden images
2nd: Need to get the number of the images and the number of hidden images
3rd: Loop through images using .each then you can use setTimeout to make a delay in show
$(document).ready(function(){
var interval,
time_to_hide = 500, // duration to fade/hide the image
time_to_show = 1000 // duration to fade/show the image
$(document).on("click",'.overlap-img:not(.showing)' , function() {
// add class hide to the clicked image and use hide([duration] , [callback])
$(this).addClass('hide').slideUp( time_to_hide , function(){
var All_images_Count = $('.overlap-img').length, // get the all images length
Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
if(Hidden_images_Count == All_images_Count){ // if the all images == the hidden images then
$('.overlap-img.hide').each(function(index){ // loop through the hidden images .. (index) is the index of the image
var This_image = $(this); // $(this) cannot work in setTimeout so you need to define it outside
interval = setTimeout(function(){
This_image.removeClass('hide').addClass('showing').slideDown(); // remove the class from the image and show it
if($('.overlap-img.showing').length == All_images_Count){ // if all images finish showing
$('.overlap-img.showing').removeClass('showing'); // remove the showing class from all
}
} , time_to_show * index); // time_to_show * index to make a delay between images on show
});
}
});
})
});
img{
position : absolute;
width : 100%;
height : 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img" src="https://via.placeholder.com/100"/>
<img class="overlap-img" src="https://via.placeholder.com/150"/>
<img class="overlap-img" src="https://via.placeholder.com/200"/>
<img class="overlap-img" src="https://via.placeholder.com/250"/>
<img class="overlap-img" src="https://via.placeholder.com/300"/>
<img class="overlap-img" src="https://via.placeholder.com/350"/>
Also the .showing class I used it to prevent user to click till all images is shown
The OP Commented: I was simply wondering if it's possible, instead of making the images
appear automatically, to force the user to click in order to make them
appear. So the same process as to make them hide but making them
appear
$(document).ready(function(){
var interval,
time_to_hide = 500, // duration to fade/hide the image
time_to_show = 1000, // duration to fade/show the image
All_images_Count = $('.overlap-img').length; // get the all images length
$(document).on("click",'.overlap-img:not(.showing):not(:eq(0))' , function() {
// add class hide to the clicked image and use hide([duration] , [callback])
$(this).addClass('hide').slideUp( time_to_hide , function(){
var Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
if(Hidden_images_Count == All_images_Count - 1){ // if the all images == the hidden images then
$('.overlap-img:eq(0)').addClass('showing'); // Add the class showing to the first image
}
});
});
$(document).on("click",'.overlap-img.showing' , function() {
var ThisImage = $(this), // this image
NextImage = ThisImage.next('.overlap-img.hide'); // the next image
NextImage.removeClass('hide').addClass('showing').slideDown();
var showing_images_Count = $('.overlap-img.showing').length; // get the showing images length
if(showing_images_Count == All_images_Count){ // if the all images == the showing images then
$('.overlap-img.showing').removeClass('showing'); // remove the `showing` class from all the images
}
});
});
img{
position : absolute;
width : 100%;
height : 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img" src="https://via.placeholder.com/100"/>
<img class="overlap-img" src="https://via.placeholder.com/150"/>
<img class="overlap-img" src="https://via.placeholder.com/200"/>
<img class="overlap-img" src="https://via.placeholder.com/250"/>
<img class="overlap-img" src="https://via.placeholder.com/300"/>
<img class="overlap-img" src="https://via.placeholder.com/350"/>