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 plugin to pop up media in overlay.
About these ads

46 thoughts on “WordPress Colorbox Plugin”

  1. Hi,

    I really like your plugin but I’ve ran into an issue that I can’t seem to fix. Whenever I add a Youtube Colorbox, the background becomes black except for the header of my site. This also causes the header to have a higher index value and will appear over the lightbox content causing for a portion of it to be hidden. Can you point me to the correct file to edit so I can change the CSS to maybe change the z-index or something similar?

    Here is my site so you can see the issue: http://agoraenterprises.org

    Just click the Red play button in the header image to show the Youtube video.

      1. Someone else mentioned changing the z-index. I’d rather not change a theme’s global z-index. I’d much rather change the z-index of the plugin so it has a much small impact on the overall site. Can you point me to the file (is it in the editor in the wordpress dashboard or will I have the go into ftp) and line or html tag in which I should change the z-index?

    1. reducing the header’s z-index from 100000000 to 1000 seems to resolve this issue…will a lower z-index cause issues elsewhere?

  2. Hi,

    i can’t use an caption inside your plugin. What can i do for mantain all images in line and use your plugin? Without caption is impossible to have a perfect line between all the images

  3. Hi! I want to add some css for text in hyperlink, like this:
    [wp_colorbox_media url="#inline_content" type="inline" hyperlink="test"]
    but if i used “id” or “class” in result i see: “Click here”, but i want to see “test” with my css.
    you can help me?

  4. Hi is there a way to have a link to an image and the image that show up have a link to a page?
    I tried the inline but it didnt show anything. Wondering how to do it on my wordpress page.

  5. Hi,
    What a great plugin.
    I just have one question. How can I set the size of an iFrame?
    That is the only thing I miss. With this I wouldn’t need any other “lightbox” plugin.
    Hope there is a solution for this.
    Kind regards

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      1. ok thanks it’s working great with an image :) there is a way to have an autoplay for the youtube video ?

    1. Easy, try this ..

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

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