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 documentation 常见问题解答标签，第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。

Fancybox图库

1 个答案: