"Direct link to any fancybox", but with a URL in the address bar

Question

I looked at this post How to create a direct link to any fancybox field , and I managed to implement it. However, I noticed that whenever someone clicks on an image, the URL does not change. Thus, in principle, the whole script is to give me a link to the image to people. What if people want to catch image links for themselves and share them? Is it also possible to show different image URLs in the address bar when people navigate the site?

Answer 1

If I understand correctly:

• When a visitor clicks on an image, the image appears in the fancybox.
• When a visitor goes to the .html # image01 page, the page loads with the image already shown in fancybox.
• You want the url to be updated to page.html # image02 when the visitor clicks on image02.

In this case, you can set the url hash fragment when the image is clicked.

location.hash = "image02"; 

Using the attached example:

 var thisHash = window.location.hash; $(document).ready(function() { $('.thumbs').fancybox({ prevEffect: 'fade', nextEffect: 'fade', closeBtn: true, arrows: true, nextClick: true, padding: 15, helpers: { thumbs: { width: 80, height: 80 } }, beforeShow: function() { var id = this.element.attr("id") if (id) { window.location.hash = id; } }, beforeClose: function() { window.location.hash = ""; } }); if (thisHash) { $(thisHash).trigger('click'); } }); 

Answer 2

I used the Greg code, but instead used these options (and referenced id differently because the Greg method didn’t work for me):

  onStart: function(selectedArray, selectedIndex, selectedOpts) { var id = $(selectedArray[ selectedIndex ]).attr('id'); if (id) { window.location.hash = id; } }, onClosed: function() { window.location.hash = ""; } 

Answer 3

  beforeShow: function () {
     var id = $ (this.element) .attr ("href");

     if (id) {
         window.location.hash = id;
     }
 },
 afterClose: function () {
     history.pushState ("", document.title, window.location.pathname + window.location.search);
 },