Skip to content

jQuery ColorBox snippet

For those of you using StartBox this maybe useful to you.

If you enable ColorBox as per the StartBox docs it will allow you to put the CSS class “colorbox” on your images which will then make the image pop-up in a window on the page as per a light box script.

You can see the script in action by click on the ColorBox image on the right.

This is great but wouldn’t it be better if it automatically did it for all images in your post and also grouped them, allowing you to add your images (leaving the link to the image in there which WordPress does by default) and having it all done for you.

This will work with or without StartBox or WordPres but you will need to enable colorbox in your web page. This code will also work with a few changes for other lightbox effect scripts using jQuery but for this purpose I will provide the code for ColorBox.

Here is the code:

jQuery(document).ready(function() {

	//set all images(bmp, gif, jpg, png etc) with links to use colorbox
	var thumbnails = 'a:has(img)[href$=".bmp"],a:has(img)[href$=".gif"],a:has(img)[href$=".jpg"],a:has(img)[href$=".jpeg"],a:has(img)[href$=".png"],a:has(img)[href$=".BMP"],a:has(img)[href$=".GIF"],a:has(img)[href$=".JPG"],a:has(img)[href$=".JPEG"],a:has(img)[href$=".PNG"]';

		jQuery(".colorbox").colorbox({rel:'group1', maxWidth: "90%", maxHeight: "90%", opacity:.6});
	jQuery(".ext").colorbox({iframe:true, innerWidth:"90%", innerHeight:"90%", opacity:.6});


It simply checks for any links that link to the specified image extension and adds the CSS¬†class “colorbox” to the link and then calls the colorbox script to do its magic.

You will need to include this jQuery into your site by either putting it into your header.php in your theme (make sure jQuery is called first) or if you are using StartBox you can put it into a Javascript file and have it enqueued like this example on the StartBox forum additional scripts (You will need to be a member I believe to view the code)

I hope this helps