在网址栏中显示每个灯箱图片的特定锚点

Question

我有一个灯箱，每个图片都有一个锚点。
但是锚点没有显示每张图片的特定ID，它在网址栏中显示为：

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

因此，我想知道是否可以在网址栏中显示特定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-event回调，以使用jQuerys $(location).attr("hash","value");更改哈希$(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事件（就像您用鼠标单击它一样）。