Triggering a click event based on browser # link
<p>I currently have a gallery of thumbnails which when clicked animates a modal window and loads in content via ajax. I have used 'window.location.hash' to create a unique url for the content that is loaded into my modal.</p>

<pre><code>var base_url = "http://www.ddbremedy.co.uk/siteupdate/";

$('#work_gallery li a').on('click', function(event) {

    event.preventDefault();
    postLink = $(this).attr('href');
    window.location.hash = postLink.replace(base_url, "");
});
</code></pre>

<p>The modal then animates in and the content loads via ajax. Then when I close the modal I add this code to remove the hash and url suffix that was added when the ajax page was loaded.</p>

<pre><code>if ("pushState" in history) {
    history.pushState("", document.title, window.location.pathname);
} else {
    window.location.hash = "";
}
</code></pre>

<p>This all works fine, but what I need is to be able to take the ajax link that was generated and when pasted into a new window, automatically trigger a click event on the correct thumbnail to load the correct content. I know can basically detect if there is a hash and particular word in the url like this:</p>

<pre><code>var pathname = window.location.hash;
if (pathname.indexOf("work") &gt;= 0) {
    // trigger click event on correct thumbnail to launch modal   
}
</code></pre>

<p>I know i need to probably trigger a click event like this:</p>

<pre><code>$('#work_gallery li a').trigger('click');
</code></pre>

<p>but I can't figure out how to apply it to the correct thumbnail based on the url of the ajax content.  The modal itself is done using jquery, without any plug-ins and I also need to keep it that way. Any help would be greatly appreciated.</p>

<p>Many thanks in advance.</p>
