WordPress Colorbox Plugin

Last updated on by admin

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.


Do you know that you can get 50% OFF WordPress hosting here only for today? Hurry now before this offer ends!
Users who like this plugin also like Lightbox Ultimate to pop up content in lightbox.

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 4.9
Rating: 4.2 based on 21 votes
See All Ratings/Submit Your Rating Here
Price: 0 USD

Requirements

  1. A self-hosted WordPress site running on a WordPress optimized environment like Bluehost.
  2. Support for the WordPress shortcode API.

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

Users who like this plugin also like Lightbox Ultimate to pop up content in lightbox.
Do you know that you can get 50% OFF WordPress hosting here only for today? Hurry now before this offer ends!

233 thoughts on “WordPress Colorbox Plugin”

  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.

    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.

  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!

  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

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

    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?

      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

        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.

          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.

  5. 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…

  6. 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/

  7. 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?

  8. 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?

    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.

  9. 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

    1. @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?

  10. 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..

  11. 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/

    1. @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?

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

        1. 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!

  12. 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

  13. 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?

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

        1. @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.

Leave a Reply

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