A Colorbox/Lightbox plugin for WordPress.
When adding an image to a post or page, usually a thumbnail is inserted and linked to the image in original size.
All images in posts and pages can be displayed in a Lightbox/colorbox when the thumbnail is clicked.
Images are grouped as galleries when linked in the same post or page. Groups can be displayed in a slideshow within the Lightbox/colorbox.
Individual images can be excluded by adding a special CSS class.
jQuery Colorbox can also open linked content (external as well as inline) in a Lightbox/Colorbox.
Go to the plugin page for demo pages.
ar) by Modar Soos
be_BY) Marcis G.
bs_BA) by Vedran Jurincic
bg_BG) by Nikolay Zaynelov
cs_CZ) by David Weis
Simplified Chinese (
zh_CN) by Lucas Ho
da_DK) by Michael Bering Petersen
nl_NL) by Richard van Laak
en_EN) by Arne Franken
fi) by Lauri Merisaari
fr_FR) by Pierre Sudarovich
de_DE) by Arne Franken
he_IL) by Tommy Gordon
it_IT) by Marco Chiesi
lv) by Uldis Jansons
ms_MY) by Saha-ini Ahmad Safian
pl_PL) by Kornel Łysikowski
pt_BR) by Gervásio Antônio
ro_RO) by Luke Tyler
ru_RU) by Arkadiy Florinskiy
sk_SK) by B. Radenovich
es_ES) by Inma P.-Zubizarreta
sv_SE) by Christian
tr_TR) by Serhat Yolaçan
uk) by Jurko Chervony
vn_VN) by Techfacts
Is your native language missing?
Translating the plugin is easy if you understand english and are fluent in another language.
I described in the FAQ how the translation works.
Upgrading From A Previous Version
To upgrade from a previous version of this plugin, use the built in update feature of WordPress or copy the files on top of the current installation.
Installing The Plugin
Either use the built in plugin installation feature of WordPress, or extract all files from the ZIP file, making sure to keep the file structure intact, and then upload it to
Then just visit your admin area and activate the plugin.
Configuring The Plugin
Go to the settings page and choose one of the themes bundled with the plugin and other settings.
Do not forget to activate auto Colorbox if you want the Lightbox/Colorbox to work for all images.
I installed your plugin, but when I click on a thumbnail, the original picture is loaded directly instead of in the Colorbox. What could be the problem?
Make sure that your theme uses the
wp_head(); function in the HTML head-tag.
I have seen problems where other plugins include their own versions of the jQuery library my plugin uses.
Chances are that the other jQuery library is loaded after the one that I load. If that happens, the colorbox features are overwritten.
How does jQuery Colorbox work?
When inserting a picture, the field “Link URL” needs to contain the link to the full-sized image. (press the button “Link to Image” below the field)
When rendering the blog, a special CSS class (
colorbox-123) is added to linked images.
How do I exclude an image from Colorbox in a page or post?
Add the CSS class
colorbox-off to the image or to the link to the big sized image you want to exclude.
jQuery Colorbox does not add the colorbox effect to images that have the CSS class
How does jQuery Colorbox group images?
For all images in a post or page, the same CSS class is added. All images with the same CSS class are grouped.
I have Flash (e.g. Youtube videos) embedded on my website. Why do they show up over the layer when I click on an image?
This is a Flash issue, but relatively easy to solve. Just activate the automatic hiding of embedded flash objects on the settings page.
Adobe described on these sites what the problem is and how to fix it manually:
Adobe Knowledgebase 1
Adobe Knowledgebase 2
I have a problem with the Colorbox or want to style it my own way. Can you help?
Of course I want to help everyone, but I have a full time job and I don’t have the time. You can ask your questions at the Colorbox Google group.
Why is jQuery Colorbox not available in my language?
I speak German and English fluently, but unfortunately no other language well enough to do a translation.
Would you like to help? Translating the plugin is easy if you understand English and are fluent in another language.
How do I translate jQuery Colorbox?
Take a look at the WordPress site and identify your language code:
e.g. the language code for German is
download jQuery Colorbox (from your FTP server or from WordPress.org)
copy the file
localization/jquery-colorbox-en_EN.po and rename it. (in this case
open the file with POEdit.
translate all strings. Things like
%1$s mean that a value will be inserted later.
The string that says “English translation by Arne …”, this is where you put your name, website (or email) and your language in. 😉
(optional) Go to POEdit -> Catalog -> Settings and enter your name, email, language code etc
Save the file. Now you will see two files,
Upload your files to your FTP server into the jQuery Colorbox directory (usually
When you are sure that all translations are working correctly, send the po-file to me and I will put it into the next jQuery Colorbox version.
My question isn’t answered here. What do I do now?
Feel free to open a thread at the jQuery Colorbox WordPress.org forum.
I’ll include new FAQs in newer versions.