One drawback to my recent example of a CSS3 animated gallery with persistent images is that the technique used anchor tags referenced from a URL. This works perfectly well when the user is directed to the page via a URL that contains an anchor identifier, as in the link I’ve used in the previous sentence:

<a href=/643/Animated-Gallery-With-Persistent-Images#aussie>the recent example… </a>

… but it becomes an issue if the visitor follows a link to the page that does not contain a hash, such as URLs listed at Google or other sources. In that case, the gallery will not have any anchor information to work from, and thus not present a large image by default.

To solve this problem, we can employ a simple, single line of JavaScript in the head section of the gallery page:

if (!window.location.hash) { window.location.hash = "aussie"; }

Very simply, this code checks for the presence of an anchor in the current URL: if an anchor is not found, JavaScript inserts one itself. This anchor will then be read by the CSS in the gallery page, which will present the image with the matching id.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.