WordPress Colorbox Plugin

Last updated on by admin

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.

Colorbox is a jQuery lightbox script developed by Jack Moore. This plugin makes this customizable and lightweight lightbox script available for WordPress.

Colorbox Plugin Summary

Plugin Name: WordPress Colorbox Lightbox
Icon of WordPress Colorbox Lightbox
Description: A free WordPress plugin for viewing image, video (YouTube, Vimeo), page, inline HTML, custom content in lightbox. Add jQuery Colorbox lightbox effect to your WordPress site.
Rating: 4.2 based on 18 reviews
Price: 0 USD
Availability: instock

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

In order to enable autoplay on a YouTube video you can add “autoplay=1” to the URL.


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

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"]

Alternate Text for an Image

If you have a thumbnail image as the hyperlink, you might also want to specify an alternate text for it using the alt parameter. This is very useful for SEO. For example:


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

Showing Title in Lightbox

In order to show a title for your media file you need to specify it in the title parameter. For example:


[wp_colorbox_media url="http://example.com/wp-content/uploads/image/lightbox.jpg" title="overlay image" type="text" hyperlink="click here to open image"]
If you like WP Colorbox please leave it a rating. A huge thanks in advance!
Users who like Colorbox also like Lightbox Ultimate plugin.

216 thoughts on “WordPress Colorbox Plugin”

  1. Others have left a similar issue to what I am seeing, but I don’t see a solution in the comments. I have linked to a YouTube video, and when the colorbox window pulls up you very briefly see a loading icon, then nothing but white; it’s almost like the video is blocked or not found.

    The code is added as:
    [wp_colorbox_media url=”https://youtu.be/6_yeUa2M9rI” type=”youtube” hyperlink=”http://www.clientrunner.net/wp-content/uploads/2015/08/Thumbnail-Reets-Drying-Academy.png”]

    What could be causing this?
    See the three images below my rotating header at: http://www.clientrunner.net/?page_id=2984&preview=true

    Reply

      1. wpguide, I apologize for the code/video changes. You were right that they were all YouTube videos as I had to make changes for approval purposes on my end (I didn’t want to wait an entire day for a response before moving forward).

        I do need to figure out why YouTube videos do not play in the window when using Colorbox. I have updated the page to display the middle video using the colorbox (image as the hyperlink rather than a YouTube video in an iframe).
        The code for the middle image is:

        [imageframe lightbox="no" lightbox_image="" style_type="bottomshadow" bordercolor="" bordersize="0px" borderradius="0" stylecolor="" align="none" link="" linktarget="_self" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""][wp_colorbox_media url="https://www.youtube.com/watch?v=YOyrL6kfGB0" type="youtube" hyperlink="http://www.clientrunner.net/wp-content/uploads/2015/08/Thumbnail-Phoenix-Restoration.png"][/imageframe]

        I have wrapped the wp_colorbox within a supported theme element, which shouldn’t impact functionality at all. You can see that I hav elinked the media url to my YouTube video, but my hperlink is a hosted image on WordPress. When previewing the page at http://www.clientrunner.net/home-testimonials-sample/, you see the image (middle), but when the colorbox opens it spins momentarily as if loading and then display blank white.

        My guess is that colorbox is not connecting to the YouTube url properly. I have tried the browser url when the video is open and playing (https://www.youtube.com/watch?v=YOyrL6kfGB0) as well as the ‘share’ url (https://youtu.be/YOyrL6kfGB0), both of which have the same unintended result. Is this an issue with the url?

        Thanks!

        Reply

    2. Try this link for Youtube
      http://www.youtube.com/embed/YOyrL6kfGB0

      and if you want to autoplay just put this behind ?autoplay=1

      So your snip looks like this:
      [wp_colorbox_media url="http://www.youtube.com/embed/YOyrL6kfGB0?autoplay=1" type="youtube" hyperlink="http://www.clientrunner.net/wp-content/uploads/2015/08/Thumbnail-Reets-Drying-Academy.png"]

      But for me i have the Problem that if i klick the link the Video shows up in the box but it still obens in a new tab as well. No idea why. Thats the reason i used this Code:

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

      But in this case i cant use the autoplay funktion because this iframe is still hide in the background untill you klick the Colorbox link.

      Any Solove for my Problem ?

      Reply

  2. Hello. I wanted to ask you a question . It would be possible to use your plugin to open on lightbox a map of google ?

    Thanks for reading me

    Reply

  4. Hello there, I don’t get any text in my colorbox…is working fine. There is a pop-up… on the page with title and all.. BUT NO TEXT?!

    I made a page and in the text editor instead of visual I put: texting aa a ikaiksadsak iasao

    No effects? Would love to get this thing working 😉

    Reply

  5. Hello, this plugin is great … so first of all i want to thank you. But i have a little problem on mobile devices. I used your plugin within wordpress and on desktop screen everthing works fine. But if I open the colorbox on a mobile device, the colorbox floats left and is too small. My website is not responsive, so i think it has something to do with that. Any help would be appreciated. thanks in advance.

    Reply

      1. that was fast 🙂
        [wp_colorbox_media url=”#fenstertype-popup-1fluegel” type=”inline” hyperlink = “”]
        wildundkienle.de/fensterkonfigurator –> go to “Anzahl Flügel und Bauform bestimmen” and then click
        to the images

        Reply

      2. oh, i was wondering why i cant post anything …
        I found a solution that works for me.
        If anyone else runs into the same problem, i changed to in the header.php file

        Reply

  6. Hello,

    a perfect plugin for my site. Is it possible to use a shortcode to show a picture and not the link text but open the popup with th external url.

    I found nothing about this.

    Reply

    1. @Joachim, It’s possible. You just need to specify your thumbnail image URL in the hyperlink parameter. Check the Using Thumbnail as Hyperlink section for details.

      Reply

  8. Hi! I’m trying to use this plugin on a website but can’t seem to get it to work. What the client needs is to have an image that you click that opens up a lightbox window where custom HTML can be displayed. It looks like your Inline HTML in Lightbox would be what I need, except instead of a text link we need the visitor to click on an image to open the lightbox for more info.

    But when I tried to use your code for the Inline HTML in Lightbox, and just change the code so that there’s an image instead of a text link, it wouldn’t open when I clicked it. So then I followed your exact Inline HTML in Lightbox instructions, to test the text link option instead of using an image, but even the text link won’t open to custom HTML in a lightbox. The lightbox won’t open at all. What am I doing wrong and how can I get it to work?

    This was the code I tried first, to see if I could use an image to click, to open a custom HTML lightbox:

    [wp_colorbox_media url="#test" type="inline" hyperlink="http://www.mxcreativeradio.com/wp-content/uploads/2015/12/mx_creative_final-02-302x100.png"]

    My custom HTML content goes hereTEST TEST TEST

    And this was the code I tried second, to see if I could at least get a text link to work:

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

    My custom HTML content goes hereTEST TEST TEST

    Thanks for your help!

    Reply

      1. Thanks for the super fast reply!

        The site we’re working on is in maintenance mode while the new site is being built, so I can’t link to that page or you’ll get a “coming soon” screen instead of the actual page where we’re trying to get the plugin to work.

        Let me see if I can re-create it on a test site and send you a link to that. Stay tuned!

        Reply

        1. @Sherry, It seems the link is not being able to target the div. Even without the plugin it should at least go to the div. So the page URL should change to this:

          http://planetwphosting.com/divi/test-page/#inline_content

          Have you tried switching to a default WordPress theme temporarily (e.g. Twenty 16 or 15)? Do you have any plugin installed that might be causing this issue?

          Reply

  9. Hello, possibly my previous question was overlooked 🙂 Is there a way to reduce the size of the lightbox/popup when opening an external page?

    Reply

    2. I’m interested in almost the same thing. I have an external page that loads inside the colorbox, that I would like the height to adjust according to the content. The page that it loads is a dynamic page that the height can change, but width will always be the same. Any detail on how this is possible to be appreciated.

      Reply

  10. How do I switch these?
    http://wagnerfinancial.com/wp-content/plugins/wp-colorbox/example3/index.html
    http://wagnerfinancial.com/wp-content/plugins/wp-colorbox/example5/index.html

    My current colorbox is example5, i want it to be example3?

    Reply

    1. @shubhamgmath, Open the main plugin file (wp-content/plugins/wp-colorbox/main.php) and search for the following line of code,

      wp_register_style('colorbox', WP_COLORBOX_URL.'/example5/colorbox.css');

      Now change the name of the folder from “example5” to “example3”. For example:

      wp_register_style('colorbox', WP_COLORBOX_URL.'/example3/colorbox.css');

      Reply

  11. Hi,

    I am posting this short code: [wp_colorbox_media url="http://s28.postimg.org/m8f1m5svx/MAPFINAL.png" type="image" hyperlink="11 states"]

    but it shows up as the entire code on my site for customers to see, whereas I only want 11 states to show up.

    Reply

  12. After reading through the comments, I see that a couple of others have asked if this can be made to automatically popup on page load, but I don’t see an answer. I looked over the code to see if I can tweak it to do that, but I’m not so great with jquery. Could you offer a hint as to where or how one might modify the code, just to give me a head start? Any suggestion would be much appreciated.

    Reply

  13. I’m loving the plugin.

    I was wondering if I could place a link within my menu of the page.

    For example, if a link had “Submit a Reservation”… instead of going to the reservation page, then clicking on the link to open the iframe popup link [wp_colorbox_media url="https://www.mydomain.com/secured/reservation/" type="iframe" hyperlink="click here to open external page"] , that it would simply just have the IFrame popup load directly after clicking on the menu bar.

    I hope that makes sense.
    Simply trying to place an Iframe pop up in menu structure.

    Thank you,
    Chris

    Reply

      1. @Chris, Please try this tweak and see how it goes.

        1) Go to Appearance->Menus->Edit Menus->Custom Links.
        2) In the “URL” field enter your page URL. In the “Link Text” field enter your hyperlink text. Now click “Add to Menu”.
        3) At the top of the page there is a “Screen Options”. Click on it and enable “Link Relationship (XFN)” (This property should now appear in the menu).
        4) Edit the newly added link. In the “Link Relationship (XFN)” field enter wp-colorbox-iframe
        5) Save the menu

        Reply

  14. Hi, Is it possible to have a hover image open an iframe? I can make the image open it but I’d like the image to darken upon hover so the user can see it’s a button. Here’s what I have currently:

    [wp_colorbox_media url="http://google.com/" type="iframe" hyperlink="http://simcave.iconic.marketing/wp-content/uploads/2016/01/Party-Ideas-1-copy.jpg"]

    Also, I’d like to open a Pinterest feed in the iframe but it doesn’t pull. Do you know why that would be?

    Thanks!

    Reply

  15. Hi, I think this is exactly what I need for my page but I’m running into a small snag.

    If you look at http://www.brownelltravel.com/cruise-chronicles/crystal-cruises/ you’ll see that I used WP Colorbox under Recommended Voyages for Helsinki Highlights. It works perfectly the first time I click but anytime after that it just displays a small box with no copy inside.

    Any insight?

    Reply

    1. @Brandi, There is a JavaScript error coming from your theme: http://www.brownelltravel.com/wp-content/themes/dataperk/js.js

      Uncaught TypeError: Cannot read property 'id' of null

      Reply

  16. Hi there – I love the plugin, but for some reason the X that one clicks on to close the image file I am popping up moves from the bottom right of the image to the top right when you click on it to close the popup, then when you click on the X in the upper right corner it actually does close the popup.

    I am wondering if you could supply me a bit of code to hide the X completely, and the thick grey bar below it do that they do not show up. As long as one can still click into the dark area around the image to close it, that would work fine for me.

    This is the code I am trying to use (I have my own link in the version I am using, of course):

    [wp_colorbox_media url="http://example.com/wp-content/uploads/images/overlay.jpg" type="image" hyperlink="VIEW A SAMPLE IMAGE"]

    Any help would be most appreciated.

    Reply

    1. Hi there – I forgot to mention – I am using Beaver Builder. You can see the site at the following link temporarily:

      http://goo.gl/pjUq2X

      If you go to the STATIONERY page, you will see some sliders with links that read: VIEW A SAMPLE IMAGE.

      I am using your plugin to make those links show a sample of what the customer will be ordering.

      You should be able to see the issue I am talking about when you try to close the image by clicking on the X.

      Could really use some help hiding the grey bar and the X, or alternatively, fixing the X so it works right. Either works for me, but whichever is easiest for you, if you are willing to help. 🙂

      Reply

  17. Hello again – I could really use some help on that pesky X closer issue. Again, I appreciate any help you can give me on the matter.

    Reply

    1. @Dave, Try this piece of CSS code with this custom CSS plugin: https://wordpress.org/plugins/simple-custom-css/
      #cboxClose{
      display: none !important;
      }

      I didn’t really write the colorbox library. So I’m not sure if this will work.

      Reply

      1. Works like a charm – I used a different CSS plugin that I prefer that comes up in a search for CSS DUo Leaf. It lets you create CSS additions as individual elements that you can toggle on and off as required.

        Thank you soooooo much for getting back to me and helping me with my issue!

        Reply

  18. Hello,

    I’m using the popup to show a contactform7 with a image-link, and works perfectly, with this code:
    [wp_colorbox_media url=".the_content" type="inline" hyperlink="http://my-web/uploads/staff.png"]

    [contact-form-7 id="5602" title="Test Staff contactform"]

    But now i’m trying to put this code in the header.php with a image fixed, and it’s not working, it’s printing the shortcode [wp_colorbox…] directly in text.
    Any suggestion to do it?

    Reply

    1. Hi!
      Just put this class in the tag:

      class = "wp-colorbox-image cboxElement"

      Change the “image” to “inline” and test to see if it works. My case was type = “image”, so theoretically if you make that change it should work.

      My code looks like this:

      <a href="" class="wp-colorbox-image cboxElement"> <img src="" />

      Reply

      1. I solved it by myself adding this code when it’s opened and closed

        //colorbox .start
        $("body").css("overflow", "hidden");
        //colorbox .end
        $("body").css("overflow", "auto");

        Reply

  20. This plugin seems awesome i just have one difficulty though. I need the iframe to pop up on pageload. Is there a way to o this without linking to an href and having to click on the link to open it. Also i d like to make the whole page close and returnt o the previous page when the lighbox modal is closed. Are these two things possible ? if so how?

    Reply

  21. Hi there
    Thank you for the nice Plugin, it works fine and I am happy with it. One thing causes me some difficulties: when I open the lightbox on the iPhone it fills the whole screen, because I use much text. When I try to close the lightbox with the close-button on the bottom of the screen, I can’t do it because the footer-navigationbar of Safari appears an covers the close-button area. So it is not possible to close the lightbox, I have to relaod the page to get back.
    Is there a solution for this – maybe with a padding for the x-button oder placing it on top ot the lightbox?
    Thanks a lot and kind regards
    Johannes

    Reply

  22. Hi!
    First things first. I Really love your plugin!
    I got a little issue, I’m using your plugin and have a button setup to pop-up a html text page.

    The content already is in the page and when you press the button pop-up nicely with the html text in it.
    This works fine with desktop and laptops but not on my mobile device such as my iPhone.

    The code that I’m using is:

    [wp_colorbox_media url="#inline_content" type="inline" hyperlink="MEER PRODUCT INFO" class="x-btn moreinfo"]

    blablabla html content
    Hope you can help.
    Thank you!

    Kind regards,

    Martino

    Reply

          1. @martino, The button link doesn’t seem to work on smaller devices. It just scroll upwards. There is no error in the console either. All I see is this warning:

            Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

            What happens if you temporarily switch to a default WordPress theme (e.g. Twenty 16, 15 or 14)?

          2. Thank you for your response.
            I tested it and it works fine.

            I’m using Theme X. Maybe Visual Composer doesn’t let me activate the action.
            Any ideas how to fix it?
            Thanks

          3. @martino, It’s a theme issue then. I’m not really sure how it can be fixed. All the necessary scripts and the JavaScript codes there (even on smaller devices). May be the theme is including some additional scripts on smaller devices that are causing this conflict.

          4. No problem.
            I’ll try and find a way and when I do. I’ll let you know 😉
            Thanks again for the support!

            Cheers

    1. @MIKE, I think the plugin is not being able to determine the top coordinates of the page on this theme. Do you see the same issue if you temporarily switch to a default WordPress theme (e.g. Twenty 16 or 15)?

      Reply

  26. hey this is awesome but I did not see any way to make it work with soundcloud, I messed around using the you tube formula and the soundcloud api/link found inside the embed code, it works awesome over and over but at times it lags a whole bunch. could you guide me to what could be done or how the shortcode should be written to work. Once again awesome plugin, thanks in advance for any guidance you can throw my way to perfect the soundcloud approach.

    Reply

    1. @David, How are you trying to integrate this with soundcloud? There is no direct integration option with soundcloud at the moment. So you will need to manually insert the embed code into an inline div and pop up in lightbox.

      Please check the “Inline HTML in Lightbox” section for details.

      Reply

  28. I love this plugin, but I’m having one problem: My website has a Getresponse opt in form on the side bar and when the the lightbox opens, the opt in form is covering part of the lightbox. Is this a z-index issue. I’m not that well-versed in css, so not sure what to do here. thanks

    Reply

  29. I am looking to create a custom button within my lightbox that is a mailto link and closes the lightbox when clicked. Can someone guide me to the code to edit to do this?

    Reply

  30. We have successfully installed the plugin and have created a color box on the following page:

    http://www.kailuasailboards.com/about-us/jobs/

    When you click on the link “off season specials through dec 20th” the light box opens. When you try and x out of the window, you are left with a weird black screen.

    Reply

  31. The fact that this plugin isn’t automatically responsive makes it completely useless in 2017. I would give it 0 stars if I could because it is literally useless when 80% of any websites traffic is now on mobile. Absolutely useless.

    Reply

    1. @Andrew, First of all, nobody is forcing you to use my plugin. Feel free to use any other lightbox plugin. And secondly, who said that it’s not responsive? It uses percentage based dimensions and is fully compatible with mobile and tablet devices.

      Reply

  32. Is there any way to make this work within a BUTTON? So far I can only make it work within a text link.

    What would be the code to put into a button short code or button image?

    Thank you!

    Reply

  33. Hello, I use that Plugin for my Disclaimer (Datenschutz) but the Text is too long, can i make the Inline HTML scrollable?

    here is the link: http://wmck.de/#wichtiges

    Reply

  34. Hello,
    can you please help me figure out why does my lightbox is coming out white when was working just few minutes ago ? 😛

    Here is the code: [wp_colorbox_media url="http://adobe.xcerio.co.nz/" type="iframe" hyperlink="START LEARNING"]

    Reply

    1. @Akmon, Please provide a link to the page in question so I can take a closer look. Do you have any other lightbox plugin installed?

      Reply

      1. Nope this is only lightbox plugin. It covers everything that i need so i didn’t require any other plugin.

        Pages as you requested them
        “Start Learning” button

        http://xcerio.co.nz/productivity/
        http://xcerio.co.nz/creativity/

        For some reason its working for me sometimes. It loads page then after you refresh page or wait for a while it doesn’t want to.

        Also i noticed when i used direct link to the html it didn’t use lightbox it was loading in entire browser window so i had to create subdomain for the html files to even load Which doesn’t make sense :S

        Reply

        1. @Akmon, thanks. It seems to be working fine for me. You do have some fancy JavaScript stuff like toggle header, floating menu. So there is a chance it might conflict. But on my end I don’t see any issue.

          Reply

          1. Thank you.
            You can change the dimensions in which the video will appear in Pop.
            Is that there are some players that do not automatically redimension.

  36. hi.. anyone can give me tutorial about make inline content in wp colorbox?
    and is possoble to change the theme of this lightbox?
    and last.. possible to open a image while mouse hoover?

    thanks guys…

    Reply

  37. Good day!

    Thanks for creating this plugin. I have a few issues on mobile devices when opening the internal and external URL. First is the “EPX on Modern Gladiator” and the “Visiting Cuba”. They are both fine in desktop, but when viewed on mobile they are not responsive unlike the “EPX Adventure: Driving Tanks” which is internal link also. URL and the code are posted below. Hope you could help me on this.

    Thanks and more Power!

    CODE:
    [wp_colorbox_media url="https://www.epxworldwide.com/blog/visiting-cuba-trip-back-time-appreciate-future/" type="iframe" hyperlink="https://www.epxworldwide.com/wp-content/uploads/2017/03/press-cuba.jpg"]

    URL:
    https://www.epxworldwide.com/press-test/

    Reply

  39. I’m trying to use this plugin to embed an external page https://www.rebelsafetygear.com/and its not working. I think it may be because it is a secure site?
    Any way around this?

    Reply

  40. I’m trying to use CSS to alter an image link style – and the size options are conflicting, presumably hardwired into the code.
    I’m using this code – class=.btn-bg
    btn-bg {
    width: 100px;
    position: relative;
    opacity: 0.5;
    transition: 0.3s ease;
    cursor: pointer;
    }
    .btn-bg:hover {
    transform: scale(1.5, 1.5);
    /** default is 1, scale it to 1.5 */
    opacity: 1;
    }
    I can’t affect the height and width or zoom

    My test page is www.rikardfjord.com/audio-wall-lightbox

    Is there a way I can override the plugin’s settings to make this work?

    Reply

    1. @Richard, The plugin doesn’t apply any custom CSS to a thumbnail image. You can use the developers console tool in your browser to check if your Custom CSS is getting applied.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *