Question

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中以全宽800px而不是背景图像显示叠加和图像。

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

更新似乎如果我将lgimagePanel放在post div之外，它将不会按预期运行。无法弄清楚。感谢您的帮助。

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

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

1 个答案: