显示在缩略图上单击的叠加层和相关图像答案

【问题标题】：Show overlay and related image that is clicked on thumbnail显示在缩略图上单击的叠加层和相关图像
【发布时间】：2014-09-04 14:23:15
【问题描述】：

DEMO fiddle

jQuery

var thumb = $('.thumbContainer').find('.thumb');
  thumb.on('click', function(e){

    $('body').addClass('sidePanelOpen');
     var newimgsrc = $(this).data('img');
    $('.largeImgPanel').find('.lgimage').css("backgroundImage", "url("+ newimgsrc +")");
  });

  $('.sidePanelOpen #overlay').click(function(e){
    $('body').removeClass('sidePanelOpen');
  });

HTML

<body>
    <div class="post">
    <div class="imageContainer">
      <div class="bigimg" style="background-image: url('http://www.cuteheaven.com/wp-content/uploads/2011/05/kitten-III.jpg');">
      </div>

    <div class="thumbContainer">
      <ul>
      <li>
        <a href="#">
          <div class="thumb" data-img="http://thumbs.dreamstime.com/z/small-kitten-13447096.jpg" style="background-image: url('http://thumbs.dreamstime.com/z/small-kitten-13447096.jpg'); vertical-align: middle; width:100px"></div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="thumb" data-img="http://www.dumpaday.com/wp-content/uploads/2013/05/small-kitten.jpg" style="background-image: url('http://www.dumpaday.com/wp-content/uploads/2013/05/small-kitten.jpg'); vertical-align: middle;"></div>
        </a>
      </li>

    </ul>
    </div>
<div class="largeImgPanel">
  <div style="z-index: 9200">
    <div class="lgimage" style="background-image: url('___');"></div>
</div>
</div><!--./lg image panel-->
<div id="overlay"></div>
</body>

CSS

#overlay{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.sidePanelOpen #overlay{
  opacity: 0.9;
  visibility:visible;
  z-index: 9000;
}
.sidePanelOpen .largeImgPanel{
  background: red;
  width: 700px;
  margin: 0 auto;
}

    .bigimg{
      height: 250px;
      width: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block !important;
    display: inline-block;
    vertical-align: top;
    box-shadow: 0 1px 1px #ececec;
    transition: box-shadow .3s;
    }  

    .thumb{
    vertical-align: middle;
    height: 70px;
    width: 70px;
    display: block;
    background-color: #999999;
    overflow: hidden;
    background-size: cover;
    }

大图像区域和缩略图区域 - 当用户单击图像时，它将在 src 中以全宽 800 像素显示覆盖和图像，而不是背景图像。

一直在努力使警报出现，但没有任何反应。问题是 jquery 没有做任何事情。尝试单击图像，它没有做任何事情。另外，不确定如何替换 src 而不是 css backgroundImage。

更新好像如果我将 lgimagePanel 放在帖子 div 之外，它的行为就不会像预期的那样。想不通。感谢您的帮助。

【问题讨论】：

.largeImgPanel' , .thumbnail 未出现在 html 中？
@guest271314 - 哎呀已更正代码。感谢您指出。出现叠加层后点击缩略图，大面板会显示大图。

标签： jquery html css

【解决方案1】：

首先，以下不是必需的：

var thumb = $('.thumbContainer').find('.thumbnail');
thumb.on('click', function(e){

为什么不尝试以下方法：

$('.thumb').on('click', function(e){

然后您可以使用 $(this) 来引用该元素。

我不太确定其余部分该怎么做。您想用缩略图源替换“bigimg”吗？这可以通过执行以下操作来实现：

$('.thumb').on('click', function(e){  
    $('.bigimg').attr('data-img', $(this).attr('data-img'));
    $('.bigimg').attr('style', "background-image: url('" + $(this).attr('data-img') + "'); vertical-align: middle;");
});

...虽然我不确定为什么你的 'data-img' 属性中有 url。

另外，我不清楚您何时要显示叠加层？此外，您还缺少 HTML 元素“#overlay”。它不存在于您的 HTML 中，也不存在于 JS 中。你可以将它添加为一个 div，修复 CSS，然后通过 jQuery 的 .toggle() 函数来切换它的可见性。

更新：

也许这个小提琴对你有帮助（主要是对 JS 的改动）：

http://jsfiddle.net/6xc1d92k/39/

【讨论】：

是的，我已经更正了帖子和小提琴。单击缩略图时，会出现叠加层，然后原始图片会出现在叠加层上。小提琴不像我的本地机器上那样显示覆盖。在显示和隐藏中切换？
实际上数据不是必需的，但我不确定如何从背景图像中提取图像。