{"id":769,"date":"2008-04-03T17:46:17","date_gmt":"2008-04-03T15:46:17","guid":{"rendered":"http:\/\/planetozh.com\/blog\/2008\/04\/the-lightbox-clone-matrix-compare-30-lightbox-scripts\/"},"modified":"2008-04-06T15:50:39","modified_gmt":"2008-04-06T13:50:39","slug":"the-lightbox-clone-matrix-compare-30-lightbox-scripts","status":"publish","type":"post","link":"https:\/\/planetozh.com\/blog\/2008\/04\/the-lightbox-clone-matrix-compare-30-lightbox-scripts\/","title":{"rendered":"The Lightbox Clones Matrix: Compare 30+ Lightbox Scripts"},"content":{"rendered":"<p>Early 2006, a cool guy named Lokesh Dhakar introduced <a href=\"http:\/\/www.lokeshdhakar.com\/projects\/lightbox\/\">Lightbox<\/a>, a unobtrusive script used to display large images using modal dialogs over a black faded background. A great script, really. Since, every once in a while, someone comes up with their own take at this concept, using this or that javascript library (jQuery, Prototype, Mootools, YUI, you name it) and supporting various types of objects: images, flash objects, videos, inline HTML content, iframes, content fetched via an Ajax call, <em>etc<\/em>&#8230;<\/p>\n<p>Recently, thinking about ditching Prototype here on this blog, I wondered if there was any cool Lightbox clone for jQuery. Man, there are dozens of them. How am I supposed to chose the one that will suit my needs? I started to write down a few URLs and comments, then it occurred to me that I could make something cooler. A few coding later, here is the <a href=\"http:\/\/planetozh.com\/projects\/lightbox-clones\/\">Lightbox Clones Matrix<\/a>!<\/p>\n<p><a href=\"http:\/\/planetozh.com\/projects\/lightbox-clones\/\"><img decoding=\"async\" src=\"http:\/\/planetozh.com\/blog\/wp-content\/uploads\/2008\/04\/lightbox_clones.jpg\" alt=\"Lightbox Clones Matrix\" class=\"imgcenter\"\/><\/a><\/p>\n<p>I&#39;ve listed more than 30 scripts, detailing for each one:<\/p>\n<ul>\n<li>Its javascript size (not considering CSS, images or anything else)<\/li>\n<li>The library needed, if any, mentionning its javascript size. I opted to compare uncompressed javascript file sizes, as it (sorts of) reflects the complexity and\/or power of the library, regardless of how packed\/minified\/obfuscated it usually ships.<\/li>\n<li>The total javascript size. This data won&#39;t interest someone already using a javascript library on their site, obviously.<\/li>\n<li>Image support<\/li>\n<li>The ability to group images into a single collection, allowing for easily browsing through images within the same overlay<\/li>\n<li>Any other common object supported: inline content (ie content already existing in the page, but typically hidden), iframe, content fetched by an Ajax call, video, Flash.<\/li>\n<\/ul>\n<p>To make things cuter and quicker to read, everything is summarized by a row of pretty icons (mostly coming from the wonderful <a href=\"http:\/\/www.famfamfam.com\/lab\/icons\/silk\/\">Silk set<\/a>)<\/p>\n<p><img src='http:\/\/planetozh.com\/blog\/wp-content\/uploads\/2008\/04\/lightbox_clones_matrix.jpg' alt='Lightbox Clones Matrix: the comparisons' class=\"imgcenter\"\/><\/p>\n<p>Of course, what would be the point of it if you couldn&#39;t quickly restrict you search to a few criteria? There&#39;s a handy filter set to make your selection easier. All the options are logical &quot;OR&quot;, ie selecting several features will list scripts with at least one of them. Note that you can shrink the filter box if you don&#39;t need it.<\/p>\n<p><img src='http:\/\/planetozh.com\/blog\/wp-content\/uploads\/2008\/04\/lightbox_clones_filter.jpg' alt='Lightbox Clones Matrix: filters' \/><\/p>\n<p>Overall I had some fun making the <a href=\"http:\/\/planetozh.com\/projects\/lightbox-clones\/\">Lightbox Clones Matrix<\/a>. I hope it will be actually of any use to someone. Bookmark it, just in case you need it in the future! ;)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Early 2006, a cool guy named Lokesh Dhakar introduced Lightbox, a unobtrusive script used to display large images using modal dialogs over a black faded background. A great script, really. Since, every once in a while, someone comes up with their own take at this concept, using this or that javascript library (jQuery, Prototype, Mootools, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[22,7,290,288,289],"class_list":["post-769","post","type-post","status-publish","format-standard","hentry","category-published","tag-images","tag-javascript","tag-jquery","tag-lightbox","tag-matrix"],"_links":{"self":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/comments?post=769"}],"version-history":[{"count":0,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/769\/revisions"}],"wp:attachment":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/media?parent=769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/categories?post=769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/tags?post=769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}