{"id":37,"date":"2014-01-11T00:19:21","date_gmt":"2014-01-10T13:19:21","guid":{"rendered":"https:\/\/noorsplugin.com\/\/?p=37"},"modified":"2025-08-16T11:21:41","modified_gmt":"2025-08-16T01:21:41","slug":"wordpress-colorbox-plugin","status":"publish","type":"post","link":"https:\/\/noorsplugin.com\/wordpress-colorbox-plugin\/","title":{"rendered":"WordPress Colorbox Plugin: A Colorbox Lightbox Plugin for WordPress"},"content":{"rendered":"\n<p>WordPress Colorbox plugin enables lightbox functionality on your WordPress website using Colorbox. It allows you to pop up an image, YouTube video, Vimeo video, external page or custom inline content beautifully.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Colorbox is a jQuery lightbox script&nbsp;developed by Jack Moore. This plugin makes this customizable and lightweight lightbox script available for WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2022\/07\/wordpress-colorbox-lightbox-plugin.webp\" alt=\"wp colorbox wordpress plugin\" class=\"wp-image-9919\" srcset=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2022\/07\/wordpress-colorbox-lightbox-plugin.webp 1200w, https:\/\/noorsplugin.com\/wp-content\/uploads\/2022\/07\/wordpress-colorbox-lightbox-plugin-300x169.webp 300w, https:\/\/noorsplugin.com\/wp-content\/uploads\/2022\/07\/wordpress-colorbox-lightbox-plugin-1024x576.webp 1024w, https:\/\/noorsplugin.com\/wp-content\/uploads\/2022\/07\/wordpress-colorbox-lightbox-plugin-768x432.webp 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress Colorbox Plugin Installation<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"WordPress Colorbox Plugin -- A jQuery Lightbox Plugin for WordPress\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/2osxJcPTS1E?rel=0\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Login to your WordPress admin dashboard<\/li>\n\n\n\n<li>Go to <strong>Plugins-&gt;Add New Plugin<\/strong><\/li>\n\n\n\n<li>Enter <strong>WP Colorbox naa986<\/strong> in the search box<\/li>\n\n\n\n<li>Once you find the plugin hit the install button<\/li>\n<\/ul>\n\n\n\n<p>The plugin can also be downloaded from here: <a href=\"https:\/\/wordpress.org\/plugins\/wp-colorbox\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/wordpress.org\/plugins\/wp-colorbox\/<\/a>. For a manual installation go to <strong>Plugins &gt; Add New Plugin &gt; Upload Plugin<\/strong> and select the zip file that you downloaded.<\/p>\n\n\n\n<div itemscope itemtype=\"https:\/\/schema.org\/Product\">\n  <meta itemprop=\"name\" content=\"WP Colorbox\" \/>\n\n  <meta itemprop=\"image\" content=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2025\/07\/wp-colorbox-plugin-icon.png\" \/>\n\n  <meta itemprop=\"description\" content=\"A free WordPress plugin for adding Colorbox lightbox effect in WordPress.\" \/>\n\n  <meta itemprop=\"sku\" content=\"wp-colorbox\" \/>\n  <meta itemprop=\"brand\" content=\"NoorsPlugin\" \/>\n  <meta itemprop=\"isAccessibleForFree\" content=\"true\" \/>\n\n  <div itemprop=\"offers\" itemscope itemtype=\"https:\/\/schema.org\/Offer\">\n    <meta itemprop=\"priceCurrency\" content=\"USD\" \/>\n    <meta itemprop=\"price\" content=\"0.00\" \/>\n    <link itemprop=\"availability\" href=\"https:\/\/schema.org\/InStock\" \/>\n    <meta itemprop=\"url\" content=\"https:\/\/noorsplugin.com\/wordpress-colorbox-plugin\/\" \/>\n    <meta itemprop=\"itemCondition\" content=\"https:\/\/schema.org\/NewCondition\" \/>\n    <meta itemprop=\"seller\" content=\"NoorsPlugin\" \/>\n  <\/div>\n\n  <div itemprop=\"additionalProperty\" itemscope itemtype=\"https:\/\/schema.org\/PropertyValue\">\n    <meta itemprop=\"name\" content=\"Platform\" \/>\n    <meta itemprop=\"value\" content=\"WordPress\" \/>\n  <\/div>\n\n  <div itemprop=\"additionalProperty\" itemscope itemtype=\"https:\/\/schema.org\/PropertyValue\">\n    <meta itemprop=\"name\" content=\"Version\" \/>\n    <meta itemprop=\"value\" content=\"1.1.5\" \/>\n  <\/div>\n\n  <div itemprop=\"additionalProperty\" itemscope itemtype=\"https:\/\/schema.org\/PropertyValue\">\n    <meta itemprop=\"name\" content=\"File Format\" \/>\n    <meta itemprop=\"value\" content=\"application\/zip\" \/>\n  <\/div>\n\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress Colorbox Plugin Usage<\/h2>\n\n\n\n<p>You can pop up your media file from either a text or image (it&#8217;s called <strong>hyperlink<\/strong> in the shortcode) by using a shortcode.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Photo\/Image in Lightbox<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">[wp_colorbox_media url=\"http:\/\/example.com\/wp-content\/uploads\/image\/lightbox.jpg\" type=\"image\" hyperlink=\"click here to open image\"]<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"316\" src=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/01\/colorbox-image.jpg\" alt=\"screenshot of image in lightbox using WordPress ColorBox plugin\" class=\"wp-image-47\" srcset=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/01\/colorbox-image.jpg 500w, https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/01\/colorbox-image-300x190.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">YouTube Video in Lightbox<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">[wp_colorbox_media url=\"http:\/\/www.youtube.com\/embed\/nbp3Ra3Yp74\" type=\"youtube\" hyperlink=\"click here to open youtube video\"]<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"370\" src=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/01\/colorbox-youtube-video.jpg\" alt=\"screenshot of YouTube video in lightbox using WordPress ColorBox plugin\" class=\"wp-image-48\" srcset=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/01\/colorbox-youtube-video.jpg 500w, https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/01\/colorbox-youtube-video-300x222.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<p>In order to enable autoplay on a YouTube video you can add &#8220;autoplay=1&#8221; to the URL.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[wp_colorbox_media url=\"http:\/\/www.youtube.com\/embed\/nbp3Ra3Yp74?autoplay=1\" type=\"youtube\" hyperlink=\"click here to open youtube video\"]<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Vimeo Video in Lightbox<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">[wp_colorbox_media url=\"http:\/\/player.vimeo.com\/video\/1084537\" type=\"vimeo\" hyperlink=\"click here to open vimeo video\"]<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"382\" src=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/01\/colorbox-vimeo-video.jpg\" alt=\"screenshot of vimeo video in lightbox using WordPress ColorBox plugin\" class=\"wp-image-49\" srcset=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/01\/colorbox-vimeo-video.jpg 500w, https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/01\/colorbox-vimeo-video-300x229.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">External Page in Lightbox<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">[wp_colorbox_media url=\"http:\/\/wikipedia.com\" type=\"iframe\" hyperlink=\"click here to open external page\"]<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"264\" src=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/07\/colorbox-external-page.png\" alt=\"screenshot of external page in lightbox using WordPress ColorBox plugin\" class=\"wp-image-72\" srcset=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/07\/colorbox-external-page.png 500w, https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/07\/colorbox-external-page-300x158.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Inline HTML in Lightbox<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">[wp_colorbox_media url=\"#inline_content\" type=\"inline\" hyperlink=\"click here to open inline HTML\"]<\/pre>\n\n\n\n<p>Now switch to &#8220;Text&#8221; 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:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"545\" height=\"90\" src=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/07\/colorbox-inline-html.png\" alt=\"screenshot of inline html in lightbox using WordPress ColorBox plugin\" class=\"wp-image-70\" srcset=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/07\/colorbox-inline-html.png 545w, https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/07\/colorbox-inline-html-300x50.png 300w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><\/figure>\n\n\n\n<p>When you click the text link your custom HTML content will pop up in lightbox.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"93\" src=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/07\/colorbox-html-popup.png\" alt=\"screenshot of custom HTML popup in lightbox using WordPress ColorBox plugin\" class=\"wp-image-74\" srcset=\"https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/07\/colorbox-html-popup.png 500w, https:\/\/noorsplugin.com\/wp-content\/uploads\/2014\/07\/colorbox-html-popup-300x56.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Using Thumbnail as Hyperlink<\/h3>\n\n\n\n<p>To trigger lightbox from a thumbnail image you need to specify your thumbnail image URL in the hyperlink parameter. For example:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[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\"]<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Alternate Text for an Image<\/h3>\n\n\n\n<p>If you have a&nbsp;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:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[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\"]<\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress Colorbox plugin enables lightbox functionality on your WordPress website using Colorbox. It allows you to pop up an image, YouTube video, Vimeo video, external page or custom inline content beautifully.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-37","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/noorsplugin.com\/wp-json\/wp\/v2\/posts\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/noorsplugin.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/noorsplugin.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/noorsplugin.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/noorsplugin.com\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":34,"href":"https:\/\/noorsplugin.com\/wp-json\/wp\/v2\/posts\/37\/revisions"}],"predecessor-version":[{"id":12845,"href":"https:\/\/noorsplugin.com\/wp-json\/wp\/v2\/posts\/37\/revisions\/12845"}],"wp:attachment":[{"href":"https:\/\/noorsplugin.com\/wp-json\/wp\/v2\/media?parent=37"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/noorsplugin.com\/wp-json\/wp\/v2\/categories?post=37"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/noorsplugin.com\/wp-json\/wp\/v2\/tags?post=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}