{"id":117680,"date":"2020-02-24T03:22:43","date_gmt":"2020-02-24T03:22:43","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/joli-clear-lightbox\/"},"modified":"2022-03-22T13:46:54","modified_gmt":"2022-03-22T13:46:54","slug":"joli-clear-lightbox","status":"publish","type":"plugin","link":"https:\/\/uk.wordpress.org\/plugins\/joli-clear-lightbox\/","author":17507956,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.3","stable_tag":"1.0.3","tested":"5.9.13","requires":"4.0","requires_php":"5.6","requires_plugins":"","header_name":"Joli CLEAR Lightbox","header_author":"WPJoli","header_description":"Supercharge your image & gallery links with a <strong>C<\/strong>ustomizable <strong>L<\/strong>ightweight <strong>E<\/strong>legant <strong>A<\/strong>ccessible <strong>R<\/strong>esponsive Lightbox.","assets_banners_color":"71385f","last_updated":"2022-03-22 13:46:54","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wpjoli.com\/joli-clear-lightbox\/","header_author_uri":"https:\/\/wpjoli.com","rating":5,"author_block_rating":0,"active_installs":0,"downloads":1403,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"wpjoli","date":"2020-02-24 03:22:16"},"1.0.1":{"tag":"1.0.1","author":"wpjoli","date":"2020-12-09 09:56:46"},"1.0.2":{"tag":"1.0.2","author":"wpjoli","date":"2021-02-24 09:29:02"},"1.0.3":{"tag":"1.0.3","author":"wpjoli","date":"2022-03-22 13:46:54"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":"1"},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2249087,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":2249087,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":2249087,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":2249087,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1","1.0.2","1.0.3"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":2249087,"resolution":"1","location":"assets","locale":""},"screenshot-10.jpg":{"filename":"screenshot-10.jpg","revision":2249087,"resolution":"10","location":"assets","locale":""},"screenshot-11.jpg":{"filename":"screenshot-11.jpg","revision":2249087,"resolution":"11","location":"assets","locale":""},"screenshot-12.jpg":{"filename":"screenshot-12.jpg","revision":2249087,"resolution":"12","location":"assets","locale":""},"screenshot-13.jpg":{"filename":"screenshot-13.jpg","revision":2249087,"resolution":"13","location":"assets","locale":""},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":2249087,"resolution":"2","location":"assets","locale":""},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":2249087,"resolution":"3","location":"assets","locale":""},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":2249087,"resolution":"4","location":"assets","locale":""},"screenshot-5.jpg":{"filename":"screenshot-5.jpg","revision":2249087,"resolution":"5","location":"assets","locale":""},"screenshot-6.jpg":{"filename":"screenshot-6.jpg","revision":2249087,"resolution":"6","location":"assets","locale":""},"screenshot-7.jpg":{"filename":"screenshot-7.jpg","revision":2249087,"resolution":"7","location":"assets","locale":""},"screenshot-8.jpg":{"filename":"screenshot-8.jpg","revision":2249087,"resolution":"8","location":"assets","locale":""},"screenshot-9.jpg":{"filename":"screenshot-9.jpg","revision":2249087,"resolution":"9","location":"assets","locale":""}},"screenshots":{"1":"General settings","2":"Appearance settings","3":"Styles settings","4":"Dark scheme - No Padding","5":"Dark scheme - No Padding (Mobile)","6":"Dark scheme - Padding 50px - Border enabled","7":"Dark scheme - Padding 50px - Border enabled (Mobile)","8":"Swipe gesture to close (Mobile)","9":"Light scheme - Padding 50px","10":"Light scheme - Padding 50px (Mobile)","11":"Dark scheme - 50% Transparent background - Padding 50px - Border enabled","12":"Light scheme - 50% Transparent background - Padding 50px - Border enabled (Mobile)","13":"Light scheme - Transparent background - Padding 50px - Border enabled"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[1349,210,133,237,215],"plugin_category":[50,55],"plugin_contributors":[176630],"plugin_business_model":[],"class_list":["post-117680","plugin","type-plugin","status-publish","hentry","plugin_tags-fancybox","plugin_tags-gallery","plugin_tags-image","plugin_tags-lightbox","plugin_tags-photo","plugin_category-media","plugin_category-seo-and-marketing","plugin_contributors-wpjoli","plugin_committers-wpjoli"],"banners":{"banner":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/banner-772x250.png?rev=2249087","banner_2x":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/banner-1544x500.png?rev=2249087","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/icon-128x128.png?rev=2249087","icon_2x":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/icon-256x256.png?rev=2249087","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-1.jpg?rev=2249087","caption":"General settings"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-2.jpg?rev=2249087","caption":"Appearance settings"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-3.jpg?rev=2249087","caption":"Styles settings"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-4.jpg?rev=2249087","caption":"Dark scheme - No Padding"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-5.jpg?rev=2249087","caption":"Dark scheme - No Padding (Mobile)"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-6.jpg?rev=2249087","caption":"Dark scheme - Padding 50px - Border enabled"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-7.jpg?rev=2249087","caption":"Dark scheme - Padding 50px - Border enabled (Mobile)"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-8.jpg?rev=2249087","caption":"Swipe gesture to close (Mobile)"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-9.jpg?rev=2249087","caption":"Light scheme - Padding 50px"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-10.jpg?rev=2249087","caption":"Light scheme - Padding 50px (Mobile)"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-11.jpg?rev=2249087","caption":"Dark scheme - 50% Transparent background - Padding 50px - Border enabled"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-12.jpg?rev=2249087","caption":"Light scheme - 50% Transparent background - Padding 50px - Border enabled (Mobile)"},{"src":"https:\/\/ps.w.org\/joli-clear-lightbox\/assets\/screenshot-13.jpg?rev=2249087","caption":"Light scheme - Transparent background - Padding 50px - Border enabled"}],"raw_content":"<!--section=description-->\n<p>Supercharge your image &amp; gallery links by displaying a simple, modern, &amp; powerful lightbox.<\/p>\n\n<p>Works with native guttenberg image\/gallery blocks.<\/p>\n\n<h4>\u2b50 CHECK OUR OTHER PLUGINS<\/h4>\n\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/joli-faq-seo\/\">Joli FAQ SEO<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/joli-table-of-contents\/\">Joli Table Of Contents<\/a><\/li>\n<\/ul>\n\n<h3>Why should I choose Joli CLEAR Lightbox over another plugin ?<\/h3>\n\n<ul>\n<li>It does not rely on jQuery<\/li>\n<li>It does not load unless it has to.<\/li>\n<li>It has a very small footprint (only one minified .css file (4Ko) &amp; one minified .js file (8Ko)) <\/li>\n<li>Icons are made from pure CSS, there is no extra images loading.<\/li>\n<li>It does not provide a bunch of heavy unnecessary features.<\/li>\n<li>It loads after your content.<\/li>\n<li>It is meant to remain simple yet offering full customization.<\/li>\n<li>It has been made with love.<\/li>\n<\/ul>\n\n<p><strong>Dependency-free<\/strong>: No jQuery, only pure JavaScript.<\/p>\n\n<p><strong>Performance friendly<\/strong>: Styles\/Scripts DO NOT load if there are no image links within the content.<\/p>\n\n<p>Joli <strong>CLEAR<\/strong> Lightbox stands for the following:<\/p>\n\n<p><strong>C<\/strong>ustomizable<\/p>\n\n<p><strong>L<\/strong>ightweight<\/p>\n\n<p><strong>E<\/strong>legant<\/p>\n\n<p><strong>A<\/strong>ccessible<\/p>\n\n<p><strong>R<\/strong>esponsive.<\/p>\n\n<h4>Features<\/h4>\n\n<ul>\n<li>Display on posts or pages<\/li>\n<li>Customize media types (jpg, png, gif etc)<\/li>\n<li>Transparent GIF\/PNG support<\/li>\n<li>Fully responsive with swipe gestures.<\/li>\n<li>Dark &amp; Light color scheme<\/li>\n<li>Enable\/disable Loop over when the first\/last image has been reached<\/li>\n<li>Enable\/disable Esc key to close the lightbox<\/li>\n<li>Enable\/disable Arrow keys navigation<\/li>\n<li>Enable\/disable Close on click-away<\/li>\n<li>Display\/hide counter<\/li>\n<li>Display\/hide caption<\/li>\n<li>Customizable Vertical\/horisontal paddings<\/li>\n<li>Customizable background color<\/li>\n<li>Customizable background opacity<\/li>\n<li>Enable\/disable background blue<\/li>\n<li>Customizable navigation buttons height<\/li>\n<li>Enable\/disable frame border<\/li>\n<li>Developer-friendly. Hooks provided. (See below for details).<\/li>\n<\/ul>\n\n<h4>Pro Features<\/h4>\n\n<p><a href=\"https:\/\/wpjoli.com\/joli-clear-lightbox\/\" title=\"Joli CLEAR Lightbox Pro\">Get Joli CLEAR Lightbox Pro<\/a><\/p>\n\n<ul>\n<li>All of the free features.<\/li>\n<li>AmbiBackground\u2122: this unique feature makes the background have the same color tone as the current image. It provides a beautiful immersion to the viewer.<\/li>\n<li><strong>Custom Post Type<\/strong> Support.<\/li>\n<li><strong>14+ Themes Included<\/strong>.<\/li>\n<li>Customizable idle timer.<\/li>\n<li>Customizable Maximum image height.<\/li>\n<li>Customizable Maximum image width.<\/li>\n<li>Customizable Border width.<\/li>\n<li>Customizable Rounded corners radius.<\/li>\n<li>Customizable Border opacity.<\/li>\n<li>Enable\/disable Frame shadow.<\/li>\n<li>Customizable Image rounded corners radius.<\/li>\n<li>Force <strong>Enable\/Disable<\/strong> Lightbox per post settings.<\/li>\n<li>Override global theme per post settings.<\/li>\n<\/ul>\n\n<p><em>Supported post types:<\/em>\n* Post\n* Pages\n* Custom Post Type <strong><em>(Pro only)<\/em><\/strong><\/p>\n\n<h3>Hooks<\/h3>\n\n<p><strong>How to use ?<\/strong><\/p>\n\n<p>Copy &amp; paste the code examples below into your theme's functions.php file:<\/p>\n\n<h4>Filters<\/h4>\n\n<ul>\n<li><code>joli_clear_lightbox_disable_lightbox<\/code><\/li>\n<\/ul>\n\n<p>Globally disables Joli CLEAR Lightbox site-wide.<\/p>\n\n<pre><code>add_filter('joli_clear_lightbox_disable_lightbox', function(){ return true; });\n<\/code><\/pre>\n\n<ul>\n<li><code>joli_clear_lightbox_options<\/code><\/li>\n<\/ul>\n\n<p>Customizes the options programmatically.<\/p>\n\n<pre><code>add_filter('joli_clear_lightbox_options', 'my_custom_options_function');\n<\/code><\/pre>\n\n<h4>Actions<\/h4>\n\n<ul>\n<li><code>joli_clear_lightbox_before_rendering<\/code>\nDo something before rendering the lightbox<\/li>\n<\/ul>\n\n<!--section=installation-->\n<p>This section describes how to install the plugin and get it working.<\/p>\n\n<p>e.g.<\/p>\n\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/plugin-name<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress<\/li>\n<li>Use the Settings-&gt;Plugin Name screen to configure the plugin<\/li>\n<li>(Make your instructions match the desired user flow for activating and installing your plugin. Include any steps that might be needed for explanatory purposes)<\/li>\n<\/ol>\n\n<h3>INSTALLING FROM THE WORDPRESS ADMIN<\/h3>\n\n<ol>\n<li>Go to the \u201cPlugins &gt; Add New\u201d page.<\/li>\n<li>Type \u201cJoli CLEAR Lightbox\u201d in the search field<\/li>\n<li>Look for the \u201cJoli CLEAR Lightbox\u201d plugin in the search result and click on the \u201cInstall Now\u201d button, the installation process of plugin will begin.<\/li>\n<li>Click \u201cActivate\u201d when the installation is complete.<\/li>\n<\/ol>\n\n<h3>INSTALLING WITH THE ARCHIVE<\/h3>\n\n<p>Go to the page \u201cPlugins &gt; Add New\u201d on the WordPress control panel\nClick on the \u201cUpload Plugin\u201d button, the form to upload the archive will be opened.\nSelect the archive with the plugin and click \u201cInstall Now\u201d.\nClick on the \u201cActivate Plugin\u201d button when the installation is complete.<\/p>\n\n<h3>MANUAL INSTALLATION<\/h3>\n\n<p>Upload the folder joli-clear-lightbox to your site's plugin folder, usually it is \/wp-content\/plugins\/.\nGo to the page \u201cPlugins &gt; Add New\u201d on the WordPress control panel\nLook for \u201cJoli CLEAR Lightbox\u201d in the plugins list and click \u201cActivate\u201d.<\/p>\n\n<h3>HOW TO DISPLAY THE LIGHTBOX ON MY WEBSITE ?<\/h3>\n\n<p>While editing a post, Make sure images AND galleries are set to LINK TO \"Media file\".\nThe lightbox will then automatically appear upon clicking an image.<\/p>\n\n<h3>WHAT TO DO AFTER ACTIVATION ?<\/h3>\n\n<p>Go to the Settings page under the Menu \"Joli CLEAR Lightbox\", then configure the following basic options to get started:<\/p>\n\n<p><em>GENERAL &gt; THEME<\/em>\n1. Choose a color scheme (dark or light)<\/p>\n\n<p><em>GENERAL &gt; BEHAVIOUR<\/em>\n1. Enable\/disable the basic behaviour options.<\/p>\n\n<p><em>APPEARANCE &gt; DISPLAY<\/em>\n1. Choose whether to show caption\/counter or not.\n2. Adjust the padding to 0 if you wish to have the image go all the way to the edges of the viewport.<\/p>\n\n<!--section=faq-->\n<dl>\n<dt id='do%20i%20need%20coding%20skills%20to%20use%20joli%20clear%20lightbox%20%3F'><h3>Do I need coding skills to use Joli CLEAR Lightbox ?<\/h3><\/dt>\n<dd><p>Nope! Joli CLEAR Lightbox works out of the box. You only need to adjust some settings if you wish to customize the way it looks and behaves.<\/p><\/dd>\n<dt id='joli%20clear%20lightbox%20does%20not%20show%20up%20when%20i%20click%20on%20images%2C%20what%27s%20wrong%20%3F'><h3>Joli CLEAR Lightbox does not show up when I click on images, what's wrong ?<\/h3><\/dt>\n<dd><p>In order to view images in the lightbox, you need to make sur of the following:\nImages AND galleries <strong>MUST BE SET<\/strong> to LINK TO \"Media file\". Check the documentation within the plugin to find out how to do this.<\/p><\/dd>\n<dt id='will%20joli%20clear%20lightbox%20slow%20down%20my%20website%20%3F'><h3>Will Joli CLEAR Lightbox slow down my website ?<\/h3><\/dt>\n<dd><p>No it won't. Turns out Joli CLEAR Lightbox has been designed to be as light as light could be. Not only does it have a very small footprint (only one minified .css file &amp; one minified .js file), but it also does not need jQuery and does not load unless there are image links on your page. Also, all icons are made from CSS and that's even less ressources to load on your pages unlike other plugins!<\/p><\/dd>\n<dt id='is%20joli%20clear%20lightbox%20responsive%20%3F'><h3>Is Joli CLEAR Lightbox responsive ?<\/h3><\/dt>\n<dd><p>Yes! it is fully responsive and works with swipe gestures:\n- Swipe right or left for next\/previous picture.\n- Swipe up or down to exit the lightbox.<\/p><\/dd>\n<dt id='does%20joli%20clear%20lightbox%20work%20with%20other%20gallery%20plugins%20%3F'><h3>Does Joli CLEAR Lightbox work with other gallery plugins ?<\/h3><\/dt>\n<dd><p>It does. Although, the plugin you are using must provide a way to deactivate the built-in lightbox or it may create conflicts.\nFor example, it works with NextGEN Gallery (but you have to deactivate their built-in lightbox from their options panel).<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.3<\/h4>\n\n<ul>\n<li>WordPress 5.9.2 compatibility<\/li>\n<li>Security fix<\/li>\n<\/ul>\n\n<h4>1.0.2<\/h4>\n\n<ul>\n<li>Added background scroll lock<\/li>\n<li>Added image width\/height in the attributes.<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Improved admin scripts\/styles<\/li>\n<li>Refreshed settings panel<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Ultralight Lightbox for WordPress. Designed for Speed. No jQuery. Responsive with gestures. Simple, Elegant, yet highly Customizable.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/uk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/117680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/uk.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/uk.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=117680"}],"author":[{"embeddable":true,"href":"https:\/\/uk.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/wpjoli"}],"wp:attachment":[{"href":"https:\/\/uk.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=117680"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/uk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=117680"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/uk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=117680"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/uk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=117680"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/uk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=117680"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/uk.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=117680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}