I ran into a problem recently. I wanted to have links to images be “lightboxed,” but I also wanted to blog in Markdown and not have to write out link tags with “rel” attributes for every image link. There are several existing plugins for Wordpress that will do this automatically, but I’ve been sticking with the jQuery Lightbox plugin, which handles Wordpress galleries in this manner, but requires the “rel=lightbox” attribute to handle single image links.
The extra jQuery to run the lightbox effect on every link whose target ends with “jpg” is very simple:
It selects any link whose href value ends with ‘jpg’. I added a
.not() selector to exclude the Wordpress gallery links that the plugin already does a nice job of handling and turning into navigable lightbox galleries. This little bit of code will work with any flavor of the jQuery Lightbox plugin that uses “lightbox()” as its main function. Next I put this snippet into my js file, in the function that executes when the document is ready:
The “$” inside of the function’s parameters (
function($)) lets us use the standard jQuery “$” inside of the function, instead of the no-conflict “jQuery.” Just a convenience, but if you don’t do this, and you have the default jQuery library loaded in Wordpress, you’ll need to replace all of the “$” in the original snippet with “jQuery” to get it to work.
That did the trick, and any JPEG image I link to directly now gets the lightbox treatment. I haven’t run into any conflicts yet, but I’ll keep my eyes peeled and refine the selector if I need to.