javascript - Showing specific anchors for each pictures of a lightbox in URL bar

Question

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
        }
});

Answer 1

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).