WordPress Colorbox Plugin: A Colorbox Lightbox Plugin for WordPress

WordPress Colorbox plugin enables lightbox functionality on your WordPress blog using Colorbox. It allows you to pop up an image, YouTube video, Vimeo video, external page or 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.

WordPress Colorbox Lightbox Info

Plugin Name: WordPress Colorbox Lightbox
Version: 1.1.2
File Format: application/zip
Requires: WordPress 5.2
Rating: 4.3 based on 22 votes
See All Ratings/Submit Your Rating Here
Price: 0 USD

Requirements

  1. A self-hosted WordPress site running on a WordPress Optimized Environment.
  2. Support for the WordPress shortcode API.

WordPress Colorbox Plugin Demo

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

Disclosure: This page may contain affiliate links. If you follow one of those affiliate links and purchase something it will provide me with a little bit of a commission. This costs you nothing extra but helps maintain my site, free plugins, and themes. So I thank you for your support.

284 thoughts on “WordPress Colorbox Plugin: A Colorbox Lightbox Plugin for WordPress”

  1. 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
    • @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
  2. 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
    • @hannah, Unfortuntely It’s not possible at the moment.

      Reply
  3. 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
  4. 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
    • @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
      • 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
        • @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
  5. My only problem is how to set the HEIGHT and WIDTH of the lightbox.

    Reply
    • @Marko, Unfortunately it can only be customised in the code at the moment.

      Reply
      • In which part of the code can you change the width and height?

        Reply
        • @Fracisco, You will need to edit the “wp-colorbox.js” file. It’s in the root directory of the plugin.

          Reply
          • 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.

  6. 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
  7. 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
  8. Thanks

    Reply
  9. 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
    • @iKm, For security reasons many websites don’t allow external embed via iframe.

      Reply
  10. 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
    • @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
  11. Hi,
    how can I change background opacity?
    Thank you for help!
    TC

    Reply
    • @Thomas, You should be able to do this with CSS. Please provide a link to the page in question so I can check it.

      Reply
  12. Hello

    I am sorry I am just totally new to this I just want that the hyperlink is a button not a word?
    So what code should I write for it and where to be like a button not just a single word.

    Thank you

    Reply
    • @Valentin, The plugin only supports text/image link at the moment. Can you use an image for your button or does it have to be an HTML button element?

      Reply
  13. Wp Colorbox does not work on Chrome, see page: mordialloccollegealumni.org/live/faq/ – find a link: “existing collection of digital images, historic and contemporary photographs and documents, videos, and other paraphernalia”

    Actually it works, Chrome opens colorbox but then suddenly redirects to external image URL instead of keeping it inside colorbox .. Some kind of redirect is happening.

    Any idea what is happening? Works on Firefox..

    Reply
    • @admin Any guidance on this issue?

      Thanks

      Reply
  14. I have the plugin installed on one site and it works perfectly. I’m redoing the site using Divi and it doesn’t work. Nothing happens when I click on the link. I copied the code exactly the same from the site it works on. Can you help?

    CODE:
    Includes: Audit Representation, Auditing Fees, Bookkeeping, and [wp_colorbox_media url="#inline_content" type="inline" hyperlink="more"]

    Accounting Fees includes:
    Audit Representation
    Tax Return Preparation Fees

    PAGE IT DOESN’T WORK ON:
    http://test.deductornot.com/library/accounting-fees/

    Reply
    • @Donna, I’m not sure what’s happening here. But the browser doesn’t move to the #inline_content div when clicked. Have you been able to pop up any other content like an image, YouTube video or Vimeo video?

      Reply
      • Good question! I just added an image and the image works (but the text still does not) http://test.deductornot.com/library/accounting-fees/

        Reply
        • Hello, I contacted my theme (divi) about this issue and here’s their response: “the issue is that, most likely, the colorbox isn’t initialized with that anchor link but only with the class ‘.wp-colorbox-image’. I’d suggest contacting the developer of that plugin for further assistance and, perhaps they can provide the code to use and initialize the colorbox lightbox for the #inline-content as well”

          Is this something that you can help me with. Your plugin is exactly what I need and I really want to continue using it. Thanks!

          Reply
  15. Hi,
    Thanks for the plugin. Really great.
    I have a question though; I use colorbox to show video’s on my website. I’dd rather not have visitors downloading the files by either clicking the download button or right-clicking on “save video as”
    Is there a way of doing this?

    Thanks a lot!
    Kind regards, Wart Wamsteker

    Reply
  16. Hello,
    I am wondering if it is possible to group related images with this plugin.
    Thanks!
    Mary Ann

    Reply
    • @Mary, Do you mean a gallery option in lightbox?

      Reply
  17. Hi I am working on this site: theflowermonger.com

    I’m trying to us the colorbox lightbox on the “radius” link at the bottom to bring up a map image in a lightbox, but it keeps leaving the page and linking directly to the image file. Can you tell me what I’m doing wrong?

    Reply
    • @Kristen, Are you dynamically loading content? What happens if you switch to a default WordPress theme (e.g. Twenty 17, 16 or 15).

      Reply
      • Ah, it does work on Twenty 15 – so it is an issue with the theme I’m using? Any custom CSS that can be used to fix it?

        Reply
        • @Kristen, I don’t think CSS has anything to do with it. I think some content is getting loaded dynamically. That’s why the colorbox JavaScript file is not being able to bind lightbox event to that link.

          Reply
  18. Refused to display ‘https://**’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’. What’s the resolution for this?

    Reply
    • @dim, It means that website doesn’t let you embed its documents in iframe outside the domain. Unfortunately, there is no way to fix this on your end unless the website in question allows iframe embedding outside its domain.

      Reply
  19. The lightbox will not work after ajax load? is there any workaround for this?

    Reply
  20. Hi, we switched our website ottomuehle.de to https:, however, on sites using colorbox (and we love it!), the lock sign in the address section of our browser (Chrome 66) disappears.

    Inserting manually “https:” in each of the colorbox commands, the lock sign remains.

    This is strange, because many other links in our webcode include http:, without causing the browser to indicate an insecure connection.

    Is there any way to make the connection secure without changing all the colorbox links manually to https:?

    Your opinion would be highly appreciated!

    Regards
    Yorck

    Reply
    • @Yorck, You can try a “search and replace” type plugin that will change all links to https.

      Reply

Leave a Comment