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
Requirements
- A self-hosted WordPress site running on a WordPress Optimized Environment.
- 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"]
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"]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.
Nicely done! Thank you. Question, anyway of controlling the size of the lightbox popup. would like to maintain aspect ratio.
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….
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,
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
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?
@vinny, The only way to do this is to edit the lightbox script.
AND…any way to provide more details on this so we can all do that?
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…
@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.
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
Where do I put the html code exactly because it isn’t popping up for me
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 😉
Can you adjust the thumbnail height and width?
@Brad, The image that you click on or the one that opens in lightbox?
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"]@Boneta, Did you try the inline HTML option by embedding the contact form shortcode in the hidden div?
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"]
@Boneta, I don’t see any div around the contact form shortcode. Please provide a link to the page where you are using it.
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.zatook too long to respond.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
@Pluto, Please provide a link to the page where you are having this issue.
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.comrefused 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
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.comdoesn’t allow you to show its content in iframe.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/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!
@Morteza, There is no such attribute in the Colorbox library. Can you please explain what you are trying to do?
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??
@Morteza, I believe this code is dynamically being generated by the colorbox library.
can i edit this dynamically code???
@Morteza, you might be able to find this code in the jquery.colorbox.js file.
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
@Morteza, I didn’t write this library. Please contact the author of the colorbox library.
Ok! very thank you for your answer.
excuse me can you give me the author’s contact information???
please Help me!
contact author of the colorbox library
@Morteza, Please google colorbox. You will find their website.
How to use a relative URL, such as
[wp_colorbox_media url="/wp-content/uploads/image/lightbox.jpg" type="image"]@haoding, you need to use the full URL.
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!
Is there a way to add multiple images to a gallery? If so, what about multiple galleries, each with their own set of images?
Buenas tardes, disculpar en mi primer lugar mi ignorancia que es mucha, como puedo poner solo texto cuando se abre la ventana emergente???
Graciassssss
Is there a way to change the size of border?
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});
});
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!
Nevermind, there are errors in your code that were preventing it. These little guys –> “” are VERY important. 😉