Question

我有一个灯箱，每张照片都有一个锚但是锚点并没有显示每张图片的具体ID，它在URL栏中显示如下：

www.mywebsite.com/gallery.php#example/1
www.mywebsite.com/gallery.php#example/2
www.mywebsite.com/gallery.php#example/3

所以，我想知道是否可以在URL栏中显示特定ID：

www.mywebsite.com/gallery.php#bird
www.mywebsite.com/gallery.php#dog
www.mywebsite.com/gallery.php#cat

有什么想法吗？感谢。

HTML 的

 <ul class="thumbnails" id="my-gallery">
        <li class="span2">
          <a href="images/full/example-bird.jpg" class="thumbnail" id="bird">
            <img src="images/thumbs/example-bird.jpg">
          </a>
        </li>
        <li class="span2">
          <a href="images/full/example-dog.jpg" class="thumbnail" id="dog">
            <img src="images/thumbs/example-dog.jpg">
          </a>
        </li>
        <li class="span2">
          <a href="images/full/example-cat.jpg" class="thumbnail" id="cat">
            <img src="images/thumbs/example-cat.jpg">
          </a>
        </li>
 </ul>

脚本

$('#my-gallery li a').iLightBox({
    skin: 'dark',
    path: 'horizontal',
    fullViewPort: 'fill',
    infinite: true,
    linkId: 'example',
    overlay:{
        opacity: 1,
        blur: false
        },
    controls: {
        thumbnail: false
        },
        styles: {
            nextOffsetX: -45,
            prevOffsetX: -45
        }
});

Answer 1

由于我无法测试iLightBox，因此很难提出合适的解决方案。

参考iLightBox网站，您可以使用提供的回调：

$('#my-gallery li a').iLightBox({
    skin: 'dark',
    path: 'horizontal',
    fullViewPort: 'fill',
    infinite: true,
    linkId: 'example',


    callback: {
        onShow:function(api) {
            $(location).attr("hash",$(api.currentElement).attr("id"));
        }
    },


    overlay:{
        opacity: 1,
        blur: false
        },
    controls: {
        thumbnail: false
        },
        styles: {
            nextOffsetX: -45,
            prevOffsetX: -45
        }
});

我突出显示了我插入的行。我的方法是使用iLightBox的onShow事件的回调来用jQuerys $(location).attr("hash","value");更改哈希。

问题是我不确定onShow是否是正确的事件要挂钩，如果currentElement实际上是锚点。这是你必须自己找到的东西。对不起。

修改

我认为如果您按照我的方式进行操作，则必须从参数中删除linkId。

修改

我在上面链接的测试页面上尝试了一些东西。

如果我将它粘贴到控制台中，此代码可以正常使用：

$('#deeplinking_looping_gallery li a').iLightBox({ skin: 'metro-black', path: 'horizontal', fullViewPort: 'fill', infinite: true, overlay: { opacity: 1, blur: false }, callback: { onBeforeLoad:function(api) { $(location).attr("hash",$("#deeplinking_looping_gallery li").eq(api.currentItem).children("a").data("caption")); } }, controls: { thumbnail: false }, styles: { nextOffsetX: -45, prevOffsetX: -45 } });

修改

使用以下代码行可以在页面加载时加载图像：

$("a[data-caption='" + $(location).attr("hash").substr(1) + "']").trigger("click");

它会触发相应锚点的click事件（就像用鼠标单击它一样）。

在URL栏中显示灯箱的每张图片的特定锚点

1 个答案: