WordPress Colorbox Plugin

Last updated on by admin

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.

Colorbox is a jQuery lightbox script developed by Jack Moore. This plugin makes this customizable and lightweight lightbox script available for WordPress.

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

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"]

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

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"]

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"]

If you really like the plugin please give it a rating here (It helps with the support and maintenance)
Users who like Colorbox also like Lightbox Ultimate plugin.
Plugin Name: WordPress Colorbox Lightbox
Compatibility: WordPress 4.5
Version: 1.0.8
Description: A free WordPress plugin for viewing image, video (YouTube, Vimeo), page, inline HTML, custom content in lightbox. Add jQuery Colorbox lightbox effect to your WordPress site.
Icon of WordPress Colorbox Lightbox
Price: 0 USD
Availability: instock
Rating: 4.2 out of 13 votes

171 thoughts on “WordPress Colorbox Plugin”

    1. Easy, try this ..

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

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

  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

    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"]

  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!

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

  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.

    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.

  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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      1. my code is erase by WP, I try again:
        echo do_shortcode( ‘[wp_colorbox_media url=”‘.the_permalink().'” type=”inline” hyperlink=” > lire la suite2″]’ )

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

          2. @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 $permalink is not null or empty. You can echo before the do_shortcode call to check it.

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

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

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

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

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

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

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

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

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

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

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

    1. If you need a visual you can go to www.considerdelivery.mokeeb.com/rascos-bbq and 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.

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

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

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

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

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

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

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

    1. Try this link for Youtube
      http://www.youtube.com/embed/YOyrL6kfGB0

      and 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 ?

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

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

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

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

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

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

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

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

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

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

          Have 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?

  46. Hello, possibly my previous question was overlooked 🙂 Is there a way to reduce the size of the lightbox/popup when opening an external page?

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

  47. How do I switch these?
    http://wagnerfinancial.com/wp-content/plugins/wp-colorbox/example3/index.html
    http://wagnerfinancial.com/wp-content/plugins/wp-colorbox/example5/index.html

    My current colorbox is example5, i want it to be example3?

    1. @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');

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

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

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

      1. @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-iframe
        5) Save the menu

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

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

    1. @Brandi, There is a JavaScript error coming from your theme: http://www.brownelltravel.com/wp-content/themes/dataperk/js.js

      Uncaught TypeError: Cannot read property 'id' of null

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

    1. Hi there – I forgot to mention – I am using Beaver Builder. You can see the site at the following link temporarily:

      http://goo.gl/pjUq2X

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

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

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

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

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

      1. 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");

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *