显示叠加和关联图像，点击缩略图

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

大图像区域和缩略图区 - w ^母鸡用户点击图像时，它会在src中以全宽800px显示覆盖图和图像，而不是背景图像。

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

更新似乎如果我把lgimagePanel放在post div之外，它不会像预期的那样行为。无法弄清楚。随着你的帮助，我们感激。

来源

2014-09-04 joe

'.largeImgPanel''，'.thumbnail'不会出现包含在' html'？ – guest271314 2014-09-04 14:55:37

@ guest271314 - oops已更正该代码。感谢您指出。在叠加显示后点击缩略图时，大面板会显示大图。 – joe 2014-09-04 15:16:03

以下所有的首先是没有必要的：

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;"); 
});

...虽然我不知道为什么你在“数据IMG”属性中的URL。

此外，当我想要展示叠加层时，我不清楚吗？另外，您错过了HTML元素“#overlay”。它不存在于您的HTML中，也不在JS中生成。您可以将它添加为div，修复CSS，然后通过jQuery的.toggle（）函数切换其可见性。

更新：

也许这拨弄对你有帮助（主要是改变了JS）：

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

来源

2014-09-04 14:59:38 aolsen

是的，我已经纠正了帖子，以及小提琴。当点击缩略图时，出现覆盖层，然后原始图片出现在覆盖层上。小提琴不会像我的本地机器上显示重叠。切换显示和隐藏？ – joe 2014-09-04 15:21:46

其实数据并不是必须的，但我不确定如何从背景图像中提取图像。 – joe 2014-09-04 15:23:24

也许这个小提琴可以帮助你：http://jsfiddle.net/6xc1d92k/39/ – aolsen 2014-09-04 16:44:21

显示叠加和关联图像，点击缩略图

回答

相关问题