The page in question is located at http://www.sandbarmedia.com/clients/va/gallery/. Basically, I'm trying to use jQuery to intercept a click on one of the photos in the mosaic so that it jumps to the corresponding picture in the gallery below. The bottom gallery will be hidden once all of this works, and the end effect should be that clicking on a mosaic photo jumps the user into the appropriate place in the lightbox photostream.

I currently have some code that works with a text link (the "test" link below the mosaic), but when I try to apply the code to one of the mosaic photos, it doesn't work. I've inserted this little bit below the rest of the content in the page:

<script type="text/javascript">
$("a[href$='1GBanquette2.jpg']").click(function() {
    return false;

The intent was to capture clicks on links that contain the filename of the first image in the mosaic and to activate a click on an image in the gallery. I assume that the shortcode is loading after the jQuery somehow, but I'm not sure if that's the problem, and if it is how I'd fix it.

I'd really like to be able to keep this code inside of the Wordpress page editor so that it would be user-updateable without having to dig around in a file structure, but I understand if that's not possible. Thanks in advance!

  • you should first fix your theme to not embed two different versions of jQuery. this is otherwise probably a question for a different stackexchange, as it's a javascript question and not WordPress-specific. – Milo Sep 18 '13 at 20:12
  • OK, I've commented out one of the jQuery includes. It's a Wordpress shortcode that's generating the gallery, so I'd argue that it's not Wordpress-specific. – Matthew Warren Sep 18 '13 at 20:25
  • it happens in the context of WordPress, but if your problem and solution is javascript, it's not a WordPress problem. I'll guess that the gallery is built on the document ready event and you're trying to target an element that doesn't yet exist when your own code runs. – Milo Sep 18 '13 at 20:48

Figured it out. I disabled links in the PhotoMosaic shortcode, then used $(window).load to detect clicks on the images and redirect accordingly. I then used CSS to change the cursor and add an opacity change on mouseover to imitate a link so the users know that they can click on the images.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.