WordPress Colorbox Plugin


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

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 really like the plugin please give it a rating here (I will really appreciate it)
Users who like Colorbox also like Lightbox Ultimate plugin to pop up media in overlay.

122 thoughts on “WordPress Colorbox Plugin

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

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

      • 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!

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