单击时显示和隐藏图像

时间：2022-12-30 20:23:44

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

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.

    当我单击父类(例如缩略图#1)并显示较大的图像时,我想再次单击父类(例如缩略图#1)时隐藏大图像。以及其他缩略图。

  • 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.

    然后,当我单击缩略图#1并显示较大的图像,并单击缩略图#2时,缩略图#1的大图像将隐藏,缩略图#2的较大图像将显示。与其他缩略图一样。

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

注意:单击一个大图像(本身)时,不应隐藏它。

2 个解决方案

#1

1  

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

#2

1  

First you need to check if the popup is visible , if yes hide it if a user clicks on its thumbnail.If no , hide any popup that is open.And if a popup is visible and user clicks on other popup , still close any popup that is visible and show the corresponding popup.

首先,您需要检查弹出窗口是否可见,如果是,则在用户点击其缩略图时隐藏它。如果没有,则隐藏任何打开的弹出窗口。如果弹出窗口可见且用户点击其他弹出窗口,仍然关闭任何弹出窗口这是可见的并显示相应的弹出窗口。

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

  if($(this).children('.popup-preview').is(':visible')){
    $(this).children('.popup-preview').hide();
  }
  else{
    $('.popup-preview').hide();
  var previewPopup = $(this).children('.popup-preview');
  previewPopup.fadeIn();
   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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

#1

1  

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

#2

1  

First you need to check if the popup is visible , if yes hide it if a user clicks on its thumbnail.If no , hide any popup that is open.And if a popup is visible and user clicks on other popup , still close any popup that is visible and show the corresponding popup.

首先,您需要检查弹出窗口是否可见,如果是,则在用户点击其缩略图时隐藏它。如果没有,则隐藏任何打开的弹出窗口。如果弹出窗口可见且用户点击其他弹出窗口,仍然关闭任何弹出窗口这是可见的并显示相应的弹出窗口。

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

  if($(this).children('.popup-preview').is(':visible')){
    $(this).children('.popup-preview').hide();
  }
  else{
    $('.popup-preview').hide();
  var previewPopup = $(this).children('.popup-preview');
  previewPopup.fadeIn();
   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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>


  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
      <div class="popup-preview">
        <div class="title">THEME 1-1</div>
        <img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
        <div class="preview-btn">
          <a href="#"> <span>Preview</span></a>
        </div>
      </div>
    </div>
  </div>
</div>

标签：

相关文章