jquery에서 오버레이로 전체 이미지를 표시하는 방법?

Question

오버레이로 버튼을 클릭 할 때 big 또는 large 이미지를 표시하는 방법을 알려주십시오. 사용자가 image을 클릭하고 오버레이가있는 전체 이미지를 보여주는 이미지 슬라이더를 만들고 있습니다. 난 당신이 라이브러리를 사용하려는 경우, 당신은 당신이 필요한 모든 작업을 수행 prettyPhoto를 사용할 수있는이

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>

도움이된다 : 그것은 body 요소 내부 html 요소를 선택하기 때문에 작동하지 않습니다 $('body html').addClass('overlay') 우선 들어 https://jsfiddle.net/BradChelly/kbode1cx/

Answer 2

같은 시도했다.

당신이 라이브러리를 사용하지 않으려면, 당신은 당신의 코드 (당신의 JS 파일의 마지막 jQuery를 이벤트)에 해당 할 수 있습니다

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

Answer 3

.. 존재하지 않습니다.

나는 당신이 (그것을 크로스 브라우저 만들기 위해) 중 하나를 클래스를 대상으로 의미 생각 :

$('body,html')

당신은 클래스를 전환 할 수 있습니다 :

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

이 그런 다음 CSS를 조정합니다. 이 같은 아마 뭔가 : 당신은 단지 오버레이 기능에 대한 IMG와 .small 및 .large 래퍼를 필요로하는 경우

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

BTW, 당신은 필요 이상으로 일을 어렵게 만들고있어 ...