You are on page 1of 22
sens Worabress Colarbox Pugin | Noo’'s Pugin WordPress Colorbox Plugin JANUARY 11, 2014MARCH 7, 2015 / WPGUIDE 6 Votes Last updated on March 7, 2015 WP Colorbox plugin enables lightbox functionality on your WordPress blog using Colorbox. It allows you to pop up image, YouTube video, Vimeo video, external page, custom inline content beautifully. WordPress Colorbox Plugin Installation © Login to your WordPress admin dashboard © Go to Plugins->Add New Inpinoorspugincom/2014/01t thvorapress-colorbox- plugin 2 vzazs Wioreeress Calortox gin Nea’ Plugin © Enter WP Colorbox in the search box © Once you find the plugin hit the install button Option 2 © Download (http://downloads.wordpress.org/plugin/wp- colorbox.zip) 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"] rtpsnoorepugin com/2014I011 tWoceess-colrbax-piuleY 22 sens Weorabress Colarbox Pugin | Noo's Plugin YouTube Video in Lightbox [wp_colorbox_media url="http: //www. youtube. com/embed/nbp3Ra3Yp74" type="youtube" hyperlink="click here to open youtube video" ] rtpsnoorepugin com/2014I011 tWoceess-colrbax-piuleY 3m sens Worabress Colarbox Pugin | Noo’'s Pugin Vimeo Video in Lightbox [wp_colorbox_media \ttp: //player.vimeo.com/video/1084537" "vimeo" hyperlink="click here to open vimeo External Page in Lightbox [wp_colorbox_media url="http://wikipedia.com" type="iframe" hyperlink="click here to open external page"] rtpsnoorepugin com/2014I011 tWoceess-colrbax-piuleY 42 sens Weorabress Colarbox Pugin | Noo’'s Pugin Where 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:
image icons. REPLY ‘6. Mayra AUGUST 19, 2014 AT 2:03 PM Hello. I really love this plugin and was wondering if it's possible to use it with a powerpoint presentation. REPLY © wpguide AUGUST 19, 2014 AT 4:41 P @Mayra, can you view that file in your browser without downloading? REPLY © mayramsoto AUGUST 20, 2014 AT 4:27 AM Itried, but I can’t view it without downloading. © wpguide AUGUST 20, 2014 AT 9:46 AM @Mayra, if the browser opens the download popup it will be the same for lightbox as well. © Mayra AUGUST 20, 2014 AT 12:44 PM Tl give ita try, thank you @ "7. Ida AUGUST 18, 2014 AT 6:01 PM Hii, 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. rtpsnoorepugin com/2014I011 tWoceess-colrbax-piuleY 182 sens Worabress Colarbox Pugin | Noo’'s Pugin 8 REPLY wpguide AUGUST 13, 2014 AT 6:41 PM @lda, some parts of your last comment were automatically formatted by WordPress. I am not sure why. had to remove it so the page does not render with broken HTML. Can you please submit it as code? REPLY ° Ida PTEMBER 2, 2014 AT 6:53 PM Hi, I figured out how to do. Thanks anyway. REPLY Ida AUGUST 13, 2014 AT 6:10 PM Hi, Iwould 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. REPLY Ida AUGUST 11, 2014 AT 9:50 AM Hi, Ijust 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" ] Treally 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 rtpsnoorepugin com/2014I011 tWoceess-colrbax-piuleY 192 sens Worabress Colarbox Pugin | Noo’'s Pugin 41. REPLY Tim Lambertus AUGUST 9, 2014 AT 6:03 AM 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! REPLY © Tim Lambertus AUGUST 16, 2014 AT 4:42 AM 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. REPLY © wpguide AUGUST 19, 2014 AT 4:40 @Tim, you will need to apply custom CSS on it. Please provide a link to the page so I can take a look. Alex AUGUST 1, 2014 AT 6:51 AM Is there an easy way to integrate Gallery through WP Colorbox? REPLY © wpguide AUGUST 1, 2014 AT 9:13 AM @Alex, which gallery are you referring to? REPLY . ver Zamora JULY 19, 2014 AT 6:30 AM 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 REPLY © wpguide JULY 19, 2014 AT 9:15 AM ‘@ver, you can specify the image url in the hyperlink parameter of the shortcode. For example: rtpsnoorepugin com/2014I011 tWoceess-colrbax-piuleY zone sais Wioreeress Calortox gin Nea’ Plugin [wp_colorbox_media http://www. youtube. com/embed/nbp3Ra3Yp74" type="youtube" hyperlink="http: //example.com/wp- content/uploads/image/thumbnail. jpg] REPLY ‘4. Thomas JULY 14, 2014 AT 10:59 PM 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 ?? REPLY © wpguide JULY 15,2014 AT 11:42 AM @Thomas, currently it only works with a text or image. REPLY © Thomas JULY 15, 2014 AT 8:33 PM ok thanks it’s working great with an image © there is a way to have an autoplay for the youtube video ? $5. Warren JULY 3, 2014 AT 1:16 AM Hi How do I get an htm! file to open in the lightbox? Thanks Warren REPLY © Cybertech Systems (@CybertechSys) SEPTEMBER 27, 2014 AT 4:56 PM Easy, try this [wp_colorbox_media url="http://your web address. com/htmlFilename.html" type="iframe" hyperlink="Any Link description of your choice] REPLY 6. chris JUNE 29, 2014 AT 1:20 PM how to add text ? Inpinoorspugincom/2014/01t thvorapress-colorbox- plugin 2m sens Worabress Colarbox Pugin | Noo’'s Pugin REPLY © wpguide JUNE 30, 2014 AT 10:43 AM @chris, Where do you want to add text? REPLY 47. Glamorous Bite JUNE 25, 2014 AT 7:38 AM Nice features for images. REPLY BLOG AT WORDPRESS.COM. | THE HEMINGWAY REWRITTEN THEME. © Follow Follow “Noor's Plugin” Build a website with WordPress.com rtpsnoorepugin com/2014I011 tWoceess-colrbax-piuleY

You might also like