如何在jquery中显示覆盖图的完整图像？

Question

你能告诉我如何显示big或large图像按钮点击覆盖。我正在制作一个图像滑块，用户在其中单击image，它会显示覆盖图像的完整图像。我想这样的

https://plnkr.co/edit/7AqAHSSPwZyj7cipXMrq?p=preview

.overlay { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    width:100%; 
    height:100%; 
    background-color:black; 
    z-index:9999; 
    color:white; 
} 

$(function() { 

    var counter = 0; 
    $('#next').click(function() { 
    if (counter < $('.imageBlock').length-1) { 
     counter++; 
     $('.imageBlock').hide(); 
     $('.imageBlock').eq(counter).show(); 
    } 
    }) 
    $('#pre').click(function() { 
    if (counter > 0) { 
     counter--; 
     $('.imageBlock').hide(); 
     $('.imageBlock').eq(counter).show(); 
    } 
    }) 

    $('.imageBlock').click(function(){ 
    $('body html').addClass('overlay') 
    }) 

}) 

Answer 1

这里就是点击图像的例子 - 我们走src，并将其添加到隐藏的div（.overlay img），然后显示div。

单击覆盖隐藏它再次。

希望这是有益

$('.thumb').on('click', function(){ 
 
    src = $(this).attr('src'); 
 
    $('.overlay img').attr('src', src); 
 
    $('.overlay').show(); 
 
}); 
 

 
$('.overlay').on('click', function(){ 
 
    $('.overlay').hide(); 
 
});

.thumb { 
 
    width: 250px; 
 
} 
 
.overlay { 
 
    display: none; 
 
    position: absolute; 
 
    top:0px; 
 
    background: #000; 
 
    width: 100%; 
 
    height: 100vh; 
 
    white-space: nowrap; 
 
    
 
    text-align: center; 
 
} 
 

 
.overlay img { 
 
    width: 100%; 
 
    border:5px solid #000; 
 
    vertical-align: middle; 
 
} 
 

 
.helper { 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<img class="thumb" src="https://images.unsplash.com/photo-1428094479093-8973a318bd76?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop="> 
 

 
<div class="overlay"><span class="helper"></span><img src=""></div>

这里有一个小提琴：https://jsfiddle.net/BradChelly/kbode1cx/

Answer 2

如果你想使用一个库，你可以使用prettyPhoto已经做了你所需要的一切。

如果你不想使用一个库，你可以在你的代码（您的JS文件的最后jQuery的事件）：

$('.imageBlock').click(function(){ 
    $('body').toggleClass('overlay'); 
    $('.imageBlock').eq(counter).find('.large img').toggle(); 
}) 

Answer 3

对于初学者$('body html').addClass('overlay')不起作用，因为选择body元素中的html元素..这不存在。

我觉得你的意思是要指定类（以使其跨浏览器）：

$('body,html')

你可以切换类：

$('body,html').toggleClass('overlay')

然后调整你的CSS。大概是这样的：

.overlay .imageBlock .small img { 
display: none; 
} 
.overlay .imageBlock .large img { 
display: block; 
} 

顺便说一句，如果你只需要.small和.large包装与IMG只是为了叠加功能，那么你正在做的事情难度比需要...