Correct Syntax for Adding a Class to an Anchor Tag?

[chaseman]

I'm trying to implement the lightbox plugin called Colorbox into my Wordpress theme and I'm having problems with it.

 

You can see a demonstration on this article here.

 

When you click on the images inside the article, then they'll open fine in the lightbox, but when you click on the social media buttons at the bottom (which are images too), then they will open up in the lightbox as well. On top of it when you click on the links inside Internet Explorer they will open up in the lightbox as well, which other browsers don't do.

 

I already came up with a solution for this problem, but I simply don't know the right syntax and would appreciate if somebody could help me with the syntax.

 

The solution is to simply append a class to the anchor tag (only the ones which are wrapped around an image), and then execute colorbox based on that anchor tag.

 

For example (this is just a rough outline)

 

jQuery('.post_content a img').appendTo('a').class('imageLink');

 

And then execute Colorbox:

 

jQuery('.imageLink').colorbox();

 

This will ensure that only the anchor tags wrapped around an image will get a class appended it, and it will ensure that only those will open inside the lightbox.

 

My question is: what would be the correct syntax to achieve this?

 

I hope to hear some suggestions.

 

Thanks.

[chaseman]

I came this close:

 

if (jQuery('.post_content img:has(a)')) {
	jQuery('a').addClass('imageLink');
	} 

jQuery('.imageLink').click(function() {
jQuery(this).colorbox();
});

 

Unfortunately it doesn't work and it will still open the normal hyper links in the lightbox.

[jcanker]

which part isn't working for you, exactly?  Adding the class (does it show up in Firebug?) or starting the colorbox?

[chaseman]

I just edited my post since I noticed it wasn't descriptive enough, and then I saw your post. As said it will still open ANY link in the lightbox. And not JUST the ones wrapped around an img.

[chaseman]

Where exactly in Firebug can I see if the class got added correctly or not?

[chaseman]

This is how I finally solved it:

 

jQuery('.post_content img').parent().addClass('imageLink');

jQuery('.imageLink').colorbox();

 

Write less code, do more.

 

I guess I was just over thinking it again, when it was all so easy.

 

Everything is now working as expected.