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

Users who like Colorbox also like Lightbox Ultimate.
About these ads

36 thoughts on “WordPress Colorbox Plugin

    • Easy, try this ..

      [wp_colorbox_media url="http://your web address.com/htmlFilename.html" type="iframe" hyperlink="Any Link description of your choice"]

  1. hello everybody ! the lightbox is working great thanks ! is there a possibility to open the lightbox by clicking on a button instead of following a link ??

  2. How can I put image on it instead of “click here to open youtube video”? I want to put an image then after they clicked the image the video will appear. Thanks

    • @ver, you can specify the image url in the hyperlink parameter of the shortcode. For example:

      [wp_colorbox_media url="http://www.youtube.com/embed/nbp3Ra3Yp74" type="youtube" hyperlink="http://example.com/wp-content/uploads/image/thumbnail.jpg"]

  3. Love your plug-in, great work. Is there a way to change the gray border around the contents of the lightbox, and the gray bar across the bottom? The gray border images don’t always seem to line up, and look misaligned much of the time. Thanks!

  4. Hi, I just want to thank you for providing this great plugin. I was looking for this kind of plugin for few days. I installed it on my website but I need few other small details to add as well like a frame around the image. I have a css linked to the page where the code is.

    In this example I used your code, but I don’t know where to put the which helps to see the title under the image and a border around the image.
    [wp_colorbox_media url="http://player.vimeo.com/video/id" type="vimeo" hyperlink="http://mywebsite/video_gallery/images/image.jpg"]

    I really appreciate if you can please help with this matter. If you could please provide instructions for both youtube and vimeo.

    Many thanks in advance.

    Kind Regards,
    Ida

  5. Hi,
    I would really appreciate if you could please let me know if there is a solution to the problem above. If not I will check something else. Just notice a part from my message is missing. Thank you.

  6. @Ida, some parts of your last comment were automatically formatted by WordPress. I am not sure why. I had to remove it so the page does not render with broken HTML. Can you please submit it as code?

  7. Hi, thank you for your reply. The part that was missing was related to em and li tags. Is there any method to add em and li tags in your code? Or is there any other way to add a frame around images or gallery? Thank you.

  8. Hi!
    I’m trying to implement the HTML Content on my website.

    Here’s my code…

    Today is a [wp_colorbox_media url="#inline_content" type="inline" hyperlink="good"] day.

    But when I open the page and click on the link, it pops up an empty box.

    Any Ideas how I can solve this problem?

    Thanks.

    • I have this same problem… Have any idea whats going on?

      The content isnt showing up.

      [wp_colorbox_media url="#inline_content_back" type="inline" hyperlink="http://centerforthro.wpengine.com/wp-content/uploads/2014/05/back-pain-icon.jpg"]

      http://centerforthro.wpengine.com/

      Under our services section > image icons.

  9. Hello, my theme has a preset ahref string button, which i can only enter the website link between the two inverted commas ” ”

    How do I force that link to open as an external page in lightbox? I cant put the shortcode in that ahref link as it doesnt work….

    Please tell me how I can force it to open that link in a lightbox – between the two ” ” in the ahref string.

    Many Thanks

  10. Hiya! I’m looking for a lightbox that will load automaticly on page load, play a video (probably youtube, but maybe vimeo), then close automaticly to show the regular page… Is this something this plugin can do or do i need to keep looking?

    Thanks

  11. Hi,
    Thanks for sharing great plugin…

    I just had an error on validation:

    “An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.”

    How do i add an alt attribute to the code?? im using this one

    [wp_colorbox_media url="#inline_contentimg" type="inline" hyperlink="http://web2.proweaverlinks.com/tech/psadvancedengineering/wp-content/themes/psadvancedengineering/images/img-eye.png"]

    Thanks

  12. Hello,

    Is it possible to embed a web page in a WordPress article or page, not as a popup, but as a normal iFrame using ColorBox?

    Thanks

  13. I think this is a brilliant plugin – and thank you. Nice and simple. I’d love to be able to invoke the popup from a button which is already a shortcode element. This seems to make WordPress eat itself – and I’m not really surprised – but if anyone has any good ideas – I’d love to hear them.
    I’d also love to simply control the color and opacity of the overlay that the popup sits on.

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