Using jQuery to automatically add class to image links in WordPress database

3 Views

I’m having to switch lightbox scripts because the one I’m using isn’t responsive and the site is moving to a responsive layout. A lot of the site is in WordPress and the script I’m switching to doesn’t have a WordPress plugin. I figure all I really need to do is to use jQuery to insert a class into image links when they link to another image. The rest I can take care of in the header.php file. The amount of Javascript I know can be written on the back of a postage stamp, so I’d be very grateful if someone could please tell me if this will work (or if there’s a better way of doing it)?

If I add

Read More
<script src="http://code.jquery.com/jquery-latest.min.js.js"></script>

to the header plus a link to a .js file containing the following code 

    jQuery(document).ready(function() {

    jQuery("a[href$='jpg'] img, a[href$='JPG'] img, a[href$='jpeg'] img, a[href$='JPEG'] img, a[href$='png'] img, a[href$='PNG'] img, a[href$='gif'] img, a[href$='GIF'] img").parent().addClass("theClass");

});

will it do the job? I don’t have a way of testing this except on the live site so I’d like to get it right first time if possible.

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. You can use this:

    (function($){
    $(function(){
        $('a').filter(function(){
            return this.href && this.href.match(/.(?:jpe?g|gif|bmp|a?png)$/i);
        }).find('img').addClass('the-class');
    });
})(jQuery);

    This will search every link and filter out the ones not pointing to an image, then applies a class to the image (avoid classes with capitals, use dashes -).
    The match is case-insensitive, so, it will match a.JpG as well as a.jpg.
    The file extentions it matches are jpg, jpeg, png, apng, gif and bmp.
    More can be added inside the parenthesis, separated by |.

    If you want to apply to the link the famous class, remove .find('img').

    Now, why am I using this.href && this.href.match() instead of using the selector a[href]?
    This is simply for a performance reason: to lighten the parsing on the selector, so it can use document.getElementsByTagName('a'). The check this.href would be made anyway, but in an earlier stage, but the engine used to match elements would have to work a bit harder.

  2. I don’t think you need to do all that pattern matching. If you want to add a class to any images that are links, try:

    jQuery( document ).ready( function(){
  // Add the class to the image
  jQuery( 'a > img' ).addClass( 'newClass' );
  // or add the class to the link
  jQuery( 'a > img' ).parent().addClass( 'newClass' ); 
} );

    This would only affect images wrapped in a link tag, but wouldn’t affect any other links, PDFs, etc.

    Update

    To target links where the href is an image, you can use something like this (add or change the extensions as needed):

    jQuery( document ).ready( function(){
  jQuery( 'a[href$=".gif"], a[href$=".jpg"], a[href$=".png"]' ).addClass( 'newClass' );
} );