{"id":23507,"date":"2020-05-15T21:14:13","date_gmt":"2020-05-15T13:14:13","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23507"},"modified":"2022-09-02T18:14:29","modified_gmt":"2022-09-02T10:14:29","slug":"responsive-lightbox-library","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/","title":{"rendered":"10+ Best Free JavaScript Lightbox Libraries"},"content":{"rendered":"<p>Lightbox is one popular way to <strong>overlay images on the web<\/strong>. When you click on an image, the Lightbox pops up with some form of animation and dims the background so your focus is on the image itself. The image is also larger in scale. Most popular Lightbox JavaScript libraries that we have known for years  let you do this well on a desktop, but not so much on mobile platforms.<\/p>\n<p>Neglecting this and the need for responsiveness is not a good idea nowadays, which is why this collection of 15 responsive Lightbox libraries must be checked out.<\/p>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/photoswipe.com\/\">PhotoSwipe<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-photoswipe.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-photoswipe.jpg?newedit\" width=\"700\" alt=\"PhotoSwipe\" height=\"380\"><\/figure>\n<p><strong>PhotoSwipe<\/strong> is by far my favorite ligthbox plugin. It\u2019s light, touch-enabled, and most importantly modular which allows me to ditch a few parts that is not needed. It runs nicely in mobile browsers. You can swipe through images with your fingers as you would in a native app, and the transition runs really smooth.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: None<\/li>\n<li><strong>Browser Support<\/strong>: IE8+, Chrome, Firefox, Safari, Opera, and a couple of mobile browsers.<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/dimsemenov.com\/plugins\/magnific-popup\/\">MagnificPopup<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-magnificpopup.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-magnificpopup.gif\" alt=\"MagnificPopup\" width=\"800\" height=\"531\"><\/figure>\n<p><strong>MagnificPopup<\/strong> is another lightbox plugin, developed by the same person that gave us PhotoSwipe, Dmitry Semenov. It comes in the form of a jQuery\/Zepto plugin, and also brings missing capabilities in PhotoSwipe such as support for Video, Map, and Ajax content. This is a great alternative for those who prefer having more features at hand.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery 1.9.1+, or Zepto.js<\/li>\n<li><strong>Browser Support<\/strong>: IE7 (partially), IE8+, Chrome, Firefox, Safari, and Opera.<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/brutaldesign.github.io\/swipebox\/\">SwipeBox<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-swipebox.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-swipebox.gif\" alt=\"SwipeBox\" width=\"800\" height=\"531\"><\/figure>\n<p><strong>Swipebox<\/strong> is a jQuery plugin with touch gesture support for mobile platform. It also supports videos from Youtube and Vimeo aside from images. Swipebox is also downright easy to implement, and has a handful of options to customize its behavior. I think Swipebox is a great lightbox plugin for JavaScript noobs.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>Browser Support<\/strong>: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android, and Windows Phone.<\/li>\n<li><strong>License<\/strong>: <em>Undefined<\/em><\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ilightbox.net\/\">iLightbox<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-ilightbox.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-ilightbox.gif\" alt=\"iLightbox\" width=\"800\" height=\"531\"><\/figure>\n<p><strong>iLighbox<\/strong> is a jQuery lightbox plugins with a wide range support of media types: including videos, Flash \/ SWF, Ajax content, iframe and  maps. This plugin also adds social media buttons on top of the media, allowing your users to share it to Facebook, Twitter or Reddit. Also check out <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ilightbox.net\/#advanced_mixed\">the advanced section<\/a> to see how iLightbox can be applied in different scenarios.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>Browser Support<\/strong>: IE7+, Chrome, Firefox, Safari, and Opera<\/li>\n<li><strong>License<\/strong>: <em>Undefined<\/em><\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/ashleydw\/lightbox\">Lightbox for Bootstrap<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-bootstrap.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-bootstrap.gif\" alt=\"Lightbox for Bootstrap\" width=\"800\" height=\"531\"><\/figure>\n<p><strong>Lightbox<\/strong> is one of the glaringly missing pieces from Bootstrap. This plugin fixes that. If you are using Bootstrap, I highly recommend using this library. The plugin is well-integrated with Bootstrap\u2019s code-base.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/javascript\/#modals\">Bootstrap Modal<\/a><\/li>\n<li><strong>Browser Support<\/strong>: IE8+, Chrome, Firefox, Safari, and Opera<\/li>\n<li><strong>License<\/strong>: GNU license<\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.jqueryscript.net\/lightbox\/Responsive-Flexible-jQuery-Lightbox-Plugin-Nivo-Lightbox.html\">Nivo Lightbox<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-nivo.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-nivo.gif\" alt=\"Nivo Lightbox\" width=\"800\" height=\"531\"><\/figure>\n<p><strong>Nivo Lightbox<\/strong> is a flexible lightbox plugin. Several options are included to change the appearance into the way you like it to appear, such as changing the theme, the transition effect, and switching the navigation.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>Browser Support<\/strong>: IE9+, Chrome, Firefox, Safari, and Opera<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/osvaldas.info\/image-lightbox-responsive-touch-friendly\">ImageLightbox<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-imagelightbox.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-imagelightbox.gif\" alt=\"ImageLightbox\" width=\"800\" height=\"531\"><\/figure>\n<p><strong>ImageLightbox<\/strong> is a lightbox plugin without the bloat. It is built specially for image hence the name given \u2014 no video or other media type supported. It also does not require extraneous HTML markup; the <code>&lt;img&gt;<\/code> element is sufficient. The plugin just works.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>Browser Support<\/strong>: IE9+, Chrome, Firefox, Safari, and Opera<\/li>\n<li><strong>License<\/strong>: <em>Undefined<\/em><\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ionicabizau.github.io\/mini-lightbox\/\">Mini Lightbox<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-mini.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-mini.gif\" alt=\"Mini Lightbox\" width=\"800\" height=\"531\"><\/figure>\n<p>Another lightbox plugin with none of the bloat. The library is only 2kb, and works only with images. It\u2019s the perfect plugin if you only designate for the latest browser and do not need to overlay other media types like videos.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: None<\/li>\n<li><strong>Browser Support<\/strong>: IE10+, Chrome, Firefox, Safari, and Opera<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/cbopp-art\/lightcase\">LightCase<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-lightcase.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-lightcase.gif\" alt=\"LightCase\" width=\"800\" height=\"531\"><\/figure>\n<p>Lightcase is a lovely lightbox plugin. It comes with several animations that makes user interaction come alive, like fade, elastic zoom and scrolling. Furthermore, it also supports various types of media including Youtube embed, HTML videos, SWF and input forms. The plugin also properly handles media cannot be reached or found errors<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>Browser Support<\/strong>: IE9+, Chrome, Firefox, Safari, and Opera<\/li>\n<li><strong>License<\/strong>: GPL license<\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/noelboss.github.io\/featherlight\/\">FeatherLight<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-featherlight.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-featherlight.gif\" alt=\"FeatherLight\" width=\"800\" height=\"531\"><\/figure>\n<p>The 6kb <strong>Featherlight<\/strong> is a bare plugin for savvy developer and carries only the essentials. If you need, for example, to group image lightbox in a gallery, you can include <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/noelboss.github.io\/featherlight\/gallery.html\">the gallery extension<\/a>. You can also develop your own extension for this plugin to fit in your project needs.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>Browser Support<\/strong>: IE8+, Chrome, Firefox, Safari, and Opera<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/methodev\/lightlayer\">LightLayer<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-lightlayer.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-lightlayer.gif\" alt=\"LightLayer\" width=\"800\" height=\"531\"><\/figure>\n<p>LightLayer is an easy to use lightbox plugin. It has a handful of options, custom JavaScript methods, and custom events. the plugin works with images, videos, maps, and external content. What\u2019s more can we ask.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>Browser Support<\/strong>: IE9+, Chrome, Firefox, Safari, and Opera<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.lightgalleryjs.com\/\">LightGallery<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-lightgallery.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-lightgallery.gif\" alt=\"LightGallery\" width=\"800\" height=\"531\"><\/figure>\n<p><strong>LightGallery<\/strong>, another lightbox plugin with a lot of features added. It comes with more than 20 options to customize the tiniest of details of the lightbox.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>Browser Support<\/strong>: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android, and Windows Phone<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/terrymun.github.io\/Fluidbox\/\">FluidBox<\/a><\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-fluidbox.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-fluidbox.gif\" alt=\"FluidBox\" width=\"800\" height=\"531\"><\/figure>\n<p><strong>Fluidbox<\/strong> is an image lightbox plugin that is inspired from Medium. It works with images under various circumstances including floating image, image with <code>absolute<\/code> position, images that have border and padding, and galleries. Check out <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medium.com\/coding-design\/presenting-fluidbox-9c7fe9db92c7\">how it was built<\/a>. If you need a WordPress plugin, there is <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/peiche\/fluidbox-wp\">one<\/a>.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>Browser Support<\/strong>: IE9+, Chrome, Firefox, Safari, Opera<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<h2>StripJS<\/h2>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-stripjs.jpg?newedit\" data-src-alt=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-stripjs.gif\" alt=\"StripJS\" width=\"800\" height=\"531\"><\/figure>\n<p><strong>StripJS<\/strong> is a unique lightbox plugin. Rather than overlaying the image, the plugin slides the images in from the side instead, so that it won\u2019t block the whole content. StripJS supports both image and video.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>Browser Support<\/strong>: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+, and Android 3+<\/li>\n<li><strong>License<\/strong>: Creative Commons BY-NC-ND 3.0 license<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Lightbox is one popular way to overlay images on the web. When you click on an image, the Lightbox pops up with some form of animation and dims the background so your focus is on the image itself. The image is also larger in scale. Most popular Lightbox JavaScript libraries that we have known for&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[4646,2066],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>10+ Best Free JavaScript Lightbox Libraries - Hongkiat<\/title>\n<meta name=\"description\" content=\"Lightbox is one popular way to overlay images on the web. When you click on an image, the Lightbox pops up with some form of animation and dims the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10+ Best Free JavaScript Lightbox Libraries\" \/>\n<meta property=\"og:description\" content=\"Lightbox is one popular way to overlay images on the web. When you click on an image, the Lightbox pops up with some form of animation and dims the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-15T13:14:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-02T10:14:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-photoswipe.jpg?newedit\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"10+ Best Free JavaScript Lightbox Libraries\",\"datePublished\":\"2020-05-15T13:14:13+00:00\",\"dateModified\":\"2022-09-02T10:14:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/\"},\"wordCount\":939,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-lightbox-library\\\/lightbox-photoswipe.jpg?newedit\",\"keywords\":[\"Mobile Website Design &amp; Dev\",\"Responsive Web Design\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/\",\"name\":\"10+ Best Free JavaScript Lightbox Libraries - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-lightbox-library\\\/lightbox-photoswipe.jpg?newedit\",\"datePublished\":\"2020-05-15T13:14:13+00:00\",\"dateModified\":\"2022-09-02T10:14:29+00:00\",\"description\":\"Lightbox is one popular way to overlay images on the web. When you click on an image, the Lightbox pops up with some form of animation and dims the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-lightbox-library\\\/lightbox-photoswipe.jpg?newedit\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/responsive-lightbox-library\\\/lightbox-photoswipe.jpg?newedit\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/responsive-lightbox-library\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10+ Best Free JavaScript Lightbox Libraries\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10+ Best Free JavaScript Lightbox Libraries - Hongkiat","description":"Lightbox is one popular way to overlay images on the web. When you click on an image, the Lightbox pops up with some form of animation and dims the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/","og_locale":"en_US","og_type":"article","og_title":"10+ Best Free JavaScript Lightbox Libraries","og_description":"Lightbox is one popular way to overlay images on the web. When you click on an image, the Lightbox pops up with some form of animation and dims the","og_url":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-05-15T13:14:13+00:00","article_modified_time":"2022-09-02T10:14:29+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-photoswipe.jpg?newedit","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"10+ Best Free JavaScript Lightbox Libraries","datePublished":"2020-05-15T13:14:13+00:00","dateModified":"2022-09-02T10:14:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/"},"wordCount":939,"commentCount":6,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-photoswipe.jpg?newedit","keywords":["Mobile Website Design &amp; Dev","Responsive Web Design"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/","url":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/","name":"10+ Best Free JavaScript Lightbox Libraries - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-photoswipe.jpg?newedit","datePublished":"2020-05-15T13:14:13+00:00","dateModified":"2022-09-02T10:14:29+00:00","description":"Lightbox is one popular way to overlay images on the web. When you click on an image, the Lightbox pops up with some form of animation and dims the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-photoswipe.jpg?newedit","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/responsive-lightbox-library\/lightbox-photoswipe.jpg?newedit"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/responsive-lightbox-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10+ Best Free JavaScript Lightbox Libraries"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-679","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23507"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23507\/revisions"}],"predecessor-version":[{"id":62177,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23507\/revisions\/62177"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23507"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}