How to dynamically add an active state with jQuery to a gallery thumbnail

Question

I'm using galleriffic to handle my image gallery and I'm having a problem with the thumbnail active states.

Galleriffic doesn't have support for active states on the images - only the list items. Right now the gallery will assign a "selected" class to the current LI containing the thumbnail and I've been trying to use jQuery to target the thumbnail ID within the active LI so I assign an active state to the image and then return it to the default state.

Essentially I'm doing:

$('.selected img#myImage').attr('src', 'path_to_active_state.jpg');

Which works, however, I can't get the image to go back to the default afterward. I don't think there's jQuery support for using hasClass in an if statement, but if someone knows please help out. Any advice is welcomed.

Answer 1

Could you try the :not selector? You're currently doing this to get the selected image:

$('.selected img#myImage').attr('src', 'path_to_active_state.jpg');

Try doing this to get the unselected image:

$(':not(.selected) img#myImage').attr('src', 'path_to_active_state.jpg');

Answer 2

You could add a class to the active image, so that you can identify it later..

so

$('.selected img#myImage').attr('src', 'path_to_active_state.jpg').addClass('altered');

and when highlighting another thumbnail

$('.altered').attr('src', 'path_to_inactive_state.jpg').removeClass('altered');

also in your example $('.selected img#myImage') seems to imply that you use the same id for all thumbnails (#myImage). Id's should be unique inside the DOM..