Simple Colorbox
Sorry, but there are better ways to do this now. This project has been deprecated and is no longer in development. This page will be kept online for archival purposes and in case anyone is still interested in the project despite being no longer maintained.
Adds a very simple Colorbox to your linked images. This plugin is intended as an easy to use alternative to other lightbox / Colorbox
alternatives. Unlike most other plugins with similar functionality, this one does not have any settings or requirements whatsoever,
simple install, activate and yer done 🙂
More information can be found on the Simple Colorbox plugin page.
Credits
Thanks to the following (in no particular order) for help with the development of this plugin:
* Milan Dinić – Added extensive upgrade patch for increasing extensibility
* Arnstein Larsen – Motivated me to add slideshow support
* Utkarsh – Assistance with jQuery bug
* Ronalfy – Suggested I use Colorbox
Installation
Download the Simple Colorbox plugin.
Simply install and activate the plugin. No settings necessary.
Advanced users (if you don’t understand this just ignore it)
Fine grained control of how the Colorbox works can be achieved through the use of filters. You can find the filters and associated documentation inside the plugin files. Modifying how the plugin works by usign these filters is for developers only and is not aimed at beginners.
Frequently asked questions
Installation Instructions
Simply install and activate the plugin. No settings necessary.
Advanced users (if you don’t understand this just ignore it)
Fine grained control of how the Colorbox works can be achieved through the use of filters. You can find the filters and associated documentation inside the plugin files. Modifying how the plugin works by usign these filters is for developers only and is not aimed at beginners.
Why should I use this plugin?
If you want an uber simple easy to use (and extensible) Colorbox solution.
Does it work for WordPress version x.x.x?
I only provide support for the latest version of WordPress.
Can I use this with anything but images?
Yes. Anything which you link to with a class of .colorbox should appear in a Colorbox.
How do I add image captions?
Simply add title tags toy our images.
Why did the image captions in the plugin break when updating WordPress?
It didn’t! WordPress altered the way the media uploader handled title tags, which in turn confused users who were attempting to add image captions via the media uploader. The plugin did, does and should keep working with captions into the future.
Changelog
1.6.1
- Support for latest versions of WordPress
1.6
- Upgraded to latest version of Colorbox
1.5.2
- Added global variable to allow for modification of functionality
- Improved some variable names ready for stable release
1.5.1 beta
- Moved inline script to wp_localize_script
1.5 beta
- Upgraded to the latest version of Colorbox
- Added translation support
- Added Bokmål translation
- Replaced the old constants configuration with a more extensible filter system
- Simplified the naming of some methods
- Placed all constant declarations into a single method
1.4 beta
- Added support for .colorbox class
1.3.1
- Returned files which disappeared in version 1.3
1.3
- Instantiated class into variable for easy unhooking of CSS
- Upgraded the plugin documentation
1.2.4
- Added missing files back in
1.2.3
- Added missing files back in
1.2.1
- Minor upgrade
- Corrected grossly incorrect documentation in PHP file
- No need to upgrade if you don’t want to
1.2
- Added support for slideshows
1.1
- Added support for BMP files
- Added support for uppercase file extensions
1.0.1
- Repair of corrupted initial commit
1.0
- Initial plugin release
milad says:
hey ..thank u .. really good optimized plugin.awsome ..thanks
April 23, 2012 at 4:42 am # //
Ryan says:
Glad to hear you like it 🙂
April 25, 2012 at 3:16 pm # //
High Tech says:
thanks for your plugin.but im having a problem. is there any way to show full image height in lightbox ?
April 27, 2012 at 1:18 am # //
Ryan says:
It should already display at full height. if you post a URL of the problem you are experiencing then I’ll take a look at it for you.
April 27, 2012 at 3:14 pm # //
High Tech says:
Thanks for reply.here is my url http://www.pinpersia.com/%D9%87%D9%86%D8%B1-%D8%B9%DA%A9%D8%A7%D8%B3%DB%8C/
image does not show in full size..
April 28, 2012 at 2:07 am # //
Ryan says:
Sorry for the delay in replying. It turns out I had turned off comment notifications without realising.
The ColorBox appears to be displaying at full height for me as in this screenshot:
https://geek.hellyer.kiwi/uploads/colorbox-test1.jpg
How did you expect it to appear?
May 1, 2012 at 10:59 am # //
Tin says:
Thanks for simple colorbox plugin,
I need open a pdf archive in a colorbox, is it possible?, html? like a colorbox examples…
Regards
May 2, 2012 at 6:50 pm # //
Ryan says:
This plugin is intended only for images. You would need to use either another plugin, or a custom plugin to add support for opening PDFs, HTML etc. This plugin is aimed at those who only need it for opening images.
May 9, 2012 at 10:29 am # //
Ams says:
I don’t understand. Your answer to the question “Can this be used with anything but images” is “yes” as long as the .colorbox class is applied. But here you say that it is only for images. Can you please clarify??
January 13, 2016 at 4:38 am # //
Ryan says:
Good point. You can indeed add that class to add support for other things. The plugin is primarily intended for images though, and anything else will require manually adding a class to add support for it.
January 20, 2016 at 5:29 am # //
Curtis says:
Hi,
I love the simplicity of your app but it seems like it only shows one picture at a time. I would have to exit viewing one photo and click on another. Is there anyway to fix this thanks!
May 18, 2012 at 9:26 pm # //
Ryan says:
It doesn’t allow for sliding through multiple images, but it does allow you to use it multiple times on the same page.
June 5, 2012 at 1:52 pm # //
Ryan says:
This seemed like a sensible addition, so I added this functionality for you during the 1.2 release. Enjoy 🙂
July 22, 2012 at 1:57 pm # //
Mike says:
easy to install and use. is there any way to add info/caption to the popout pic?
July 13, 2012 at 12:40 pm # //
Ryan says:
Nope. Sorry. I don’t have any intention of adding that functionality unless someone can think of an unobtrusive seamless way to do it.
July 20, 2012 at 3:22 pm # //
David says:
Love the simplicity of this, but have run into a problem.
It was working fine but without explanation it has changed and now I don’t get the colorbox effect…please see http://tanyalazarou.com/?page_id=107 to see what I mean. The photos now appear at the top of the gallery page.
Can you please help me solve this – I have very limited programming knowledge so need a simple fix.
Thanks,
David.
August 22, 2012 at 7:30 am # //
Ryan says:
Sorry about that! If you try the latest version that problem should be solved. For some bizarre reason all the CSS, JS and image files disappeared from the zip file on WordPress.org but I’m not sure why.
August 22, 2012 at 8:51 am # //
David says:
Thank you very much for your prompt answer – YES, it did fix the problem. Whatever caused that problem is annoying and it also explains why my reload of the plugin from Wordpres.org also failed to work. Anyway, it now works again – thank you so much for your help and this great plugin.
All the best,
David.
August 22, 2012 at 10:33 am # //
Ryan says:
I’m glad to hear you like it 🙂
August 25, 2012 at 9:01 am # //
Renee says:
Hi Ryan…awesome plugin. I had it working for a while and I’ve made changes to the website. I have a gallery thumbnail that opens to a post with an image. I click on the image and the colorbox doesn’t do its magic. Not sure why. Any thoughts. I included the url above. There are 3 corporate thumbnails. Still working on the rest of the galleries. Any help is greatly appreciated.
Thanks,
Renee
October 12, 2012 at 11:01 pm # //
Ryan Hellyer says:
It appears to be working fine now. Perhaps you are confused by having WordPress set to a link your galleries to a post instead of an image? That is setting in the galleries portion of WordPress.
October 13, 2012 at 7:11 am # //
Renee says:
I see that colorbox does work when I click on the image when it’s on the “attachement” page. However, it is not working from the post page. My steps:
1. Go to the Corporate gallery, click on the first thumbnail image in the gallery.
2. The blog post page is displayed.
3. Click on the image. The colorbox doesn’t open, but the the “attachment” page opens. Only from there does colorbox work.
Example two, slightly different flavor:
1. Corporate gallery, second thumbnail (pic looks like a bunch of eggs).
2. The blog post page is displayed.
3. Click on image. Result is that it’s not clickable and colorbox does not display.
I know this is probably something very simple. It’s driving me nuts.
October 13, 2012 at 10:55 am # //
Renee says:
I was re-reading your reply. I need the gallery image to open the blog post so the reader can see the details about the painting. If I don’t set the link for the gallery image to the post, it will only open the image without the details.
I could put the details in the description of the image itself, but I need other thumbnail images (up close shots of the painting) to display with the big picture.
Do you know another way to do this?
October 13, 2012 at 11:04 am # //
Ryan Hellyer says:
I’m confused about what you are trying to achieve. If you want to link to the attachment page, then clicking on that link can not open a Colorbox since it would need to take you to the attachments page. From there you would need to click the image again to get the Colorbox. From what I can see, that is how it is working now.
If you link directly to the image to make the Colorbox open, then you won’t have the attachments page, but that’s what you trying to open it seems.
I think I’m misunderstanding something here. The plugin itself certainly seems to be working just fine on your site.
October 13, 2012 at 12:09 pm # //
Renee says:
Does the colorbox only work with thumbnails or can it work with blog post images that are not thumbnails? I can’t seem to get it to work with the blog post images. I’m pretty good at diving into the code to figure things out, so if it’s a simple code change, I can do it.
October 12, 2012 at 11:37 pm # //
Ryan says:
It works with all linked images regardless of whether they are a gallery or otherwise. If it’s an image being linked to, then it’ll use Colorbox.
October 13, 2012 at 7:12 am # //
Webworksleela says:
Awesome plugin Ryan! Just wanted to say a quick thanks 😀
May 22, 2013 at 1:42 am # //
Ryan says:
Glad to hear you like it 🙂
May 22, 2013 at 11:43 am # //
Webworksleela says:
Ryan, I used the "simple lightbox" plugin until now on a few projects I had, but I tried out yours and was so nicely surprised! Was wondering if there is any possibility to add the theme selector to the theme's function php so if there is an update for the plugin I won't use the selected theme? I don't like to edit the plugins file to acheive the desired result.
May 22, 2013 at 1:46 am # //
Ryan says:
There are instructions on the plugins installation page on how to do that … http://wordpress.org/plugins/simple-colorbox/installation/
Just add the definition to your theme and it will use the other theme automatically.
May 22, 2013 at 11:44 am # //
Nicky says:
Awesome plugin, Ryan.
When I go to the mobile (iPhone) view of the colorbox image, the colorbox info at the bottom (image 1 of 5) overlaps the title.
Is there a way to remove the image counter (only on mobile, if possible, but for all views if that is not possible), so the title will show completely and clearly when viewed on a mobile?
Thank you for any suggestions.
August 9, 2013 at 10:31 pm # //
Ryan says:
Sorry, I’m having trouble trying to understand what you are referring to. Could you post a screenshot to help explain?
Thanks 🙂
August 10, 2013 at 10:10 am # //
Ryan says:
I received the screenshot via email.
This is a problem of the original Colorbox script unfortunately. I’d prefer not to mess with that original code if possible.
I have been contemplating blocking the Colorbox from loading at all on mobile devices. Do you think that would be a suitable solution to your problem?
I’ve never liked how the script works on mobile devices, so avoiding it’s use at all when on mobile seems like a good idea to me. I’m open to suggestions though.
August 10, 2013 at 1:50 pm # //
Nicky says:
That would be a shame to have to disable for mobile.
It would be super great to just remove either the title or the numbers (1 of 5, 2 of 5, 3 of 5, etc.) on just the mobile view.
Possible?
August 18, 2013 at 5:53 pm # //
Ryan Hellyer says:
It’s certainly possible, but I don’t feel it’s something suitable for this plugin. The problem is in the original ColorBox script, not in the plugin, so I think it should be fixed there.
I recommend getting in touch with the ColorBox developer and seeing if he can help fix it.
In the mean time, I am working on a bunch of upgrades to the plugin which involve using the latest version of ColorBox (I didn’t realise it wasn’t using the latest version) and adding translation support, plus some API changes for developers to take advantage of.
August 18, 2013 at 6:17 pm # //
Ryan Hellyer says:
I’ve been discussing this with some other people who have convinced me that it might be worth trying to implement something to fix this. I’m not promising I will have anything ready to fix this soon, but I’ll definitely be giving it some though. I need to work out the best way to do it first.
August 18, 2013 at 10:24 pm # //
Maddie says:
This is wonderful. Thank you!!
August 23, 2013 at 8:29 pm # //
Elke says:
Hi Ryan,
Nice plugin. 1 problem however, I removed an image from the page, but the slider keeps showing the now empty frame. Do you what I can do to remove the empty image from the slider?
Thanks,
Elke
September 19, 2013 at 12:21 pm # //
Ryan Hellyer says:
No idea sorry. I would need to see the problem in action to work this out.
September 19, 2013 at 2:12 pm # //
Ryan Hellyer says:
I received the link via email, but I don’t see anything wrong with the page sorry. Is there a particular link I should be clicking to see the problem?
September 19, 2013 at 5:35 pm # //
Christopher Rose says:
Hi,
Is it possible to have this work on one or maybe two pages only of a site and no others and, if so, how?
October 27, 2013 at 10:49 am # //
Ryan Hellyer says:
Sorry, I missed your message until now.
To have it work on only specific pages, you would need to use a filter. I might write a tutorial up at some point for you and others to work from.
December 8, 2013 at 8:55 am # //
Tamisha says:
Hey,
Love the plugin! Is there a way to configure so my image descriptions will be seen when the slide is activated?
December 8, 2013 at 2:21 am # //
Ryan Hellyer says:
It’s either the alt or title attributes which show up when you open an image I think, so as long as those are set, they should show up as a little image caption.
December 8, 2013 at 8:56 am # //
borisa says:
Hi Rayan,
Let me introduce myself. My name is Borisa Djuraskovic. I am associated with Web Hosting Hub. Your Simplest Colorbox plugin at https://geek.hellyer.kiwi/products/simple-colorbox/ is very interesting. I want to translate it to my native language Serbo-Croatian.
Do you mind if I do so?
Please let me know!!!
Regards,
Borisa Djuraskovic
December 10, 2013 at 12:40 pm # //
Rafael says:
Rayan so nice your plugin but it doesn’t works in my site 🙁
Would u know why?
January 21, 2014 at 2:11 pm # //
Ryan says:
It’s probably a JavaScript conflict of some sort. Try disabling themes one by one. If that doesn’t show where the problem lies, then try changing to one of the default WordPress themes. If it still isn’t working, then there is probably a problem with your WordPress installation.
January 21, 2014 at 2:19 pm # //
Matt says:
Do you have a donate page?
March 11, 2014 at 11:30 pm # //
Ryan Hellyer says:
Yes! All donations greatly appreciated 🙂
https://geek.hellyer.kiwi/donations/
March 12, 2014 at 8:13 am # //
Carlos says:
Hi Ryan!
First of all, thank you very much for your awesome and simple plugin, it did just what I needed! Thanks!
I have just one problem, in my website (http://impresionate.org/), I managed in “Servicios (Services)” section to configure my headings to be links to images but… When I enter in any of them, in the footer says “image 1 of 30” and there are just 6 photos like that.
I’m really new in all wordpress world, so i would really appreciate if you could give me advice about solving this.
Thank you very much again,
Carlos
September 4, 2014 at 10:56 am # //
Ryan Hellyer says:
Glad to hear you like the plugin, although unfortunate to hear it’s not doing what you need it to :/
I think the problem you are experiencing, is caused by you having multiple links to the same images. The Colorbox script is picking up those other links and looping through them.
September 4, 2014 at 2:28 pm # //
HCA says:
Hi Ryan,
Nice simpel plugin.
However, It does not work on my galleries.
I am on WordPress 3.9.2 with woothemes Canvas theme.
Temp url: http://zkagen.dk/traneklit/
Do you have any idea why?
Thanks.
HC
September 5, 2014 at 9:52 am # //
Ryan Hellyer says:
It seems to be working fine now, so I’m guessing you sorted out whatever the problem was.
September 17, 2014 at 10:45 am # //
Gary says:
Hi Thanks for the just-what-I-need plugin. I\’m running Wooslider (Flexslider) inside your Simple Colorbox so I needed to explicitly initialize Wooslider in your complete() function of jquery.colorbox.js.
Can you suggest a better, and separated-out-from-the-core-functionality place to put it? I can fork your code (attributing it to you of course) but was hoping to keep my custom mods separate from the core plugin.
tia
garu
November 6, 2014 at 3:42 am # //
Ryan Hellyer says:
You could unhook the JavaScript within the plugin class and replace it with your own, but I\’d be inclined to just move the functionality into your own plugin. The plugin is quite simple, so I don\’t see a big problem with forking it for your own purposes.
November 6, 2014 at 9:36 am # //
Łukasz says:
Hi. Is it possible to exclude specific images, so that the plugin did not work on them
November 17, 2014 at 9:01 am # //
Ryan Hellyer says:
Not easily. The plugin intentionally forces the Colorbox on all images. Blocking that would require some custom JavaScript to prevent the Colorbox from loading on specific images.
November 18, 2014 at 8:50 am # //
Hatul says:
You should add support for Youtube?
I add to my site script for Youtube:
jQuery(document).ready(function($){
$(\'a[href^=\"https://www.youtube.com\"]\').colorbox({iframe:true, innerWidth:640, innerHeight:390, maxWidth:\'95%\', maxHeight:\'95%\', href:function(){
var videoId = new RegExp(\'[\\\\?&]v=([^&#]*)\').exec(this.href);
if (videoId && videoId[1]) {
return \'https://youtube.com/embed/\'+videoId[1]+\'?rel=0&wmode=transparent&autoplay=1\';
}
}});
});
February 11, 2015 at 12:29 pm # //
Hatul says:
gist with nicer code:
https://gist.github.com/amiad/a4da927be327c781b3d0
February 11, 2015 at 12:32 pm # //
Ryan says:
Thanks for sharing. That is a really interesting idea. I hadn’t thought of adding support for things like that before.
My concern though, is that people have installed the plugin for handling images. And if I suddenly add support for videos as well, that may annoy some people as they may not have intended for videos to displayed in the Colorbox like that.
February 11, 2015 at 2:55 pm # //
Aaron says:
Hi there, it looks like the titles aren\’t coming through as captions under the images in the gallery. I placed text in all four fields, namely alt text, title, caption and description, and none of this text is appearing at all in my gallery popup. I inspected the code in Chrome and noticed that the code where the title would go doesn\’t contain any text: e.g. \”\” Also, the image doesn\’t show the alt attribute. Is there any chance these features could be fixed/included?
February 18, 2015 at 10:08 am # //
Ryan says:
I think that’s just how the Colorbox script works. You would need to contact the Colorbox author to request changes to that.
February 18, 2015 at 10:59 am # //
Aaron says:
Unfortunately some code wasn\’t included in my original comment. Here it is:
The above html is being rendered, but it doesn\’t contain any text. Do I have to contact the authors of Colorbox to get them to ensure image title tags appear here?
February 23, 2015 at 12:26 pm # //
Aaron says:
Ok it looks like i can place html code in my comments.
There is a div with id=\”cboxTitle\” and it contains no data between the div tags. Please visit http://www.abalone.net.au/products/ and see the first image on the page, click on it, and you will see what I mean. In WP, I have set alt and title attributes.
February 23, 2015 at 12:28 pm # //
Ryan says:
I looked into this further. The problem is not with Colorbox, or the plugin, the problem is with your code. To display a caption, you need to insert a title attribute into your link tag.
You currently have the following code.
<a href="http://www.abalone.net.au/wp-content/uploads/2015/02/stubby_nobase-11.jpg"><img class="alignnone wp-image-254 size-medium" title="Stubby Cooler no base." src="http://www.abalone.net.au/wp-content/uploads/2015/02/stubby_nobase-11-300x230.jpg" alt="Stubby Cooler no base." width="300" height="230" /></a>
But when I changed it to the following, it showed a caption:
<a title="Stubby Cooler no base" href="http://www.abalone.net.au/wp-content/uploads/2015/02/stubby_nobase-11.jpg"><img class="alignnone wp-image-254 size-medium" title="Stubby Cooler no base." src="http://www.abalone.net.au/wp-content/uploads/2015/02/stubby_nobase-11-300x230.jpg" alt="Stubby Cooler no base." width="300" height="230" /></a>
February 23, 2015 at 12:36 pm # //
Ryan says:
My memory is coming back to me on this now. WordPress does not add a title attribute to the link. You need to add that yourself manually. Adding a title or alt attribute to the image tag will not add a caption to the Colorbox image.
February 23, 2015 at 12:37 pm # //
webcomkit says:
Hi,
is it possible open image by group in the same page?
example: 3 images in one lighbox and 4 other images in another?
i\’d test with rel=\”lightbox[c1] but not work 🙁
Can you help me please?
April 1, 2015 at 8:43 am # //
Ryan says:
Is that possible with the Color Box script? If it is, I can look at implementing it into the plugin, but if it’s not supported in the script itself, then it won’t be possible in the plugin either.
April 1, 2015 at 1:29 pm # //
Ryan says:
But to answer your question … no, I don’t believe that is currently possible with the plugin.
April 1, 2015 at 1:30 pm # //
Jodie says:
Hello Ryan,
I\’ve uploaded your plugin, activated it, linked an image on my home page, but nothing is happening?
What am I doing wrong?
Thank you in advance
Jodie
July 30, 2015 at 1:32 am # //
Ryan says:
This is impossible for me to know without seeing the problem in action. It is probably caused by a JavaScript problem elsewhere in your site though.
July 30, 2015 at 2:07 pm # //
ruya tabiri says:
thank you so much for plugins 🙂
March 13, 2016 at 6:47 pm # //
Владимир says:
Hello. I have the following problem . I put the plugin . But it opens up an enlarged image not in the same place , and in the middle of the article. How do I change this?
September 21, 2016 at 4:40 pm # //
Ryan says:
I’ll need a lot more information to assist you.
September 21, 2016 at 5:27 pm # //