WordPress Colorbox Plugin


Last updated on March 7, 2015

WP Colorbox plugin enables lightbox functionality on your WordPress blog using Colorbox. It allows you to pop up image, YouTube video, Vimeo video, external page, custom inline content beautifully.

WordPress Colorbox Plugin Installation

  • Login to your WordPress admin dashboard
  • Go to Plugins->Add New
  • Enter WP Colorbox in the search box
  • Once you find the plugin hit the install button

Option 2

  • Download the zip version of the plugin
  • Go to Plugins->Add New and switch to the Upload tab
  • Select the zip file on your computer
  • Upload and install it

Option 3

  • Download the zip file and extract it
  • Connect to your website via FTP (you can use a software like Filezilla to transfer files to your server) and browse to the “/wp-content/plugins” folder
  • Select the folder containing the plugin files on your computer and upload it
  • Once all the files have been uploaded to your web server you can activate the plugin from the Plugins menu (WordPress admin dashboard)

WordPress Colorbox Plugin Usage

You can pop up your media file from either a text or image (it’s called hyperlink in the shortcode) by using a shortcode.

Photo/Image in Lightbox

[wp_colorbox_media url="http://example.com/wp-content/uploads/image/lightbox.jpg" type="image" hyperlink="click here to open image"]

screenshot of image in lightbox using WordPress ColorBox plugin

YouTube Video in Lightbox

[wp_colorbox_media url="http://www.youtube.com/embed/nbp3Ra3Yp74" type="youtube" hyperlink="click here to open youtube video"]

screenshot of YouTube video in lightbox using WordPress ColorBox plugin

Vimeo Video in Lightbox

[wp_colorbox_media url="http://player.vimeo.com/video/1084537" type="vimeo" hyperlink="click here to open vimeo video"]

screenshot of vimeo video in lightbox using WordPress ColorBox plugin

External Page in Lightbox

[wp_colorbox_media url="http://wikipedia.com" type="iframe" hyperlink="click here to open external page"]

screenshot of external page in lightbox using WordPress ColorBox plugin

Inline HTML in Lightbox

[wp_colorbox_media url="#inline_content" type="inline" hyperlink="click here to open inline HTML"]

Now switch to “Text” editor, create a div (The ID needs to match one specified in the url parameter) and enter your HTML content that you want to pop up in lightbox. For example:

screenshot of inline html in lightbox using WordPress ColorBox plugin

When you click the text link your custom HTML content will pop up in lightbox.

screenshot of custom HTML popup in lightbox using WordPress ColorBox plugin

Using Thumbnail as Hyperlink

To trigger lightbox from a thumbnail image you need to specify your thumbnail image URL in the hyperlink parameter. For example:

[wp_colorbox_media url="http://example.com/wp-content/uploads/image/lightbox.jpg" type="image" hyperlink="http://example.com/wp-content/uploads/image/thumbnail.jpg"]

Users who like Colorbox also like Lightbox Ultimate plugin to pop up media in overlay.
About these ads

79 thoughts on “WordPress Colorbox Plugin

  1. Hi!
    First of all, this is a great plugin for wordpress.
    For my homepage i have to create a button link. How can i put the lightbox link into a normal wordpress button from my template.

    Here is my code:
    [price_list title=”Erklärvideo starter” price=”2.990″ currency=”€” type=”normal” button_title=”Anfragen” button_link=”#inline_content” bg_color=”#ffffff” period=”netto”]

    [wp_colorbox_media url=”#inline_content” type=”inline” hyperlink=”KONTAKT” for=”Anfragen”]

    I’d like to pop up the linine_content in the button link of my price_list. Is this possible?
    Thanks :)

  2. Hi there, nice easy to use plug in thank you. Would like to use it direct in the Header, which means not using a shortcode but triggering from the header.php file. Trying various options but having problems with it. Do you have the code for this? Be great if you did :)

  3. i’m new to WP (having used Drupal for 11 years & grown tired of all the work for a simple blog). with D7, i had a number of modules that let me select & upload an image, insert it into a node, and set it to display as a thumb & then be clicked to a lightbox. the big advantage was i didn’t have to enter any paths to my images; that was done by the Insert module.

    it appears that if I want a thumb to be the link to the colorbox, i have to enter the address to the thumb i want to use (eg, /wp-content/uploads/2015/02/image-150×150.png). if i gotta, i will. i’m only entering a few blog posts a week. are there other WP plugins that would work with this plugin (which, btw, produces a very nice lightbox; thanks)?

    t.a.

    • @tabarnhart, Actually there are many other lightbox plugins in the plugin repository. You will just need to browse and see which one can automatically do those stuff for you.

  4. Hello! I *love* this plugin. But I am trying to link to an external html page and the page that I’m linking from is encrypted via SSL. Is there a change that I can make to the plugin to make this work? I tested the plugin using an image found on my site and it worked beautifully. But when I try to use your code for external links — [wp_colorbox_media url=”http://wikipedia.com” type=”iframe” hyperlink=”click here to open external page”] — it doesn’t work. I just get a blank screen. I’m assuming that it’s because the site is secured via SSL because that’s been the problem for all of the ColorBox/Thickbox plugins I’ve tried. I really like this plugin better than any of the other plugins that I’ve tried. I’m really hoping that you can help me get this working. I need to launch the site that I’m working on this week… maybe even as early as tomorrow.

      • Hello, re: “usually all the renowned websites don’t allow you to load their content”, this website is expecting us to load their content. The website that I’m writing about is for a home show and the external link that I’m loading is from the company that creates the booth space reservations. You can see the link that needs to open as a lightbox by visiting this page: https://margare4.arvixevps.com/~cthomeshow/request-exhibitor-space-at-the-ct-home-show/ — scroll to “Step 2, Select a Booth” and click on the link that says “View our available exhibitor booths.” I discovered last night that the link *does* work — on my Mac using OS X Lion, v. 10.7.5 and Safari v. 6.1.6 but it *does not* with Chrome, v. 40.0.2214.111. Chrome tells me that it is up-to-date but the page that needs to load — http://www.expocad.com/host/fx/hbact/15hbact/default.html — does not load in the lightbox. I get a blank lightbox in Chrome. Any fix for this? I really like this plugin a lot.

      • @pagan, I have just tested it on windows chrome (Version 40.0.2214.111 m). It seems to be working fine.

        I do however see some security warnings. I believe that’s because you are loading content via http on a https page.

  5. Hi everyone. Just downloaded the plugin and it seems to work great! I wonder if I can use Color Box to activate a form via shortcode – like a Gravity Form?

    Also, when rendering iframes, can you remove all the space around the page that is shown?

    thanks

  6. Hi! Great plugin! However, I’m having a problem getting my external page to load in an iframe. The page I’m loading is a PHP script and the URL contains an ampersand. The plugin shortcode keeps converting the & in the URL to &, breaking my script. Any suggestion, please?

      • It’s a password-protected site, so you won’t be able to view it. The shortcode should look like:
        [wp_colorbox_media url='#inline_content' type='iframe' url='/datastuff/send_email_to_all.php?memberID=1&syear=2014' hyperlink='Send a message to all students in your classes']
        but it ends up as:
        [wp_colorbox_media url='#inline_content' type='iframe' url='/datastuff/send_email_to_all.php?memberID=1&syear=2014' hyperlink='Send a message to all students in your classes']

  7. Hello and thank you for this great plugin! I’m sure there is something I’m not doing right, but the following from your sample shortcode for the inline HTML option is not working. I’ve added this to a page:

    [wp_colorbox_media url=”#edmimage” type=”inline” hyperlink=”click here”]

    this is my test

    and when I click on the “click here” link, I can see that it makes an attempt to load the lightbox, but it never seems to launch the pop-up window. Can you see anything I’ve done wrong here?

    thank you!

      • sorry! it’s behind our firewall so I won’t be able to send you there. Are there any common problems that newbies make when composing both the shortcode and the ‘div’ section that would result in the contents of the url NOT showing in lightbox?

        Thanks for any ideas!

  8. I understand that I can change the width of an iframe lightbox area by editing the ‘wp-colorbox.js’ file – but is there another way to do it so that I don’t have to remember to change the setting in that file each time I update the plugin?

  9. I Just started using this plugin to put lyrics of a song into the lightbox using the inline type. Is there a way to change the pop-up window size for an inline lightbox?? I have searched through code but can’t seem to find it anywhere. I’m specifically wanting to change the width of the box. Thanks!

  10. Hi there, first, thank you and thanks to your great team (if you got a team), so, i need to know how can i add small thumbnail to every link, because i tried make a photo gallery and the only thing appears is a lot of links… do you can help me? very thank you.
    P.S. Sorry about my english.

    • @Neftaly, There is no gallery option in the plugin at the moment. Which shortcode are you referring to? Please provide a link to the page in question so I can take a look.

      • well, this is a link to the page where i tried to make it, the plugin works, but i look/ask about how can i add a thumbnail for it… i used the code: [wp_colorbox_media url="http://nefftarodas.hostwp.es/wp/wp-content/uploads/2014/12/71.jpg" type="image" hyperlink="Imagen 1"], and when i make click it opens a light box. everything is correct, i just only want to add a small thumb =(

      • @Neftaly, thanks for sharing the shortcode. You just need to specify your thumbnail image URL in the “hyperlink” parameter. For example:

        [wp_colorbox_media url="http://example.com/images/lightbox.jpg" type="image" hyperlink="http://example.com/images/thumb.jpg"]

  11. Can’t seem to get external link to picasaweb slideshow working. Lightbox pops up with no content. If you type in the URL separately, it works fine.
    Test page is: http://dev.aaapetpros.com/cbtest/

  12. Hi,

    I really like your plugin but I’ve ran into an issue that I can’t seem to fix. Whenever I add a Youtube Colorbox, the background becomes black except for the header of my site. This also causes the header to have a higher index value and will appear over the lightbox content causing for a portion of it to be hidden. Can you point me to the correct file to edit so I can change the CSS to maybe change the z-index or something similar?

    Here is my site so you can see the issue: http://agoraenterprises.org

    Just click the Red play button in the header image to show the Youtube video.

      • Someone else mentioned changing the z-index. I’d rather not change a theme’s global z-index. I’d much rather change the z-index of the plugin so it has a much small impact on the overall site. Can you point me to the file (is it in the editor in the wordpress dashboard or will I have the go into ftp) and line or html tag in which I should change the z-index?

  13. Hi,

    i can’t use an caption inside your plugin. What can i do for mantain all images in line and use your plugin? Without caption is impossible to have a perfect line between all the images

  14. Hi! I want to add some css for text in hyperlink, like this:
    [wp_colorbox_media url="#inline_content" type="inline" hyperlink="test"]
    but if i used “id” or “class” in result i see: “Click here”, but i want to see “test” with my css.
    you can help me?

  15. Hi is there a way to have a link to an image and the image that show up have a link to a page?
    I tried the inline but it didnt show anything. Wondering how to do it on my wordpress page.

  16. Hi,
    What a great plugin.
    I just have one question. How can I set the size of an iFrame?
    That is the only thing I miss. With this I wouldn’t need any other “lightbox” plugin.
    Hope there is a solution for this.
    Kind regards

  17. I think this is a brilliant plugin – and thank you. Nice and simple. I’d love to be able to invoke the popup from a button which is already a shortcode element. This seems to make WordPress eat itself – and I’m not really surprised – but if anyone has any good ideas – I’d love to hear them.
    I’d also love to simply control the color and opacity of the overlay that the popup sits on.

  18. Hello,

    Is it possible to embed a web page in a WordPress article or page, not as a popup, but as a normal iFrame using ColorBox?

    Thanks

  19. Hi,
    Thanks for sharing great plugin…

    I just had an error on validation:

    “An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.”

    How do i add an alt attribute to the code?? im using this one

    [wp_colorbox_media url="#inline_contentimg" type="inline" hyperlink="http://web2.proweaverlinks.com/tech/psadvancedengineering/wp-content/themes/psadvancedengineering/images/img-eye.png"]

    Thanks

  20. Hiya! I’m looking for a lightbox that will load automaticly on page load, play a video (probably youtube, but maybe vimeo), then close automaticly to show the regular page… Is this something this plugin can do or do i need to keep looking?

    Thanks

  21. Hello, my theme has a preset ahref string button, which i can only enter the website link between the two inverted commas ” ”

    How do I force that link to open as an external page in lightbox? I cant put the shortcode in that ahref link as it doesnt work….

    Please tell me how I can force it to open that link in a lightbox – between the two ” ” in the ahref string.

    Many Thanks

  22. Hi!
    I’m trying to implement the HTML Content on my website.

    Here’s my code…

    Today is a [wp_colorbox_media url="#inline_content" type="inline" hyperlink="good"] day.

    But when I open the page and click on the link, it pops up an empty box.

    Any Ideas how I can solve this problem?

    Thanks.

    • I have this same problem… Have any idea whats going on?

      The content isnt showing up.

      [wp_colorbox_media url="#inline_content_back" type="inline" hyperlink="http://centerforthro.wpengine.com/wp-content/uploads/2014/05/back-pain-icon.jpg"]

      http://centerforthro.wpengine.com/

      Under our services section > image icons.

  23. Hi, thank you for your reply. The part that was missing was related to em and li tags. Is there any method to add em and li tags in your code? Or is there any other way to add a frame around images or gallery? Thank you.

  24. @Ida, some parts of your last comment were automatically formatted by WordPress. I am not sure why. I had to remove it so the page does not render with broken HTML. Can you please submit it as code?

  25. Hi,
    I would really appreciate if you could please let me know if there is a solution to the problem above. If not I will check something else. Just notice a part from my message is missing. Thank you.

  26. Hi, I just want to thank you for providing this great plugin. I was looking for this kind of plugin for few days. I installed it on my website but I need few other small details to add as well like a frame around the image. I have a css linked to the page where the code is.

    In this example I used your code, but I don’t know where to put the which helps to see the title under the image and a border around the image.
    [wp_colorbox_media url="http://player.vimeo.com/video/id" type="vimeo" hyperlink="http://mywebsite/video_gallery/images/image.jpg"]

    I really appreciate if you can please help with this matter. If you could please provide instructions for both youtube and vimeo.

    Many thanks in advance.

    Kind Regards,
    Ida

  27. Love your plug-in, great work. Is there a way to change the gray border around the contents of the lightbox, and the gray bar across the bottom? The gray border images don’t always seem to line up, and look misaligned much of the time. Thanks!

  28. How can I put image on it instead of “click here to open youtube video”? I want to put an image then after they clicked the image the video will appear. Thanks

    • @ver, you can specify the image url in the hyperlink parameter of the shortcode. For example:

      [wp_colorbox_media url="http://www.youtube.com/embed/nbp3Ra3Yp74" type="youtube" hyperlink="http://example.com/wp-content/uploads/image/thumbnail.jpg"]

  29. hello everybody ! the lightbox is working great thanks ! is there a possibility to open the lightbox by clicking on a button instead of following a link ??

    • Easy, try this ..

      [wp_colorbox_media url="http://your web address.com/htmlFilename.html" type="iframe" hyperlink="Any Link description of your choice"]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s