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. Nicely done! Thank you. Question, anyway of controlling the size of the lightbox popup. would like to maintain aspect ratio.

    Reply
  2. Why would you list the div code that we need to create (for custom html pop up) as an image?
    We can’t copy and paste it, which is really annoying….

    Reply
  3. Hello,
    I’m using Colorbox to pop up information about a partner company when you click on their logo. Works great. In the lightbox, I have a link that will send them to the partner’s website (opens a new tab/window). Is it possible to have the lightbox close if they click the external link so that when they return to the page it isn’t open anymore?
    Thanks,

    Reply
    • Gena –

      You should be able to use a simple JQuery function to capture the onClick event for that link in your colorbox by adding an id=”goToPartner” in the anchor <a> tag, and then waiting for the click to happen. This is done all the time for capturing a user’s click on a Submit button in a form to check for empty fields and valid entries. Do a search for “jquery capture click event”.

      Hope that helps.
      Jeff

      Reply
  4. Hi, very nice your plugin! thanx for creating it.
    Let me ask a question. is there anyway to increase the lighbox size when loading a page in an iframe?

    Reply
    • @vinny, The only way to do this is to edit the lightbox script.

      Reply
      • AND…any way to provide more details on this so we can all do that?

        Reply
  5. Hi I’m using this plugin to have a popup box which shows an image and description of different products in one paragraph, however it seem to only read the first image and description when you do it this way. My initial guess is that it is a naming convention…could anyone help me figure this out? can I change the “#inline_content” variable to like “#inline_content_2″ and have the shortcode still function?

    EX: additional items include: item 1, item 2, item 3.

    (each item is linked with an inline html pop up but it displays the item 1 information for item 2 and 3)

    my code is as follows

    [wp_colorbox_media url=”#inline_content” type=”inline” hyperlink=”item 1, “]

    item1 description…

    [wp_colorbox_media url=”#inline_content” type=”inline” hyperlink=”item 2, “]

    item 2 description…

    Reply
    • @Diva, Specifying “#inline_content” in multiple shortcodes means they will all open the same div with ID “inline_content”. You should have a separate div with a unique ID such as inline_content_2, inline_content_3.

      Reply
      • I am trying to produce an html lightbox but can’t get it to show anything when clicking the link. Could someone post exactly where the html code inside the divs goes? Thanks

        Reply
    • Where do I put the html code exactly because it isn’t popping up for me

      Reply
  6. This is a nice plugin – thanks. ..but how do I get rid of the behavior where it moves the colorbox overlay up and down as you scroll the sidebar vertically? The colorbox overlay seems to move vertically on it’s own and I wanted to get rid of that so the user can scroll vertically without whatever content in the the colorbox moving on it’s own. Thanks very much in advance 😉

    Reply
  7. Can you adjust the thumbnail height and width?

    Reply
    • @Brad, The image that you click on or the one that opens in lightbox?

      Reply
  8. Good day

    I am trying to use the lightbox on a “book a demonstration” image, it has to pop up an enquiry form…. i am really struggling to get this done. I can get the image to show but not the enquiry form to pop up. Can you maybe assist with this issue?

    this is the contact form 7 code: [contact-form-7 id="97" title="Contact form 1"]

    Reply
    • @Boneta, Did you try the inline HTML option by embedding the contact form shortcode in the hidden div?

      Reply
      • I did…but i am getting this wrong… please look at my code… the image shows and when i click on it it opens the current page…but it needs to open the contact form.

        [wp_colorbox_media url="#inline_content" type="inline" title="overlay image" type="image" hyperlink="http://www.bluesp.co.za/wp-content/uploads/2019/05/BOOK-A-DEMONSTRATION-IMAGE.jpg"]
        [contact-form-7 id="97" title="Contact form 1"]

        Reply
        • @Boneta, I don’t see any div around the contact form shortcode. Please provide a link to the page where you are using it.

          Reply
          • I see it doesnt show when i press reply, it deletes the div. here is the link, you will see it has a blue image that reads “Book a Demonstration”

            http://www.bluesp.co.za/aspen-mtell/

            Thank you

          • @Boneta, Your website is not loading for me. I see this error: This site can’t be reached www.bluesp.co.za took too long to respond.

  9. Having a problem when using with external website url’s. Some work while others do not, Get either a blank box or a message saying not allowed. Any way to fix this?

    Great plugin otherwise.
    Thanks

    Reply
    • @Pluto, Please provide a link to the page where you are having this issue.

      Reply
      • Here are two examples:

        LINK #1: https://homeselite.com/2019/08/08/how-to-make-lemonade/

        Code:[wp_colorbox_media url="https://www.culinaryhill.com/how-to-make-lemonade" type="iframe" hyperlink="How to Make Lemonade"]

        Response in lightbox: www.culinaryhill.com refused to connect.

        LINK #2: https://homeselite.com/2019/08/07/10-dumbbell-exercises-that-burn-fat/

        Code:[wp_colorbox_media url="https://www.verywellfit.com/plank-to-upright-row-3498277" type="iframe" hyperlink="10 Dumbbell Exercises That Burn Fat"]

        Response in Lightbox: Blank

        Reply
        • Thanks. I see this error in the console:

          Refused to display 'https://www.culinaryhill.com/how-to-make-lemonade' in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

          This means that culinaryhill.com doesn’t allow you to show its content in iframe.

          Reply
  10. Thank you! This is great, however I am hoping to do one thing. I have my first image’s page now open in a lightbox, however I would like to then be able to click to the next image within that lightbox and have it load the new image page within the lightbox window. Is that possible?

    see http://shaheemedia.com/portraits/

    Reply
  11. Hi
    I want to enable “cboxPrevious”, Now this section is disable by attribute inline
    please help me for enable this section, Which files do I edit????

    thank you so much!

    Reply
    • @Morteza, There is no such attribute in the Colorbox library. Can you please explain what you are trying to do?

      Reply
      • I see this section in the inspect browser: div “cboxLoadedContent” > div “cboxCurrent” > there is
        Even I can edit this object in colorbox.css but i can’t find where is it “display: none”

        Can I send you a screenshot??

        Reply
        • @Morteza, I believe this code is dynamically being generated by the colorbox library.

          Reply
          • can i edit this dynamically code???

          • @Morteza, you might be able to find this code in the jquery.colorbox.js file.

  12. very Excuse me, is it possible to specify its line number???
    Or provide you with c-panel information privately and can you correct it???

    This is very important to me and i need to correct this section

    Reply
    • @Morteza, I didn’t write this library. Please contact the author of the colorbox library.

      Reply
      • Ok! very thank you for your answer.

        excuse me can you give me the author’s contact information???

        Reply
  13. please Help me!
    contact author of the colorbox library

    Reply
    • @Morteza, Please google colorbox. You will find their website.

      Reply
  14. How to use a relative URL, such as
    [wp_colorbox_media url="/wp-content/uploads/image/lightbox.jpg" type="image"]

    Reply
    • @haoding, you need to use the full URL.

      Reply
  15. Hi there, love the simplicity of this plugin. Question – I am generating URLs dynamically based on the logged in user and buddypress implementation. Is it possible to generate an iframed page using php rather than shortcode? Thank you!

    Reply
  16. Is there a way to add multiple images to a gallery? If so, what about multiple galleries, each with their own set of images?

    Reply
  17. Buenas tardes, disculpar en mi primer lugar mi ignorancia que es mucha, como puedo poner solo texto cuando se abre la ventana emergente???
    Graciassssss

    Reply
  18. Is there a way to change the size of border?

    Reply
  19. I have modified the wp-colorbox.js so that I can open the light box at 90% width for mobiles phones but at 50% for desktop/laptop. However, the close tab and border is disappearing in mobile browser. Can you please let me know what changes I need to make to ensure that the border and close button is seen even in mobile browser?

    jQuery(document).ready(function($) {
    if (width < 1200){
    $(".wp-colorbox-image").colorbox({maxWidth:"90%", maxHeight: "50%"});
    $(".wp-colorbox-inline").colorbox({inline:true, width:"90%", maxWidth:640, maxHeight: "50%"});
    }
    $(".wp-colorbox-image").colorbox({maxWidth:"50%", maxHeight: "99%"});
    $(".wp-colorbox-youtube").colorbox({iframe:true, scrolling:false, width:"90%", height:"90%", maxWidth:640, maxHeight: 480});
    $(".wp-colorbox-vimeo").colorbox({iframe:true, scrolling:false, width:"90%", height:"90%", maxWidth:640, maxHeight: 480});
    $(".wp-colorbox-iframe").colorbox({iframe:true, width:"80%", height:"80%"});
    $(".wp-colorbox-inline").colorbox({inline:true, width:"50%", maxWidth:640});
    });

    Reply
  20. I’ve edited the lines for initialwidth and others with no change. The box is always the same size despite what updates and where. Can you please provide a solution that will enable inline to have a 90% width when opening that actually aligns the box in the centre of the window? MUCH APPRECIATED!!! THANK YOU!

    Reply
    • Nevermind, there are errors in your code that were preventing it. These little guys –> “” are VERY important. 😉

      Reply

Leave a Comment