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.
Table of Contents
- WordPress Colorbox Plugin Demo
- WordPress Colorbox Plugin Installation
- WordPress Colorbox Plugin Usage
- Priority Support
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"]
YouTube Video in Lightbox
[wp_colorbox_media url="http://www.youtube.com/embed/nbp3Ra3Yp74" type="youtube" hyperlink="click here to open youtube video"]
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"]
External Page in Lightbox
[wp_colorbox_media url="http://wikipedia.com" type="iframe" hyperlink="click here to open external page"]
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:
When you click the text link your custom HTML content will pop up in lightbox.
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"]
Priority Support
If you are having an issue with the plugin, our support team can help investigate it by taking a closer look at your site.
Hello
I would like to change the hyperlink text color from black to white. I’m using the plugin for custom HTML with text to open lightbox. Tried everything but to no avail. How would I go about doing this?
Thanks
@Drew, The plugin doesn’t change your link color. It comes from your theme.
Hi there,
I’d like to use this plugin to link an entire paragraph of formatted text to a Lightbox. Currently, if I fill the “hyperlink” field in the shortcode with my formatted paragraph, it just displays as “click here” on the front, and my formatted text is completely gone. Can you help?
Thanks!
@james, what shortcode are you using?
Hey, thanks for the reply.
I am using the external page shortcode because I need to link to a light boxed PDF.
@James, I don’t think PDF is supported. It needs to be a public page.
Hi,
How can I set the width of the lightbox to be 100% of the browser window (ie responsive). I am loading/displaying a Storyline 360 project.
Thank you martin
Hi,
Vimeo video is not auto-playing even after adding autoplay=1 to the video URL. can you please let us know how to make it work?
Thanks,
Kevin.
@Kevin, Can you please provide the shortcode that you are using?
Hi,
I use colorbox to get a small image enlargement. Near the image I inserted a lens with which to obtain this effect. When the box with the enlarged image is closed, above the lens, an annoying colored rectangle appears and, to eliminate it, it is necessary to refresh the page. How is it possible to solve this problem? Thank you
I use this shortcode:
[wp_colorbox_media url = "http://example.com/wp-content/uploads/images/overlay.jpg" Type = "Image" hyperlink = "http://example.com/wp-content/uploads //images/lens.jpg "]I cant get the shortcode to work in widgets
@Dave, What type of widget are you using?