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')和使用它像

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

实现看到与下一个按钮作为图像库的img，但我不我有什么修改。

我的代码：

<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选项来告诉它。检查Fancybox documentationFAQ选项卡，第5号

你完整的代码应该是这样的：

$(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在img标签（第二个链接在你的代码上面）如：

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

...这可能会有意想不到的结果，所以下注从那里删除它。只有<a>标签应具有类别fancybox。