How to target a click event using hash value from external link

Question

I've built a image gallery page using the following plugin found from a codrop article:

http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

I've got the gallery working as intended but I would like to add another feature but I'm struggling to figure out and I would really appreciate any help.

Here's a jsfiddle showing a basic version with the open function working:

http://jsfiddle.net/yfmm6q0o/

Using Hash values loaded from external links I would like the page to load and automatically open the preview, depending on the hash value (for example www.page.com#item-2 would open the second item preview).

I was able to set the hash value using:

window.location.hash;

And by using the string replace I was able to add 'loc-' to the hash value and scroll the page to that ID, this worked great but I would like preview section to open as well.

Is there a way to link the hash value to the following function:

function initItemsEvents( $items ) {
    $items.on( 'click', 'span.og-close', function() {
        hidePreview();
        return false;
    } ).children( 'a' ).on( 'click', function(e) {

        var $item = $( this ).parent();
        // check if item already opened
        current === $item.index() ? hidePreview() : showPreview( $item );
        return false;

    } );
}

Meaning if the page loaded with #item-2 hash value it would fire a click event or simulate a click on the second item, opening the preview.

Thanks in advance for any help.

You want .children( 'a' ).on( 'click', function(e) { part to work? — lshettyl
– lshettyl, Commented Mar 24, 2015 at 10:52

Community · Accepted Answer · 2020-06-20 09:12:55Z

I would set it up along these lines:

Working Demo

jQuery:

   $(function() {
         // give all of your elements a class and bind a handler to them
         $('.myBtns').click(function() {
            alert('button ' +$('.myBtns').index($(this))+ ' was clicked using the hash from the url ')
         });
         // get the hash on load 
         var hash = window.location.hash.replace(/^.*?(#|$)/,''); 
          // click one of the elements based on the hash
         if(hash!='')$('.myBtns').eq(hash).click();
        // bind to hashchange if you want to catch changes while on the page, or leave it out
         $(window).bind('hashchange', function(e) {
            var hash = e.target.location.hash.replace(/^.*?(#|$)/,'');
            $('.myBtns').eq(hash).click();
         });
    });

HTML

<h3>Navigate to: <a href="http://dodsoftware.com/sotests/hash/hashTest.html#0">http://dodsoftware.com/sotests/hash/hashTest.html#0</a> to see the first button clicked based on the url hash.</h3>
<h3>Navigate to: <a href="http://dodsoftware.com/sotests/hash/hashTest.html#1">http://dodsoftware.com/sotests/hash/hashTest.html#1</a> to see the first button clicked based on the url hash.</h3>
<h3>Navigate to: <a href="http://dodsoftware.com/sotests/hash/hashTest.html#2">http://dodsoftware.com/sotests/hash/hashTest.html#2</a> to see the second button clicked based on the url hash.</h3>
<h3>Navigate to: <a href="http://dodsoftware.com/sotests/hash/hashTest.html#3">http://dodsoftware.com/sotests/hash/hashTest.html#3</a> to see the second button clicked based on the url hash.</h3>
<input type="button" class="myBtns" value="I get clicked by the url's hash"/>
<input type="button" class="myBtns" value="I get clicked by the url's hash"/>
<input type="button" class="myBtns" value="I get clicked by the url's hash"/>
<input type="button" class="myBtns" value="I get clicked by the url's hash"/>

lshettyl · Accepted Answer · 2015-03-24 11:11:35Z

1

So, you may want to try the following. Please see details as comments in the code.

//Let's say the hash is "#item-2" and always has a >0 number (i.e. #item-1, #item-2 and #item-n) at the end.
var indexFromHash = parseInt("#item-2".split("-").pop(), 10) - 1;
//this would trigger click and invoke
//$items.on( 'click', 'span.og-close', function() { part of your code
$items.eq(indexFromHash).find('span.og-close').trigger("click");
//this would trigger click and invoke
//}).children('a').on('click', function(e) { part of your code
$items.eq(indexFromHash).children('a').trigger("click");

answered Mar 24, 2015 at 11:11

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

1 Comment

JRW Over a year ago

Thanks, just trying it out now, how would I set the indexFromHash as the hash value? I know I need to set it using the window.location.hash; property but I wasn't sure how I would then incorporate that into the var indeFromHash section.

Collectives™ on Stack Overflow

How to target a click event using hash value from external link

2 Answers 2

Working Demo

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related