在URL栏中显示灯箱的每个图片的特定锚点 [英] Showing specific anchors for each pictures of a lightbox in URL bar
问题描述
我有一张灯箱，每张图片都有一个锚点。
但是锚点并没有显示每张图片的具体ID，它在URL栏中显示如下：
- www.mywebsite.com/gallery.php#example/1
- www.mywebsite.com/gallery.php ＃example / 2
- www.mywebsite.com/gallery.php#example/3
所以，我想知道是否可以在网址栏中显示具体的ID： b
$ b
有什么想法？感谢。
Html
< ; ul class =thumbnailsid =my-gallery>
< li class =span2>
< a href =images / full / example-bird.jpgclass =thumbnailid =bird>
< img src =images / thumbs / example-bird.jpg>
< / a>
< / li>
< li class =span2>
< a href =images / full / example-dog.jpgclass =thumbnailid =dog>
< img src =images / thumbs / example-dog.jpg>
< / a>
< / li>
< li class =span2>
< a href =images / full / example-cat.jpgclass =thumbnailid =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
}
}）;
很难提出合适的解决方案， t测试iLightBox。
参考iLightBox网站，您可以使用提供的回调：
iLightBox（{
skin：'dark'，
path：'horizontal'，
fullViewPort：'fill'，'code'$（'＃my-gallery li a' ，
无限：true，
linkId：'example'，
回调：{
onShow：function（api）{
$ （location）.attr（hash，$（api.currentElement）.attr（id））;
}
}，
覆盖： {
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'，
路径：'horizontal'，
fullViewPort：'fill'，
无限：真，
叠加：{
不透明度：1，
blur：false
}，
callback：{
onBeforeLoad：function（api）{
$（location）.attr（hash，$（＃deeplinking_looping_gallery li ）.eq（api.currentItem）.children（a）。data（caption））;
}
}，
controls：{
thumbnail：false
}，
款式：{
nextOffsetX：-45，
prevOffsetX：-45
}
}）;
编辑
<
$（a [data-caption = '+ $（location）.attr（hash）。substr（1）+']）。trigger（click）;
它会触发合适锚点的click事件（就像用鼠标单击一样）。
I have a lightbox where each pictures has an anchor.
But the anchor doesn't show the specific ID for each pictures, it appears like this in the URL bar :
- www.mywebsite.com/gallery.php#example/1
- www.mywebsite.com/gallery.php#example/2
- www.mywebsite.com/gallery.php#example/3
So, I wonder if it's possible to show in the URL bar the specific ID :
- www.mywebsite.com/gallery.php#bird
- www.mywebsite.com/gallery.php#dog
- www.mywebsite.com/gallery.php#cat
Any ideas ? Thanks.
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>
Script
$('#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
}
});
It's difficult to suggest an appropriate solution since I can't test iLightBox.
Referring to the iLightBox website, you could use the callback provided:
$('#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
}
});
I highlighted the lines I inserted. My approach is using the callback for the onShow-event of the iLightBox for changing the Hash with jQuerys $(location).attr("hash","value");.
The problem is that I'm not sure if onShow is the correct event to hook into and if currentElement is in fact the anchor or not. This is something you have to find out yourself. I'm sorry.
Edit
I think if you're doing it my way, you have to remove that linkId from your parameters.
Edit
I tried something on the test page you linked above.
This code works fine for me if I paste it into the console:
$('#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
}
});
Edit
Loading an image at page load should be possible with this line of code:
$("a[data-caption='" + $(location).attr("hash").substr(1) + "']").trigger("click");
It triggers the click event for the appropriate anchor (like if you click it with your mouse).
这篇关于在URL栏中显示灯箱的每个图片的特定锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
