Question

I’ve the following link:

<a href="#HDR" onClick="showGallery()">I</a>

And this use the following javascript:

function showGallery(){
    if(window.location.hash) {
      $('#gallery').fadeIn('fast');
      var hash = window.location.hash.substring(1);
      alert(hash);
    } else {

    }

}

So it only show the gallery when in the URL is a hashtag. But when i click on the link, nothing happens. When i click it twice, the gallery fade in.

So the link first make the javascript, and i doesn’t work ’cause there is no hashtag in the URL and after that, it perform the href and insert the Hashtag in the URL.
How can i do that?

My Target:

When i click on a link, it open a gallery. To know which gallery i must open, i insert in the URL a Hashtag. Here i want to display the HDR album. And i also want, if my site get opend with a hashtag, it should display the gallery.!

Is there also a another, easier or cleaner way to make it?
Hope you understand what i want.

Answer 1

For modern browsers, you can bind your Javascript code to the onhashchange event. Links will be without Javascript:

<a href="#HDR">I</a>

And the Javascript is run whenever the hash has changed:

function locationHashChanged() {
    if (location.hash === "#HDR") {
        $('#gallery').fadeIn('fast');
    }
}

window.onhashchange = locationHashChanged;