
{"id":195,"date":"2007-01-31T15:54:01","date_gmt":"2007-01-31T14:54:01","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/2007\/01\/31\/flash-experiments-flashbox-part-1\/"},"modified":"2011-06-02T08:48:34","modified_gmt":"2011-06-02T07:48:34","slug":"flash-experiments-flashbox-part-1","status":"publish","type":"post","link":"https:\/\/www.matthijskamstra.nl\/blog\/2007\/01\/31\/flash-experiments-flashbox-part-1\/","title":{"rendered":"Flash experiments: Flashbox &#8211; part 1"},"content":{"rendered":"<div class=\"highlight\"><strong>Update:<\/strong> I am not keeping files for historical purposes, so the <a href=\"http:\/\/www.matthijskamstra.nl\/laboratory\/flashbox\/\" title=\"Flashbox; another box\">Flashbox<\/a> directory will be update. (This means: when you view the progress, explained in this post, there is a possibility that the files are already evolved some&#8230; and the description here won&#8217;t fit what you see )<br \/>\n<a href=\"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/category\/flashbox\/\" title=\"Because it's work in progress\">Check for more recent post about FlashBox.<\/a><\/div>\n<h3>Introduction to Flash experiment: Flashbox<\/h3>\n<p>In &#8220;<a href=\"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/2006\/11\/29\/flatpack-toys-other-then-readymech\/\">Flatpack toys other then ReadyMech<\/a>&#8221; I started to experimented with <a href=\"http:\/\/www.huddletogether.com\/projects\/lightbox2\/\">Lightbox JS v2.0<\/a> to show images without using a popup or leave the page. I used <a href=\"http:\/\/zeo.unic.net.my\/notes\/lightbox-js-version-20\/\">wp-lightbox2<\/a>.<br \/>\nAnd I was impressed! It uses <a href=\"http:\/\/www.prototypejs.org\/\">prototype.js<\/a> which is a JavaScript Framework. Until I saw that wp-lightbox2 plugin (lightbox.js, prototype.js, effects.js, images, css and php file) is a total of 86,6kB&#8230;. <\/p>\n<p>So I looked for a alternative, and found <a href=\"http:\/\/jquery.com\/demo\/thickbox\/\">thickbox<\/a> which was smaller (total 31kB) and more versatile (not only images and galleries but also inline content, iframes and AJAX content). Thickbox uses <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> which is a JavaScript Library.<br \/>\nI used the wp-thickbox plugin (20,8 kB) and don\u00e2\u20ac\u2122t forget wp-jQuery (19.5kB). So to get thickbox working on WordPress it will add up to 40.3kB total (less then half of lightbox).<\/p>\n<p>And here comes the trouble:<br \/>\nA couple of days ago there was an update of <a href=\"http:\/\/wordpress.org\/\">WordPress<\/a>: <a href=\"http:\/\/wordpress.org\/development\/2007\/01\/ella-21\/\">WordPress 2.1 Ella<\/a> and this version of WordPress uses prototype.<br \/>\nAnd prototype and jQuery <a href=\"http:\/\/jquery.com\/docs\/PrototypeAndJQuery\/\">can live together<\/a> but can cause problem.<br \/>\nWhich it did in my case: Thickbox didn&#8217;t work any more, and a theme I was working on (using jQuery) stop working too.<\/p>\n<p><strong>Update:<\/strong> Not functioning of Thickbox had nothing to do with WordPress 2.1 or with the wp-plugin. I was to hasty with my conclusion. <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/2007\/01\/31\/flash-experiments-flashbox-part-1\/#comments\">Read the comments<\/a><\/p>\n<p>So I changed this blog (not update to wp2.1 yet) back to Lightbox again, because of the prototype\/jQuery issues and future updates of my blog.<br \/>\n<!--more--><\/p>\n<h3>And then I started thinking about Flashbox<\/h3>\n<p>What is <strong>Flashbox<\/strong>?  Well it&#8217;s Lightbox but with Flash.<\/p>\n<blockquote><p><strike>Lightbox JS<\/strike>Flashbox is a simple, unobtrusive script used to overlay images on the current page. It&#8217;s a snap to setup and works on all modern browsers.<\/p><\/blockquote>\n<p>There are some things I want to change:<br \/>\n<strong>Lightbox improvement<\/strong><\/p>\n<ul>\n<li>thumbnails, or something similar so you can skip a couple images in a gallery<\/li>\n<li>autoplay \/ slideshow <\/li>\n<li>resize big images<\/li>\n<\/ul>\n<p><em>note: A good example is the slideshow from <a href=\"http:\/\/www.flickr.com\/\">flickr.com<\/a>.<\/em><\/p>\n<h3>Flashbox goals<\/h3>\n<p>Always good to set some goals at the beginning of a project:<\/p>\n<ul>\n<li>lighter then LightBox 2 &#8211; over 100 KB (LightBox is not compressed )<\/li>\n<li>lighter then ThickBox &#8211; around 30 KB<\/li>\n<li>lighter then Greybox &#8211; 22 KB<\/li>\n<li>copying the same basic function from Lightbox <\/li>\n<li><strong>no<\/strong> javascript framework<\/li>\n<li>even more simple to install<\/li>\n<li>&#8230;..<\/li>\n<\/ul>\n<h3>Follow my progress on FlashBox<\/h3>\n<p>You can follow my progress in the <a href=\"http:\/\/www.matthijskamstra.nl\/laboratory\/flashbox\/\" title=\"Flashbox; another box\">Flashbox<\/a> directory. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: I am not keeping files for historical purposes, so the Flashbox directory will be update. (This means: when you view the progress, explained in this post, there is a possibility that the files are already evolved some&#8230; and the description here won&#8217;t fit what you see ) Check for more recent post about FlashBox. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,15,16],"tags":[39,40,398,405],"class_list":["post-195","post","type-post","status-publish","format-standard","hentry","category-flash","category-flash-experiments","category-flashbox","tag-as2","tag-experiments","tag-flash","tag-flashbox"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/comments?post=195"}],"version-history":[{"count":2,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/195\/revisions"}],"predecessor-version":[{"id":1766,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/195\/revisions\/1766"}],"wp:attachment":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/media?parent=195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/categories?post=195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/tags?post=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}