如何在jquery中顯示覆蓋圖的完整圖像？

你能告訴我如何顯示big或large圖像按鈕點擊覆蓋。我正在製作一個圖像滑塊，用戶在其中單擊image，它會顯示覆蓋圖像的完整圖像。我想這樣的如何在jquery中顯示覆蓋圖的完整圖像？

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') 
    }) 

})

來源

2017-03-10 user944513

這裏就是點擊圖像的例子 - 我們走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/

來源

2017-03-10 13:24:40 Brad

我想你的變化..它適用於任何庫，但爲什麼它的完整圖像滾動https://plnkr.co/edit/7AqAHSSPwZyj7cipXMrq?p=preview – user944513

大的圖像應顯示在中心 – user944513

我編輯了我的答案，以圖像爲中心。如果這對你有幫助，請標記爲答案和註解:) – Brad

如果你想使用一個庫，你可以使用prettyPhoto已經做了你所需要的一切。

如果你不想使用一個庫，你可以在你的代碼（您的JS文件的最後jQuery的事件）：

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

來源

2017-03-10 13:11:41 Gawel91

我不要使用 – user944513

我編輯了我一個解決方案的答覆沒有圖書館 – Gawel91

對於初學者$('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只是爲了疊加功能，那麼你正在做的事情難度比需要...

來源

2017-03-10 13:58:02 yezzz

請分享朋友 – user944513

https://plnkr.co/edit/M2vrqpnlwa8e6U9oJ54P?p=preview – yezzz

如何在jquery中顯示覆蓋圖的完整圖像？

回答

相關問題