2010-08-06 3 views
1

저는 사진 갤러리에 대한 링크를 동적으로 만드는 함수가 있습니다. 또한이 기능은 축소판을 클릭하면 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%;} 

이 어떤 도움을 크게 감상 할 수있다!

+0

안녕하세요 기독교 좋은 것입니다,이 시도하고 작동하는지, u는 UR 페이지에 대한 링크를 게시 할 수 있습니까? –

+0

@Avinash 페이지가 아직 게시되지 않았으며 현재 웹 호스트 사이에 있습니다. 내가 할 수있는 뭔가가 있습니까? –

+0

http://jsbin.com에서 코드를 게시하는 것이 가능합니까? http://jsfiddle.com? –

답변

0

이것은 단지 멋진 상자 비트는하지만, 코드의 나머지 부분은

$("#lightboxlink").live('click', function(){ 

    $.fancybox({ 
     'autoDimensions' : false, 
     'width'   : 'auto', 
     'height'   : 'auto', 
     'href'   : $(this).attr('href') 
    }); 
    return false; 
}); 
관련 문제