4

I took a look at this post How to create a direct link to any fancybox box and I managed to implement it. However, I noticed that whenever someone clicks an image, the URL doesn't change. So, basically, all the script does is to allow me to give the link of the image to people. What if people want to catch the image links for themselves and share them? Is it possible to also show the different image urls in the address bar as people navigate the site?

Community
  • 1
  • 1
coldpumpkin
  • 711
  • 4
  • 14
  • 30
  • 1
    Welcome to StackOverflow! Please limit yourself to one question/topic per post. Press "Ask Question" to start a new one instead. This will make it easier for people to review and answer your questions. Thanks! – Greg Sep 07 '12 at 15:49

3 Answers3

9

If I understand correctly:

  • When a visitor clicks on an image, the image pops up in fancybox.
  • When a visitor navigates to page.html#image01, the page loads with image01 already shown in fancybox.
  • You want the url to update to page.html#image02 when a visitor clicks on image02.

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

location.hash  = "image02";

Using your supplied 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');
    }
});
Greg
  • 23,155
  • 11
  • 57
  • 79
  • Hi. That doesn't work first of all because if I insert the ".", dreamweaver tells me there's an error and indeed it causes conflict, because when I open the image, it redirects me to the image itself. Secondly that wouldn't work since the code is for all the images I have inside the page. I'll update this comment with an example page soon. – coldpumpkin Sep 07 '12 at 17:00
  • Hi again. Here's the link for Example #1 (without the location.hash): http://josemelo.net/example/index.html Here's the link for Example #2 (with the location.hash): http://josemelo.net/example/index2.html – coldpumpkin Sep 07 '12 at 17:29
  • @coldpumpkin - You added location.hash as a property to the options object for fancybox. That is not correct. My example `location.hash = "image02";` is a statement. It should be called in an event handler. – Greg Sep 07 '12 at 18:41
  • @coldpumpkin - Also, "image02" should be replaced with an appropriate value. – Greg Sep 07 '12 at 18:44
  • Could you make an example for me please? – coldpumpkin Sep 07 '12 at 18:46
  • Thanks for the update, but it's not working... http://josemelo.net/example/index.html – coldpumpkin Sep 07 '12 at 19:02
  • @coldpumpkin - The correct method depends on what version of fancybox you are using. You should supply that information in your question. I have updated my answer, assuming you are using the code from fancyapps.com – Greg Sep 07 '12 at 20:12
  • Greg I'm using the latest fancybox version, indeed provided by fancyapps.com. The code update still doesn't work. I notice the # popping up when I close the fancybox window, but when the image is opened it doesn't provide any new url. You can check by yourself on my example page. – coldpumpkin Sep 07 '12 at 20:21
  • @coldpumpkin - updated and confirmed working. The trick was `this.element` – Greg Sep 07 '12 at 21:06
  • Thank you so much Greg, it works perfectly! Thanks for your time and patience. I've created another question regarding assigning thumbs to those specific addresses (for social share), just in case you want to check it out http://stackoverflow.com/questions/12325674/assigning-thumb-to-fancyboxs-url-image – coldpumpkin Sep 07 '12 at 21:32
  • Just thought I'd drop in and say that @Greg's answer still works a couple years later with the latest version of fancybox. Thanks! – dotcommer Jan 05 '16 at 07:37
0

I used Greg's code but I used these options instead (and referenced id in a different way because Greg's way wasn't working for me):

    onStart: function(selectedArray, selectedIndex, selectedOpts) { 
        var id = $(selectedArray[ selectedIndex ]).attr('id');

        if (id) {
            window.location.hash = id;
        }
    },
    onClosed: function() {
        window.location.hash = "";
    }
guylabbe.ca
  • 871
  • 2
  • 11
  • 21
0
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);
},
Razvan Cercelaru
  • 628
  • 5
  • 6