1

我在 iframe 中有下一个代码，并且我实现了它在父级中显示，但现在我不知道如何将图像（如图片库示例中的图片库）分组。

我在一个例子中看到了这一点：

    $(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??
     });
    });//
4

1 回答 1

0

如果您有这些链接：

<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 文档 常见问题选项卡，第 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>标签应该有 class fancybox。

于 2012-12-08T20:37:25.827 回答