Question

I’ve just set-up my site to use a CDN, which has all gone according to plan, and mostly works as intended – all with the exception of colorbox, which I’m using for images.

I’ve got a feeling that it is no longer working because all the images have a query string on the end of them (such as image.png?9d7bd4), which is breaking my jQuery selector:

/* colorbox - use it on all links to images */
$('a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"]').colorbox({
    'rel': 'images',
    'photo': true,
    'maxWidth': '90%',
    'maxHeight': '90%'
});

Can someone help me rewrite the jQuery code to make it work? Thank you.

Answer 1

What you’re using is the ends with selector. You want to change it to “contains”.

/* colorbox - use it on all links to images */
$('a[href*=".jpg"],a[href*=".jpeg"],a[href*=".png"],a[href*=".gif"]').colorbox({
    'rel': 'images',
    'photo': true,
    'maxWidth': '90%',
    'maxHeight': '90%'
});

More info on attribute selectors: https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors

If possible however, you could add a class to the images to make selecting them easier.