Show and hide image when clicked

Question

I am trying to show an image when a thumbnail of it was clicked.

Here is my code as of now:

$('.theme-preview').click(function() {

  console.log("fired");
  var previewPopup = $(this).children('.popup-preview');
  previewPopup.fadeIn("slow");

  previewPopup
    .css("position", "fixed")
    .css("top", ($(window).height() / 2) - ($(this).children('.popup-preview').outerHeight() / 2))
    .css("left", ($(window).width() / 2) - ($(this).children('.popup-preview').outerWidth() / 2));


  return false;

});

$('html').click(function() {
    $('.popup-preview').hide();
      return false;
 });

.popup-preview {
  background: black;
  position: absolute;
  z-index: 1;
  display: none;
}

.col-md-6 {
  float: left;
}

The images are showing when click on any of the thumbnails. And it will hide if click outside of it.

What I want to add is:

When I clicked a parent class (e.g. thumbnail #1) and shows the larger image, I want to hide the large image when I clicked again the parent class (e.g. thumbnail #1). As well as to other thumbnails.
Then when I clicked the thumbnail #1 and shows the larger image, and click the thumbnail #2, the large image of thumbnail #1 will hide and the larger image of thumbnail #2 will show. The same as well to other thumbnails.

Note: When a large image was clicked(itself), it should not be hidden.

Rajesh · Accepted Answer

You can try something like this:

Logic:

On click, check if thumbnail to be shown is visible/
If yes, hide it.
If not, then hide any other thumbnail and show current thumbnail.

$('.theme-preview').click(function() {

  var previewPopup = $(this).children('.popup-preview');
  if (previewPopup.is(":visible"))
    previewPopup.fadeOut("slow");
  else {
    $('.popup-preview:visible').fadeOut();
    previewPopup.fadeIn("slow");

    previewPopup
      .css({
        "position": "fixed",
        "top": ($(window).height() / 2) - (previewPopup.outerHeight() / 2),
        "left": ($(window).width() / 2) - (previewPopup.outerWidth() / 2)
      })
  }
  return false;
});

$('html').click(function() {
  $('.popup-preview').hide();
  return false;
});

$('.popup-preview').on("click", function(e){
  e.stopPropagation()
})

.popup-preview {
  background: black;
  position: absolute;
  z-index: 1;
  display: none;
}

.col-md-6 {
  float: left;
}

Show and hide image when clicked

Answers (2)

Logic:

Related Questions