저는 사진 갤러리에 대한 링크를 동적으로 만드는 함수가 있습니다. 또한이 기능은 축소판을 클릭하면 div의 배경 이미지로 큰 이미지를 생성합니다. 내가하고 싶은 일은 세 번째 이벤트입니다. 사용자가 div에서 확대 된 이미지를 클릭하면 jQuery Fancybox가 div에 표시되는 이미지의 더 큰 버전을로드합니다. 문제는 내가 사용하고있는 앵커 태그에 대한 링크가 동적으로 생성된다는 것입니다. Fancybox가 DOM을 준비 할 때 HTML을 파싱한다는 것을 알고 있습니다 ... 불행히도 내 함수는 전체 크기 이미지에 앵커 태그를 추가하여 DOM을 변경합니다. . 필요한 도움말은 Fancybox의 옵션을 사용하여 플러그인의 href 속성을 지정하는 것입니다. 너무 오랜 세월 미안하다. 코드는 여기에있다.jQuery의 .live() 메서드에 대한 도움말
jQuery를 :
function gallery(picid, picnum){
var ext = 'jpg';
var fullSize = 'imgs/'+picid+'_full.'+ext;
$('#photolarge').css("background", 'url(imgs/'+picid+'_large.'+ext+') no-repeat');
$('#photolarge a').attr(
{ href: fullSize
//rel: 'lightbox',
}
);
$("#lightboxlink").click(function(){
$('#lightboxlink').fancybox({
'autoDimensions' : false,
'width' : 'auto',
'height' : 'auto',
'href' : fullSize
});
});
return false;
}
HTML 코드 조각
<div id="photolarge">
<a id="lightboxlink" href="#"></a>
</div>
<div id="phototable">
<ul id="photorow1">
<li><a onclick="gallery('bigsun',1)"><img id="sun" src="imgs/bigsun.jpg" /></a></li>
</ul>
</div>
CSS :
#photolarge {
width: 590px;
height: 400px;
margin-left: 7px;
border: 2px solid;
background: none;}
#phototable {
width: 590px;
height: 300px;
border: 2px solid;
margin: 10px 0 0 7px;}
#phototable img {
cursor: pointer;}
#phototable ul {
list-style: none;
display: inline;}
#phototable li {
padding-left: 10px;}
#lightboxlink {
display: block;
height: 100%;
width: 100%;}
이 어떤 도움을 크게 감상 할 수있다!
안녕하세요 기독교 좋은 것입니다,이 시도하고 작동하는지, u는 UR 페이지에 대한 링크를 게시 할 수 있습니까? –
@Avinash 페이지가 아직 게시되지 않았으며 현재 웹 호스트 사이에 있습니다. 내가 할 수있는 뭔가가 있습니까? –
http://jsbin.com에서 코드를 게시하는 것이 가능합니까? http://jsfiddle.com? –