Fancybox 이미지 갤러리

Question

나는 iframe의 다음 코드를 가지고 있으며 부모님의 디스플레이를 얻지 만, 이제 fancybox 예제에서 이미지 갤러리와 같은 이미지를 어떻게 만들 수 있는지 알지 못합니다.

은 내가 예를 들어이를 보았다

$(document).ready(function() { 
$('.imagen').click(function(e){ 
e.preventDefault(); 
parent.$.fancybox([ 
{href:'images/01.jpg', title: '01'}, 
{href:'images/02.jpg', title: '02'}, 
{href:'images/03.jpg', title: '03'} 
],{ 
// href: this.href, 
helpers: { 
overlay: {............... 

하지만 난 링크가 동적 될 것 때문에 것을 원하지 않는다. 나는 $(".fancybox") .attr('rel', 'gallery') 같이 사용 무언가를 좋아하고 모든 이미지 갤러리로 다음 버튼을 IMG하지만 난 내가 수정해야 할 무엇을 해달라고 볼 달성하기 위해

<a class="fancybox" rel="gallery" href="Lector.ashx?ImagenId=0" > 

처럼 사용할 수 있습니다.

내 코드 :

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.fancybox').click(function (e) { 
      e.preventDefault(); 
      parent.$.fancybox({ 
       href: this.href, 
       helpers: { 
        title: { type: 'inside' }, 
        overlay: { 
         opacity: 0.3 
        } // overlay 
        //, buttons: {} 
       } // helpers 
      }); // fancybox 
     }); // click 
    }); 
</script> 

몸

<a class="fancybox" href="Lector.ashx?ImagenId=14" > 
    <img alt="" src="../Resources/background.png" width="100" height="100"/> 
</a> 
<a class="fancybox" href="Lector.ashx?ImagenId=6"> 
<img alt="" src="Lector.ashx?ImagenId=6" width="100" height="100"/> 
</a> 
<a class="fancybox" href="Lector.ashx?ImagenId=20"> 
    <img alt="" src="Lector.ashx?ImagenId=6" width="100" height="100"/> 
</a> 

내가 좀 도와주세요 fancybox 2.1.3를 사용하고 있습니다 !!!! 사전

I have to do this? 
    $(document).ready(function() { 
     $('.fancybox').click(function (e) { 
    like i said before at start??? 
    });//click 
    $('.fancybox').attr('rel', 'gallery').fancybox({ 
     JFK code?? 
    }); 
    });// 

Answer 1

에서 덕분에 이러한 링크가있는 경우 :

<a class="fancybox" href="Lector.ashx?ImagenId=14" > 
    <img alt="" src="../Resources/background.png" width="100" height="100"/> 
</a> 
<a class="fancybox" href="Lector.ashx?ImagenId=6"> 
    <img alt="" class="fancybox" src="Lector.ashx?ImagenId=6.jpg" width="100" height="100"/> 
</a> 
<a class="fancybox" href="Lector.ashx?ImagenId=20"> 
    <img alt="" src="Lector.ashx?ImagenId=6.jpg" width="100" height="100"/> 
</a> 

이 ... fancybox 콘텐츠의 type 처리 해야할지하지 않도록 그들 중 어느 것도 이미지 확장자가없는 알 .. type : "image" API 옵션을 사용하여 알려 주어야합니다.

$(document).ready(function(){ 
    $('.fancybox').attr('rel', 'gallery').fancybox({ 
      type : "image", // force type of content to image 
      helpers: { 
       title: { type: 'inside' }, 
       overlay: { 
        opacity: 0.3 
       } // overlay 
      } // helpers 
    }); // fancybox 
}); // ready 

편집 : 귀하의 전체 코드가 같아야합니다 Fancybox documentation자주 묻는 질문을 탭, 제 5 호

을 확인 당신은 또한 (당신의 img 태그에 두 번째 링크를 클래스 fancybox를 설정하는 것으로 나타났습니다 위의 코드에서)

<img alt="" class="fancybox" .... 

... 예기치 않은 결과가있을 수 있습니다. 거기에서 그것을 제거하십시오. <a> 태그에만 fancybox 클래스가 있어야합니다.