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 文档 FAQ 选项卡，第 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

类。