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.
Nice features for images.
how to add text ?
@chris, Where do you want to add text?
Hi
How do I get an html file to open in the lightbox?
Thanks
Warren
Easy, try this ..
[wp_colorbox_media url="http://your web address.com/htmlFilename.html" type="iframe" hyperlink="Any Link description of your choice"]how add width and height in iframe??
@Yasir, It’s not possible to add a width and height in the shortcode. You will need to edit the plugin file (wp-colorbox.js) in order to customize it.
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 ??
@Thomas, currently it only works with a text or image.
ok thanks it’s working great with an image 🙂 there is a way to have an autoplay for the youtube video ?
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"]Is there an easy way to integrate Gallery through WP Colorbox?
@Alex, which gallery are you referring to?
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!
Any answer for the question above? I just want to remove the image border on the lightbox. I can’t seem to find your CSS for changing this.
@Tim, you will need to apply custom CSS on it. Please provide a link to the page so I can take a look.
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
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.
@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?
Hi, I figured out how to do. Thanks anyway.
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.
Hello. I really love this plugin and was wondering if it’s possible to use it with a powerpoint presentation.
@Mayra, can you view that file in your browser without downloading?
I tried, but I can’t view it without downloading.
@Mayra, if the browser opens the download popup it will be the same for lightbox as well.
I’ll give it a try, thank you 🙂
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.
I figured out the problem. A little type in my html. x_x
Can you tell me how you fixed this? I am having same issue. Thanks
Is there a way to add “alt” attribute to the image?
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
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
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
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
@ToGovern, Yes, It’s possible. Please check the following link:
http://www.w3schools.com/tags/tag_iframe.aspI 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.
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
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.
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?
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
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.orgJust click the Red play button in the header image to show the Youtube video.
@Ryan, I didn’t see any issue with the overlay window. Which browser are you using?
I’m using Chrome in Windows 8. Here is a screenshot:
http://i.imgur.com/BjJSDqV.pngSomeone 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?
reducing the header’s z-index from 100000000 to 1000 seems to resolve this issue…will a lower z-index cause issues elsewhere?
@4cit, It should be fine I guess.
Can’t seem to get external link to picasaweb slideshow working. Lightbox pops up with no content. If you type in the URL separately, it works fine.
Test page is:
http://dev.aaapetpros.com/cbtest/@Deb, I believe you are trying to load content from
picasaweb.google.com. Unfortunately, Google does not allow you to load content from their website in iframe.Hi there, first, thank you and thanks to your great team (if you got a team), so, i need to know how can i add small thumbnail to every link, because i tried make a photo gallery and the only thing appears is a lot of links… do you can help me? very thank you.
P.S. Sorry about my english.
@Neftaly, There is no gallery option in the plugin at the moment. Which shortcode are you referring to? Please provide a link to the page in question so I can take a look.
well, this is a link to the page where i tried to make it, the plugin works, but i look/ask about how can i add a thumbnail for it… i used the code:
[wp_colorbox_media url="http://nefftarodas.hostwp.es/wp/wp-content/uploads/2014/12/71.jpg" type="image" hyperlink="Imagen 1"], and when i make click it opens a light box. everything is correct, i just only want to add a small thumb =(@Neftaly, thanks for sharing the shortcode. You just need to specify your thumbnail image URL in the “hyperlink” parameter. For example:
[wp_colorbox_media url="http://example.com/images/lightbox.jpg" type="image" hyperlink="http://example.com/images/thumb.jpg"]I Just started using this plugin to put lyrics of a song into the lightbox using the inline type. Is there a way to change the pop-up window size for an inline lightbox?? I have searched through code but can’t seem to find it anywhere. I’m specifically wanting to change the width of the box. Thanks!
@djbigg, You can change the width by editing the
wp-colorbox.jsfile.I understand that I can change the width of an iframe lightbox area by editing the ‘wp-colorbox.js’ file – but is there another way to do it so that I don’t have to remember to change the setting in that file each time I update the plugin?
I have the same doubt …
I would like to change size per link, not for all links …
Hello and thank you for this great plugin! I’m sure there is something I’m not doing right, but the following from your sample shortcode for the inline HTML option is not working. I’ve added this to a page:
[wp_colorbox_media url=”#edmimage” type=”inline” hyperlink=”click here”]
this is my test
and when I click on the “click here” link, I can see that it makes an attempt to load the lightbox, but it never seems to launch the pop-up window. Can you see anything I’ve done wrong here?
thank you!
@Kat, Please provide a link to the page in question so I can take a look.
sorry! it’s behind our firewall so I won’t be able to send you there. Are there any common problems that newbies make when composing both the shortcode and the ‘div’ section that would result in the contents of the url NOT showing in lightbox?
Thanks for any ideas!
Hi! Great plugin! However, I’m having a problem getting my external page to load in an iframe. The page I’m loading is a PHP script and the URL contains an ampersand. The plugin shortcode keeps converting the & in the URL to &, breaking my script. Any suggestion, please?
@Glenna, Please provide a link to the page in question so I can take a look.
It’s a password-protected site, so you won’t be able to view it. The shortcode should look like:
[wp_colorbox_media url='#inline_content' type='iframe' url='/datastuff/send_email_to_all.php?memberID=1&syear=2014' hyperlink='Send a message to all students in your classes']but it ends up as:
[wp_colorbox_media url='#inline_content' type='iframe' url='/datastuff/send_email_to_all.php?memberID=1&syear=2014' hyperlink='Send a message to all students in your classes']For whatever reason, it’s working now. 🙂
Hi everyone. Just downloaded the plugin and it seems to work great! I wonder if I can use Color Box to activate a form via shortcode – like a Gravity Form?
Also, when rendering iframes, can you remove all the space around the page that is shown?
thanks
@mindsparkconsulting, Have you tried the inline HTML option?
Is it possible to have a background image behind text content?
@tony, There is no option to do that in the plugin. You will probably need to apply custom CSS for it.
How will we be able to add a class in the a tag?
@Maai, There is no way to pass it via shortcode at the moment. You can directly embed HTML instead of the shortcode to do it.
Hello! I *love* this plugin. But I am trying to link to an external html page and the page that I’m linking from is encrypted via SSL. Is there a change that I can make to the plugin to make this work? I tested the plugin using an image found on my site and it worked beautifully. But when I try to use your code for external links — [wp_colorbox_media url=”http://wikipedia.com” type=”iframe” hyperlink=”click here to open external page”] — it doesn’t work. I just get a blank screen. I’m assuming that it’s because the site is secured via SSL because that’s been the problem for all of the ColorBox/Thickbox plugins I’ve tried. I really like this plugin better than any of the other plugins that I’ve tried. I’m really hoping that you can help me get this working. I need to launch the site that I’m working on this week… maybe even as early as tomorrow.
@Peggi, Please provide a link to the page in question so I can take a look. Usually all the renowned websites don’t allow you to load their content.
Hello, re: “usually all the renowned websites don’t allow you to load their content”, this website is expecting us to load their content. The website that I’m writing about is for a home show and the external link that I’m loading is from the company that creates the booth space reservations. You can see the link that needs to open as a lightbox by visiting this page:
https://margare4.arvixevps.com/~cthomeshow/request-exhibitor-space-at-the-ct-home-show/— scroll to “Step 2, Select a Booth” and click on the link that says “View our available exhibitor booths.” I discovered last night that the link *does* work — on my Mac using OS X Lion, v. 10.7.5 and Safari v. 6.1.6 but it *does not* with Chrome, v. 40.0.2214.111. Chrome tells me that it is up-to-date but the page that needs to load —http://www.expocad.com/host/fx/hbact/15hbact/default.html— does not load in the lightbox. I get a blank lightbox in Chrome. Any fix for this? I really like this plugin a lot.@pagan, I have just tested it on windows chrome (Version 40.0.2214.111 m). It seems to be working fine.
I do however see some security warnings. I believe that’s because you are loading content via http on a https page.
How can I embed a swf file? What do I put on type=”????” ?
Thank you
i’m new to WP (having used Drupal for 11 years & grown tired of all the work for a simple blog). with D7, i had a number of modules that let me select & upload an image, insert it into a node, and set it to display as a thumb & then be clicked to a lightbox. the big advantage was i didn’t have to enter any paths to my images; that was done by the Insert module.
it appears that if I want a thumb to be the link to the colorbox, i have to enter the address to the thumb i want to use (eg, /wp-content/uploads/2015/02/image-150×150.png). if i gotta, i will. i’m only entering a few blog posts a week. are there other WP plugins that would work with this plugin (which, btw, produces a very nice lightbox; thanks)?
t.a.
@tabarnhart, Actually there are many other lightbox plugins in the plugin repository. You will just need to browse and see which one can automatically do those stuff for you.
Hi there, nice easy to use plug in thank you. Would like to use it direct in the Header, which means not using a shortcode but triggering from the header.php file. Trying various options but having problems with it. Do you have the code for this? Be great if you did 🙂
I believe you will need to use the shortcode with do_shortcode. For example:
echo do_shortcode( '[colorbox shortcode]' );For more information please check this link: https://noorsplugin.com//wordpress-do_shortcode-and-its-usage/
Hi!
First of all, this is a great plugin for wordpress.
For my homepage i have to create a button link. How can i put the lightbox link into a normal wordpress button from my template.
Here is my code:
[price_list title=”Erklärvideo starter” price=”2.990″ currency=”€” type=”normal” button_title=”Anfragen” button_link=”#inline_content” bg_color=”#ffffff” period=”netto”]
[wp_colorbox_media url=”#inline_content” type=”inline” hyperlink=”KONTAKT” for=”Anfragen”]
I’d like to pop up the linine_content in the button link of my price_list. Is this possible?
Thanks 🙂
@michaelortner7, Unfortunately it’s not possible at the moment. It can only pop up from a text/image link.
Hello,
I try to put “the_permalink” in php, like this:
But it don’t work :-/
(they tell: Please specify the URL of your media file that you wish to pop up in lightbox )
Do you have a solution?
@patrac64, Which shortcode are you using? Did you insert the shortcode into a post/page?
like this:
read more”]’ ) ?>
in a page in php (template-page)
my code is erase by WP, I try again:
echo do_shortcode( ‘[wp_colorbox_media url=”‘.the_permalink().'” type=”inline” hyperlink=” > lire la suite2″]’ )
@patrac64, do_shortcode should work. But it’s hard for me to troubleshoot since you are using it in one of your template files.
The code don’t recognise the “the_permalink()”:
The error message is: Please specify the URL of your media file that you wish to pop up in lightbox.
If a replace “the_permalink()”, by a link, it’s work…
@patrac64, ok. That’s probably because the shortcode is inside a string. Have you tried this way:
$permalink = the_permalink();echo do_shortcode( '[wp_colorbox_media url="'.$permalink.'" type="inline" hyperlink=" > lire la suite2"]' );
Please make sure that
$permalinkis not null or empty. You can echo before the do_shortcode call to check it.Is there possible to generate a title below the pop up image? I didn’t any document.
@john, I have just added this option. Please update the plugin and follow the documentation for instructions.
Hi,
Is there a way to display post comments template in lightbox? Since its an external page, wont be using the shortcode but actual php code.
Any suggestions?
@Jose, Unfortunately there is no option to pop up comments in lightbox at the moment. Did you get it to work using the external page popup option?
I’m using WP Colorbox plugin and it’s great. Thanks a lot!!
But I’m still having 2 issues about it. Could you try to help me, please? You said it could have a similar question on upper comments, but, sorry, I didn’t found it.
Here they are:
1) How to change hyperlink text color? I had success about changing attribute (strong), but it remains in black (and I’m looking for hyperlink text becomes orange “#ff9900”). That happens on “Leandro Collares” and “Thiago Barros” typed in “strong” at the beginning of the second paragraph on
http://www.selenia.com.br/quem-somos/page.2) I would use WP Colorbox lightbox over an image map. It works near to fine, but keeps undesired “/>” – trash, I suppose – under the main image (please look at
http://www.selenia.com.br/portfolio/fotografia/).I could send you the customized code, if it helps!
Thanks in advance.
@Leandro, Can you please share the shortcode that you are trying to customize using CSS (1)?
I’m not sure if the library works with an image map.
I like the plugin, and I have a question. The original Colorbox at jacklmoore.com has a rudimentary slideshow option. How can I implement it using your plugin?
Hi there
I am trying to use your plugin to display “the content” on a custom post archive post
The posts are displaying correctly before I implement your shortcode .
Using the code below your lightbox is working on my first post and I am seeing a link next to each of my posts – Unfortunately all my posts show the first posts content in the light box (so no matter which link I click the first posts content is shown)
Am I making an obvious mistake in my code?
Any help would be appreciated
Thank you
****************************MY CODE***************************************************
@brad, I don’t see any code in your comment. Please provide a link to the page in question so I can take a look.
Hi,
Thanks for a great plugin!
But is it not possible to style the hyperlink in the shortcode?
We would like to change the color of the link, but nothing I do seems to work (have tried to add some html around or within the shortcode) – only making it bold is possible.
This is the shortcode we use:
[wp_colorbox_media url="https://player.vimeo.com/video/120456269" type="vimeo" hyperlink="Watch"]Regards,
Mette
@Mette, Try using HTML instead. For example:
<a class="wp-colorbox-vimeo" href="https://player.vimeo.com/video/120456269">click here to open vimeo</a>Thanks! Wasn’t aware that html could be used instead of the shortcode, but that works 🙂
Just add class=”yourclass” into shortcode, no big deal mate.
hi. thank you for the plugin. i have problem and i need your help if you can. i want to put 2 images on the same row. how do i do that? if i use the same code twice it puts the second image bellow(naturally). i am new to wordpress so i did not figured this out.
i managed. thanks anyway
Great plugin! Is there a way to make the video start automatically after the lightbox opens?
Hello,
Love the app, works to exactly what I am needing with my website. I was curious, however, if it were possible to set dimensions for the lightbox when using it to display an external page?
@considerdelivery, Unfortunately there is no option to do this at the moment.
This can’t be done through CSS or any other way? I need the width to be much more narrow.
@considerdelivery, You might need to edit the “wp-colorbox.js” file. Width and height are defined in that file.
Got it! Thanks!
Hello Again,
I have another question. I am trying to create a light box using inline HTML. I copy and pasted the code you provided to create the link and I created a div (using the exact one you used in your example) for the content, using a shortcode for a Woocommerce product page. When looking at the page, there is a clickable image, rather than just the text link I am looking for. Is there a way around this?
Hello Again.
I am trying to create a lightbox using the inline html but am having a little bit of an issue. I copy and pasted the code you provided for the inline html, and I used the same div as you provided in the example. However, whenever I view the webpage, there is a clickable image there, whereas I need just the text to be a link.
If you need a visual you can go to
www.considerdelivery.mokeeb.com/rascos-bbqand click on Wednesday Special.It opens the window with the product in there, but displayed it incorrectly with an image link that directs to the actual product page.
@considerdelivery, Did you get it to work? When I view the “Daily Specials” tab I don’t see any clickable image. And the links are working fine.
No, the issue is not resolved.
If you go back to the page, the image shows up after you click on ‘Wednesday Special’. If you click on the image, or any other part of the production criteria, it will direct you to another product page. That is the page that is supposed to be displayed when you click Wednesday Special.
I think I understand what you are saying. But your setup is wrong for the “Wednesday Special” link. You are using it as inline by opening a div containing the WooCommerce product box. If you just want to pop up a page you need to use the shortcode like the following:
[wp_colorbox_media url="http://considerdelivery.mokeeb.com/product/test-product-2-2/" type="iframe" hyperlink="Wednesday Special"]You have already done it for your other links – “Monday Special” and “Tuesday Special”.
I’m trying to embed a product from woo commerce into a lightbox. It works fine using an external link (ex: Monday and Tuesday Special), but I’m running into an issue of it displaying my header and footer in the lightbox.
By being able to embed the product it would solve my header and footer problem.
@considerdelivery, When you open a page in lightbox using iframe it shows the full content of the page. You can’t customize it by removing the header or footer.
You can do something similar in inline as well. Simply copy the content of the product div embedded in this page:
http://considerdelivery.mokeeb.com/product/test-product-2-2/Well, I managed to have the header removed from my product pages, but I’m having trouble the footer (a separate problem from yours, so I won’t concern you with it).
I’m not sure I understand why the Wednesday Special link doesn’t immediately direct to the correct product page since the html I put in there was the shortcake to the specific product page.
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@ClientRunner, Are you referring to this page?
http://www.clientrunner.net/home-testimonials-sample/I only see three YouTube videos (not images).
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!
Try this link for Youtube
http://www.youtube.com/embed/YOyrL6kfGB0and if you want to autoplay just put this behind ?autoplay=1
So your snip looks like this:
[wp_colorbox_media url="http://www.youtube.com/embed/YOyrL6kfGB0?autoplay=1" type="youtube" hyperlink="http://www.clientrunner.net/wp-content/uploads/2015/08/Thumbnail-Reets-Drying-Academy.png"]But for me i have the Problem that if i klick the link the Video shows up in the box but it still obens in a new tab as well. No idea why. Thats the reason i used this Code:
[wp_colorbox_media url="#open_youtube_001" type="inline" hyperlink="click here to open inline HTML"]But in this case i cant use the autoplay funktion because this iframe is still hide in the background untill you klick the Colorbox link.
Any Solove for my Problem ?
did you try the embedded link for the video from youtube?
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
Hello.
Please tell me how to make sure that the picture was increased by clicking anywhere on the thumbnail.
Hello there, I don’t get any text in my colorbox…is working fine. There is a pop-up… on the page with title and all.. BUT NO TEXT?!
I made a page and in the text editor instead of visual I put: texting aa a ikaiksadsak iasao
No effects? Would love to get this thing working 😉
@Akash, Please make sure that there is no extra space or line break in the shortcode.
Hello, this plugin is great … so first of all i want to thank you. But i have a little problem on mobile devices. I used your plugin within wordpress and on desktop screen everthing works fine. But if I open the colorbox on a mobile device, the colorbox floats left and is too small. My website is not responsive, so i think it has something to do with that. Any help would be appreciated. thanks in advance.
@Christian, Which shortcode are you using? Please provide a link to the page in question so I can take a look.
that was fast 🙂
[wp_colorbox_media url=”#fenstertype-popup-1fluegel” type=”inline” hyperlink = “”]
wildundkienle.de/fensterkonfigurator –> go to “Anzahl Flügel und Bauform bestimmen” and then click
to the images
@Christian, Thanks. Comments will only appear after I have approved them.
I will check the URL and get back to you.
@Christian, My plugin is not actually doing anything wrong. It seems colorbox library is not responsive.
oh, i was wondering why i cant post anything …
I found a solution that works for me.
If anyone else runs into the same problem, i changed to in the header.php file
Hello,
a perfect plugin for my site. Is it possible to use a shortcode to show a picture and not the link text but open the popup with th external url.
I found nothing about this.
@Joachim, It’s possible. You just need to specify your thumbnail image URL in the hyperlink parameter. Check the Using Thumbnail as Hyperlink section for details.
Hi, is there a way to reduce the popup size when opening an external page?
Hi! I’m trying to use this plugin on a website but can’t seem to get it to work. What the client needs is to have an image that you click that opens up a lightbox window where custom HTML can be displayed. It looks like your Inline HTML in Lightbox would be what I need, except instead of a text link we need the visitor to click on an image to open the lightbox for more info.
But when I tried to use your code for the Inline HTML in Lightbox, and just change the code so that there’s an image instead of a text link, it wouldn’t open when I clicked it. So then I followed your exact Inline HTML in Lightbox instructions, to test the text link option instead of using an image, but even the text link won’t open to custom HTML in a lightbox. The lightbox won’t open at all. What am I doing wrong and how can I get it to work?
This was the code I tried first, to see if I could use an image to click, to open a custom HTML lightbox:
[wp_colorbox_media url="#test" type="inline" hyperlink="http://www.mxcreativeradio.com/wp-content/uploads/2015/12/mx_creative_final-02-302x100.png"]My custom HTML content goes hereTEST TEST TEST
And this was the code I tried second, to see if I could at least get a text link to work:
[wp_colorbox_media url="#inline_content" type="inline" hyperlink="click here to open inline HTML"]My custom HTML content goes hereTEST TEST TEST
Thanks for your help!
@Sherry, Please provide a link to the page in question so I can take a look.
Thanks for the super fast reply!
The site we’re working on is in maintenance mode while the new site is being built, so I can’t link to that page or you’ll get a “coming soon” screen instead of the actual page where we’re trying to get the plugin to work.
Let me see if I can re-create it on a test site and send you a link to that. Stay tuned!
Here is a link to a test page:
http://planetwphosting.com/divi/test-page/Let me know if you have any questions.
Thanks!
@Sherry, It seems the link is not being able to target the div. Even without the plugin it should at least go to the div. So the page URL should change to this:
http://planetwphosting.com/divi/test-page/#inline_contentHave you tried switching to a default WordPress theme temporarily (e.g. Twenty 16 or 15)? Do you have any plugin installed that might be causing this issue?
Hello, possibly my previous question was overlooked 🙂 Is there a way to reduce the size of the lightbox/popup when opening an external page?
@Maurice, It needs to be customized in the code unfortunately.
I’m interested in almost the same thing. I have an external page that loads inside the colorbox, that I would like the height to adjust according to the content. The page that it loads is a dynamic page that the height can change, but width will always be the same. Any detail on how this is possible to be appreciated.
How do I switch these?
http://wagnerfinancial.com/wp-content/plugins/wp-colorbox/example3/index.htmlhttp://wagnerfinancial.com/wp-content/plugins/wp-colorbox/example5/index.htmlMy current colorbox is example5, i want it to be example3?
@shubhamgmath, Open the main plugin file
(wp-content/plugins/wp-colorbox/main.php)and search for the following line of code,wp_register_style('colorbox', WP_COLORBOX_URL.'/example5/colorbox.css');Now change the name of the folder from “example5” to “example3”. For example:
wp_register_style('colorbox', WP_COLORBOX_URL.'/example3/colorbox.css');Hi,
I am posting this short code:
[wp_colorbox_media url="http://s28.postimg.org/m8f1m5svx/MAPFINAL.png" type="image" hyperlink="11 states"]but it shows up as the entire code on my site for customers to see, whereas I only want 11 states to show up.
@Akhil, Switch to “text” mode to make sure there is no formatted character in the shortcode.
After reading through the comments, I see that a couple of others have asked if this can be made to automatically popup on page load, but I don’t see an answer. I looked over the code to see if I can tweak it to do that, but I’m not so great with jquery. Could you offer a hint as to where or how one might modify the code, just to give me a head start? Any suggestion would be much appreciated.
I’m loving the plugin.
I was wondering if I could place a link within my menu of the page.
For example, if a link had “Submit a Reservation”… instead of going to the reservation page, then clicking on the link to open the iframe popup link
[wp_colorbox_media url="https://www.mydomain.com/secured/reservation/" type="iframe" hyperlink="click here to open external page"], that it would simply just have the IFrame popup load directly after clicking on the menu bar.I hope that makes sense.
Simply trying to place an Iframe pop up in menu structure.
Thank you,
Chris
Long story short…
Is it possible to create a popup via a menu option?
@Chris, Please try this tweak and see how it goes.
1) Go to Appearance->Menus->Edit Menus->Custom Links.
2) In the “URL” field enter your page URL. In the “Link Text” field enter your hyperlink text. Now click “Add to Menu”.
3) At the top of the page there is a “Screen Options”. Click on it and enable “Link Relationship (XFN)” (This property should now appear in the menu).
4) Edit the newly added link. In the “Link Relationship (XFN)” field enter
wp-colorbox-iframe5) Save the menu
Hi, I tried the same option and it doesnt seem to work for me?
🙁
Tried the method you mentioned and it’s still a No Go.
Any other ideas?
Thank you,
Chris
Hi, Is it possible to have a hover image open an iframe? I can make the image open it but I’d like the image to darken upon hover so the user can see it’s a button. Here’s what I have currently:
[wp_colorbox_media url="http://google.com/" type="iframe" hyperlink="http://simcave.iconic.marketing/wp-content/uploads/2016/01/Party-Ideas-1-copy.jpg"]Also, I’d like to open a Pinterest feed in the iframe but it doesn’t pull. Do you know why that would be?
Thanks!
@Casey, Hover event is currently not supported in this plugin. It can only open a popup when you click.
Hi, I think this is exactly what I need for my page but I’m running into a small snag.
If you look at
http://www.brownelltravel.com/cruise-chronicles/crystal-cruises/you’ll see that I used WP Colorbox under Recommended Voyages for Helsinki Highlights. It works perfectly the first time I click but anytime after that it just displays a small box with no copy inside.Any insight?
@Brandi, There is a JavaScript error coming from your theme:
http://www.brownelltravel.com/wp-content/themes/dataperk/js.jsUncaught TypeError: Cannot read property 'id' of nullHi there – I love the plugin, but for some reason the X that one clicks on to close the image file I am popping up moves from the bottom right of the image to the top right when you click on it to close the popup, then when you click on the X in the upper right corner it actually does close the popup.
I am wondering if you could supply me a bit of code to hide the X completely, and the thick grey bar below it do that they do not show up. As long as one can still click into the dark area around the image to close it, that would work fine for me.
This is the code I am trying to use (I have my own link in the version I am using, of course):
[wp_colorbox_media url="http://example.com/wp-content/uploads/images/overlay.jpg" type="image" hyperlink="VIEW A SAMPLE IMAGE"]Any help would be most appreciated.
Hi there – I forgot to mention – I am using Beaver Builder. You can see the site at the following link temporarily:
http://goo.gl/pjUq2XIf you go to the STATIONERY page, you will see some sliders with links that read: VIEW A SAMPLE IMAGE.
I am using your plugin to make those links show a sample of what the customer will be ordering.
You should be able to see the issue I am talking about when you try to close the image by clicking on the X.
Could really use some help hiding the grey bar and the X, or alternatively, fixing the X so it works right. Either works for me, but whichever is easiest for you, if you are willing to help. 🙂
Hello again – I could really use some help on that pesky X closer issue. Again, I appreciate any help you can give me on the matter.
@Dave, Try this piece of CSS code with this custom CSS plugin:
https://wordpress.org/plugins/simple-custom-css/#cboxClose{display: none !important;
}
I didn’t really write the colorbox library. So I’m not sure if this will work.
Works like a charm – I used a different CSS plugin that I prefer that comes up in a search for CSS DUo Leaf. It lets you create CSS additions as individual elements that you can toggle on and off as required.
Thank you soooooo much for getting back to me and helping me with my issue!
Hello,
I’m using the popup to show a contactform7 with a image-link, and works perfectly, with this code:
[wp_colorbox_media url=".the_content" type="inline" hyperlink="http://my-web/uploads/staff.png"][contact-form-7 id="5602" title="Test Staff contactform"]But now i’m trying to put this code in the header.php with a image fixed, and it’s not working, it’s printing the shortcode [wp_colorbox…] directly in text.
Any suggestion to do it?
Hi!
Just put this class in the tag:
class = "wp-colorbox-image cboxElement"Change the “image” to “inline” and test to see if it works. My case was type = “image”, so theoretically if you make that change it should work.
My code looks like this:
<a href="" class="wp-colorbox-image cboxElement"> <img src="" />Hi, I really love this plugin!
How I can disable the scrolling on the page behind a colorbox?
Thanks.
@TOTdesign, That’s not possible unfortunately since lightbox has no control over your HTML page.
I solved it by myself adding this code when it’s opened and closed
//colorbox .start$("body").css("overflow", "hidden");
//colorbox .end
$("body").css("overflow", "auto");
//colorbox .start
$("body").css("overflow", "hidden");
//colorbox .end
$("body").css("overflow", "auto");
I want to try this code to disable the scrolling page behind iframe popup. Please let me know the filename and place to type this code. Thanks in advance.
This plugin seems awesome i just have one difficulty though. I need the iframe to pop up on pageload. Is there a way to o this without linking to an href and having to click on the link to open it. Also i d like to make the whole page close and returnt o the previous page when the lighbox modal is closed. Are these two things possible ? if so how?
@Jessica, Unfortunately it’s not possible at the moment.
Hi there
Thank you for the nice Plugin, it works fine and I am happy with it. One thing causes me some difficulties: when I open the lightbox on the iPhone it fills the whole screen, because I use much text. When I try to close the lightbox with the close-button on the bottom of the screen, I can’t do it because the footer-navigationbar of Safari appears an covers the close-button area. So it is not possible to close the lightbox, I have to relaod the page to get back.
Is there a solution for this – maybe with a padding for the x-button oder placing it on top ot the lightbox?
Thanks a lot and kind regards
Johannes
Hi!
First things first. I Really love your plugin!
I got a little issue, I’m using your plugin and have a button setup to pop-up a html text page.
The content already is in the page and when you press the button pop-up nicely with the html text in it.
This works fine with desktop and laptops but not on my mobile device such as my iPhone.
The code that I’m using is:
[wp_colorbox_media url="#inline_content" type="inline" hyperlink="MEER PRODUCT INFO" class="x-btn moreinfo"]blablabla html content
Hope you can help.
Thank you!
Kind regards,
Martino
@martino, Please provide a link to the page in question so I can take a look.
It’s the black button 😉
Thank you.
http://samba-football.com/product/samba-bahia-fifa-approved/Hi,
Still waiting for a response.
Hoping to hear a solution 🙂
Cheers
@martino, The button link doesn’t seem to work on smaller devices. It just scroll upwards. There is no error in the console either. All I see is this warning:
Deferred long-running timer task(s) to improve scrolling smoothness. See
crbug.com/574343.What happens if you temporarily switch to a default WordPress theme (e.g. Twenty 16, 15 or 14)?
Thank you for your response.
I tested it and it works fine.
I’m using Theme X. Maybe Visual Composer doesn’t let me activate the action.
Any ideas how to fix it?
Thanks
@martino, It’s a theme issue then. I’m not really sure how it can be fixed. All the necessary scripts and the JavaScript codes there (even on smaller devices). May be the theme is including some additional scripts on smaller devices that are causing this conflict.
No problem.
I’ll try and find a way and when I do. I’ll let you know 😉
Thanks again for the support!
Cheers
Hi
Is there a way to set the background for the light box to be transparent? Now its black.
I’m wondering about this same thing, did you figure it out?
Why does my lightbox “jump” to the top of the browser window?
http://www.missionhills.org/im-new/staff-elders@MIKE, I think the plugin is not being able to determine the top coordinates of the page on this theme. Do you see the same issue if you temporarily switch to a default WordPress theme (e.g. Twenty 16 or 15)?
I see it’s possible to add ‘title’ text to the url src img, but can you add ‘alt’ text?
@Kimberly, It’s not possible at the moment. I will add this feature to the plugin in the next release.
hey this is awesome but I did not see any way to make it work with soundcloud, I messed around using the you tube formula and the soundcloud api/link found inside the embed code, it works awesome over and over but at times it lags a whole bunch. could you guide me to what could be done or how the shortcode should be written to work. Once again awesome plugin, thanks in advance for any guidance you can throw my way to perfect the soundcloud approach.
@David, How are you trying to integrate this with soundcloud? There is no direct integration option with soundcloud at the moment. So you will need to manually insert the embed code into an inline div and pop up in lightbox.
Please check the “Inline HTML in Lightbox” section for details.
hello there
How can I change the visual style of pop-ups windows?
thanks
@diego, Unfortunately that’s not possible at the moment.
I love this plugin, but I’m having one problem: My website has a Getresponse opt in form on the side bar and when the the lightbox opens, the opt in form is covering part of the lightbox. Is this a z-index issue. I’m not that well-versed in css, so not sure what to do here. thanks
@Debra, Please provide a link to the page in question so I can take a closer look.
I am looking to create a custom button within my lightbox that is a mailto link and closes the lightbox when clicked. Can someone guide me to the code to edit to do this?
We have successfully installed the plugin and have created a color box on the following page:
http://www.kailuasailboards.com/about-us/jobs/When you click on the link “off season specials through dec 20th” the light box opens. When you try and x out of the window, you are left with a weird black screen.
The fact that this plugin isn’t automatically responsive makes it completely useless in 2017. I would give it 0 stars if I could because it is literally useless when 80% of any websites traffic is now on mobile. Absolutely useless.
@Andrew, First of all, nobody is forcing you to use my plugin. Feel free to use any other lightbox plugin. And secondly, who said that it’s not responsive? It uses percentage based dimensions and is fully compatible with mobile and tablet devices.
Is there any way to make this work within a BUTTON? So far I can only make it work within a text link.
What would be the code to put into a button short code or button image?
Thank you!
@hannah, Unfortuntely It’s not possible at the moment.
Hello, I use that Plugin for my Disclaimer (Datenschutz) but the Text is too long, can i make the Inline HTML scrollable?
here is the link:
http://wmck.de/#wichtigesHello,
can you please help me figure out why does my lightbox is coming out white when was working just few minutes ago ? 😛
Here is the code:
[wp_colorbox_media url="http://adobe.xcerio.co.nz/" type="iframe" hyperlink="START LEARNING"]@Akmon, Please provide a link to the page in question so I can take a closer look. Do you have any other lightbox plugin installed?
Nope this is only lightbox plugin. It covers everything that i need so i didn’t require any other plugin.
Pages as you requested them
“Start Learning” button
http://xcerio.co.nz/productivity/http://xcerio.co.nz/creativity/For some reason its working for me sometimes. It loads page then after you refresh page or wait for a while it doesn’t want to.
Also i noticed when i used direct link to the html it didn’t use lightbox it was loading in entire browser window so i had to create subdomain for the html files to even load Which doesn’t make sense :S
@Akmon, thanks. It seems to be working fine for me. You do have some fancy JavaScript stuff like toggle header, floating menu. So there is a chance it might conflict. But on my end I don’t see any issue.
My only problem is how to set the HEIGHT and WIDTH of the lightbox.
@Marko, Unfortunately it can only be customised in the code at the moment.
In which part of the code can you change the width and height?
@Fracisco, You will need to edit the “wp-colorbox.js” file. It’s in the root directory of the plugin.
Thank you.
You can change the dimensions in which the video will appear in Pop.
Is that there are some players that do not automatically redimension.
hi.. anyone can give me tutorial about make inline content in wp colorbox?
and is possoble to change the theme of this lightbox?
and last.. possible to open a image while mouse hoover?
thanks guys…
Good day!
Thanks for creating this plugin. I have a few issues on mobile devices when opening the internal and external URL. First is the “EPX on Modern Gladiator” and the “Visiting Cuba”. They are both fine in desktop, but when viewed on mobile they are not responsive unlike the “EPX Adventure: Driving Tanks” which is internal link also. URL and the code are posted below. Hope you could help me on this.
Thanks and more Power!
CODE:
[wp_colorbox_media url="https://www.epxworldwide.com/blog/visiting-cuba-trip-back-time-appreciate-future/" type="iframe" hyperlink="https://www.epxworldwide.com/wp-content/uploads/2017/03/press-cuba.jpg"]URL:
https://www.epxworldwide.com/press-test/Thanks
I’m trying to use this plugin to embed an external page
https://www.rebelsafetygear.com/and its not working. I think it may be because it is a secure site?Any way around this?
@iKm, For security reasons many websites don’t allow external embed via iframe.
I’m trying to use CSS to alter an image link style – and the size options are conflicting, presumably hardwired into the code.
I’m using this code – class=.btn-bg
btn-bg {
width: 100px;
position: relative;
opacity: 0.5;
transition: 0.3s ease;
cursor: pointer;
}
.btn-bg:hover {
transform: scale(1.5, 1.5);
/** default is 1, scale it to 1.5 */
opacity: 1;
}
I can’t affect the height and width or zoom
My test page is
www.rikardfjord.com/audio-wall-lightboxIs there a way I can override the plugin’s settings to make this work?
@Richard, The plugin doesn’t apply any custom CSS to a thumbnail image. You can use the developers console tool in your browser to check if your Custom CSS is getting applied.
Hi,
how can I change background opacity?
Thank you for help!
TC
@Thomas, You should be able to do this with CSS. Please provide a link to the page in question so I can check it.
Hello
I am sorry I am just totally new to this I just want that the hyperlink is a button not a word?
So what code should I write for it and where to be like a button not just a single word.
Thank you
@Valentin, The plugin only supports text/image link at the moment. Can you use an image for your button or does it have to be an HTML button element?
Wp Colorbox does not work on Chrome, see page:
mordialloccollegealumni.org/live/faq/– find a link: “existing collection of digital images, historic and contemporary photographs and documents, videos, and other paraphernalia”Actually it works, Chrome opens colorbox but then suddenly redirects to external image URL instead of keeping it inside colorbox .. Some kind of redirect is happening.
Any idea what is happening? Works on Firefox..
@admin Any guidance on this issue?
Thanks
I have the plugin installed on one site and it works perfectly. I’m redoing the site using Divi and it doesn’t work. Nothing happens when I click on the link. I copied the code exactly the same from the site it works on. Can you help?
CODE:
Includes: Audit Representation, Auditing Fees, Bookkeeping, and
[wp_colorbox_media url="#inline_content" type="inline" hyperlink="more"]Accounting Fees includes:
Audit Representation
Tax Return Preparation Fees
PAGE IT DOESN’T WORK ON:
http://test.deductornot.com/library/accounting-fees/@Donna, I’m not sure what’s happening here. But the browser doesn’t move to the #inline_content div when clicked. Have you been able to pop up any other content like an image, YouTube video or Vimeo video?
Good question! I just added an image and the image works (but the text still does not)
http://test.deductornot.com/library/accounting-fees/Hello, I contacted my theme (divi) about this issue and here’s their response: “the issue is that, most likely, the colorbox isn’t initialized with that anchor link but only with the class ‘.wp-colorbox-image’. I’d suggest contacting the developer of that plugin for further assistance and, perhaps they can provide the code to use and initialize the colorbox lightbox for the #inline-content as well”
Is this something that you can help me with. Your plugin is exactly what I need and I really want to continue using it. Thanks!
Hi,
Thanks for the plugin. Really great.
I have a question though; I use colorbox to show video’s on my website. I’dd rather not have visitors downloading the files by either clicking the download button or right-clicking on “save video as”
Is there a way of doing this?
Thanks a lot!
Kind regards, Wart Wamsteker
Hello,
I am wondering if it is possible to group related images with this plugin.
Thanks!
Mary Ann
@Mary, Do you mean a gallery option in lightbox?
Hi I am working on this site:
theflowermonger.comI’m trying to us the colorbox lightbox on the “radius” link at the bottom to bring up a map image in a lightbox, but it keeps leaving the page and linking directly to the image file. Can you tell me what I’m doing wrong?
@Kristen, Are you dynamically loading content? What happens if you switch to a default WordPress theme (e.g. Twenty 17, 16 or 15).
Ah, it does work on Twenty 15 – so it is an issue with the theme I’m using? Any custom CSS that can be used to fix it?
@Kristen, I don’t think CSS has anything to do with it. I think some content is getting loaded dynamically. That’s why the colorbox JavaScript file is not being able to bind lightbox event to that link.
Refused to display ‘https://**’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’. What’s the resolution for this?
@dim, It means that website doesn’t let you embed its documents in iframe outside the domain. Unfortunately, there is no way to fix this on your end unless the website in question allows iframe embedding outside its domain.
The lightbox will not work after ajax load? is there any workaround for this?
Hi, we switched our website ottomuehle.de to https:, however, on sites using colorbox (and we love it!), the lock sign in the address section of our browser (Chrome 66) disappears.
Inserting manually “https:” in each of the colorbox commands, the lock sign remains.
This is strange, because many other links in our webcode include http:, without causing the browser to indicate an insecure connection.
Is there any way to make the connection secure without changing all the colorbox links manually to https:?
Your opinion would be highly appreciated!
Regards
Yorck
@Yorck, You can try a “search and replace” type plugin that will change all links to https.
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. 😉
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