单击时显示和隐藏图像

Question

我试图在点击缩略图时显示图像。

以下是我的代码：

＆＃13;

＆＃13;

$('.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;
 });

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

单击任何缩略图时显示图像。如果点击它之外它会隐藏。

我想补充的是：

• 当我点击父类（例如缩略图＃1）并显示较大的图像时，我想再次点击父类（例如缩略图＃1）时隐藏大图像。以及其他缩略图。

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

注意：单击一个大图像（本身）时，不应该隐藏它。

Answer 1

您可以尝试这样的事情：

逻辑：

• 点击后，检查要显示的缩略图是否可见/
• 如果是，请隐藏它。
• 如果没有，则隐藏任何其他缩略图并显示当前缩略图。

＆＃13;

＆＃13;

$('.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()
})

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

$('.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>