사용자 정의 Jquery "Lightbox"가 작동하지 않습니다.

Question

Youtube의 튜토리얼을 사용하여 실제 라이트와 비슷한 라이트 박스를 만들었습니다. 실제로 라이트 박스를 만들 수 없었습니다. 네 번째 그림을 얻을 때까지 완벽하게 작동했습니다. 세트의 사진 중 하나를 클릭 할 때마다 네 번째 사진 만 표시됩니다. 모든 종류의 도움을 많이 주시면 감사하겠습니다! 미리 감사드립니다. 여기에 라이트와 애니메이션에 대한 코드는 다음과 같습니다

비디오 : https://www.youtube.com/watch?v=k-uonF7Gdgw

CSS: 
.pic { 
position: absolute; 
left: 340px; 
top: 100px; 
z-index: 5; 
border: 2px solid white; 
border-radius: 5px; 
} 

.pic2 { 
position: absolute; 
left: 600px; 
top: 100px; 
z-index: 5; 
border-radius: 5px; 
border: 2px solid white; 
} 

.pic3 { 
position: absolute; 
left: 340px; 
top: 350px; 
z-index: 5; 
border-radius: 5px; 
border: 2px solid white; 
} 

.pic4 { 
position:absolute; 
left: 600px; 
top: 350px; 
z-index: 5; 
border-radius: 5px; 
border: 2px solid white; 
} 

.backdrop { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 100%; 
background: #000; 
opacity: .0; 
filter: alpha(opacity=0); 
z-index: 50; 
display: none; 
} 

.box { 
position: absolute; 
top: 10%; 
left: 28.2%; 
width: 500px; 
height: 500px; 
background: #ffffff; 
z-index: 51; 
padding: 10px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
-moz-box-shadow:0px 0px 5px #444444; 
-webkit-box-shadow: 0px 0px 5px #444444; 
box-shadow: 0px 0px 5px #444444; 
display: none; 
} 

.closebutton { 
float: right; 
margin-right: 6px; 
cursor: pointer; 
} 

.picinside { 
position: absolute; 
top: 0px; 
left: 0px; 
border-radius: 5px; 
border: 2px solid white; 
} 

HTML: 
<div class="backdrop"></div> 
<div class="box"><img class="picinside" style="width: 500px; height: 500px;" src="pic1"><div class="close">X</div></div> 
<div class="box"><img class="picinside" style="width: 500px; height: 500px;" src="pic2"><div class="close">X</div></div> 
<div class="box"><img class="picinside" style="width: 500px; height: 500px;" src="pic3"><div class="close">X</div></div> 
<div class="box"><img class="picinside" style="width: 500px; height: 500px;" src="pic4"><div class="close">X</div></div> 
<a href="#" class="lightbox pic"><img style="width: 200px; height: 200px;" src="pic1thumbnail"></a> 
<a href="#" class="lightbox pic2"><img style="width: 200px; height: 200px;" src="pic2thumbnail"></a> 
<a href="#" class="lightbox pic3"><img style="width: 200px; height: 200px;" src="pic3thumbnail"></a> 
<a href="#" class="lightbox pic4"><img style="width: 200px; height: 200px;" src="pic4thumbnail"></a> 

jquery: 

<script type="text/javascript"> 
$(document).ready(function(){ 

    $('.lightbox').click(function(){ 
     $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); 
     $('.box').animate({'opacity':'1.00'}, 300, 'linear'); 
     $('.backdrop, .box').css('display', 'block'); 
    }); 

    $('.close').click(function(){ 
     close_box(); 
     }); 

    $('.backdrop').click(function(){ 
    close_box(); 
    }); 

}); 

function close_box(){ 
    $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ 
    $('.backdrop, .box').css('display', 'none'); 
    }); 
} 
</script> 

Answer 1

당신은 서로 아닌 하나의 상단에있는 모든 사진을 보여주고있다. 여기

는 클릭 만 이미지를 보여줍니다 코드의 업데이트 버전입니다 : https://jsfiddle.net/khurmtpv/1/

합니다 (jsfiddle보기, 코드 서식은 휴대 전화에서 잘되지 않습니다)

HTML : X X X X

J S : $ (document) .ready (function() { $ ('. 라이트 박스') 클릭하십시오 (function (e) { var $ this = $ (this);

는

 var target = $this.data('target'); 
     $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); 
     $('.box.' + target).animate({'opacity':'1.00'}, 300, 'linear').addClass('active'); 
     $('.backdrop, .box.' + target).css('display', 'block'); 

     e.preventDefault(); 
    }); 
    $('.close, .backdrop').on('click', function(){ 
    $('.backdrop, .active').css({ 
      display: 'none', 
      opacity: 0 
     }).removeClass('.active'); 
    }); 

}); 

그러므로 게재되는 화상 전체 크기를 결정하기 위해 사용, 각 섬네일 링크 데이터 대상을 설정한다.

이 코드는 필자의 휴대 전화에 작성되었으므로 매우 철저하게 테스트하지 않았습니다.

Answer 2

는 테스트하지하지만 네 번째 뜻을 표시하지만, 모두를하지 생각하게한다. 하나 이상의 또 다른 이유는 특정 .box를 가리 키지 않고 모든 것을 가리키고 있기 때문에 마지막 것을 보게되는 이유입니다. 그래서 rel 속성에 의해 예를 들어 .lightbox과 .box 사이의 링크의 어떤 종류를 추가하십시오 :

<div class="box box-1">[...]</div> 
<a href="#" class="lightbox" rel="box-1">[...]</a> 


$('.lightbox').click(function(){ 
    $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); 
    $('.'+$(this).attr('rel')).animate({'opacity':'1.00'}, 300, 'linear'); 
    $('.backdrop, .box').css('display', 'block'); 
});