{"id":200,"date":"2007-02-07T12:37:47","date_gmt":"2007-02-07T11:37:47","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/flashbox-just-another-box\/"},"modified":"2008-04-27T14:02:45","modified_gmt":"2008-04-27T13:02:45","slug":"flashbox-just-another-box","status":"publish","type":"page","link":"https:\/\/www.matthijskamstra.nl\/blog\/flashbox-just-another-box\/","title":{"rendered":"FlashBox &#8211; Just another box"},"content":{"rendered":"\n<div id=\"navigation\">\n<ul id=\"navlist\">\n<li><a href=\"..\/\">Home<\/a><\/li>\n<li><a href=\"#overview\">Overview<\/a><\/li>\n<li><a href=\"#download\">Download<\/a><\/li>\n<li><a href=\"#example\">Example<\/a><\/li>\n<li><a href=\"#how\">How to Use<\/a><\/li>\n<li><a href=\"#bugs\">Tested in<\/a><\/li>\n<li><a href=\"#todo\">Todo  \/ request<\/a><\/li>\n<li><a href=\"#thanx\">Thanx to<\/a><\/li>\n<\/ul><\/div>\n<div id=\"versionnumber\">\n<p>1.4<\/p>\n<\/div>\n<div class=\"highlight\">\n<p>Currently my interests are focused on AS3 which means that this project ( written in AS2) has no priority right now. So people who install (or have installed) FlashBox do this &#8220;<a href=\"http:\/\/en.wikipedia.org\/wiki\/As_is\">as-is<\/a>&#8220;. I haven&#8217;t seen any problems with FlashBox on WordPress 2.5(.1) so there is no reason you shouldn&#8217;t use this plugin. I still use it!<\/p>\n<\/div>\n<div class=\"highlight\">\n<p>Because the best place to experiment with FlashBox is in the &#8216;wild&#8217;, so I sometimes use the latest (not published) version of FlashBox on my blog.<br \/>\nThere is a possibility the version you see here (and the rest of the blog) could be an experimental version. And the version that you download is not the one you saw here, but when I use FlashBox here it mean there that there is going to be an update pritty soon!<br \/>\nYou can follow my progress in the <a href=\"http:\/\/www.matthijskamstra.nl\/laboratory\/flashbox\/\" title=\"Flashbox - Just another box\">Flashbox<\/a> directory. <\/p>\n<\/div>\n<p>\t<a name=\"overview\"><\/a><\/p>\n<h2 class='swf-title'>Overview<\/h2>\n<p><strike>Lightbox JS<\/strike> Flashbox is a <em>simple, unobtrusive<\/em> script used to overlay images on the current page. It&#8217;s a <em>snap to setup<\/em> and works on <em>all modern browsers<\/em>.<\/p>\n<h3>Why Flashbox?<\/h3>\n<p>Perhaps you&#8217;re looking for a alternative for Lightbox \/ thickbox \/ graybox?<br \/>\nOr something that&#8217;s smaller then Lightbox, but with animation?<\/p>\n<p>And because Flash can show the following images SWF, JPEG, GIF, or PNG files.<br \/>\n<em>(Support for unanimated GIF files, PNG files, and progressive JPEG files is added in Flash Player 8. If you load an animated GIF, only the first frame is displayed.)<\/em><br \/>\nSo LightBox will be better in animated Gif, because Flash will only show the first frame of the animated gif. But Flashbox can also show SWF files\u00e2\u20ac\u00a6 So I\u00e2\u20ac\u2122ll call it even.<\/p>\n<p><strong>But<\/strong> flash can also show .FLV and play .MP3 which of course is a big plus!<\/p>\n<h3>Features<\/h3>\n<ul>\n<li>Show local images and images on other server<\/li>\n<li>Show a single image or a group<\/li>\n<li>Is active before all images on the page are loaded<\/li>\n<li>Key navigation<\/li>\n<li>Gallery thumbs for bigger jumps in a image-group<\/li>\n<li><a href=\".\/?debugflashbox=true\">index.html?debugflashbox=true<\/a><\/li>\n<li><a href=\".\/?sendafriend=http:\/\/www.jeffbots.com\/judgedredd1.jpg\">index.html?sendafriend=http:\/\/www.jeffbots.com\/judgedredd1.jpg<\/a><\/li>\n<li><a href=\".\/?noflashbox=true\">index.html?noflashbox=true<\/a><\/li>\n<li><a href=\".\/?noie6block=true\">index.html?noie6block=true<\/a><\/li>\n<li><a href=\".\/\">reset<\/a><\/li>\n<\/ul>\n<p><a href=\"#top\" class=\"top\">back to the top<\/a><\/p>\n<hr\/>\n<p><a name=\"download\"><\/a><\/p>\n<h2 class='swf-title'>Download:<\/h2>\n<h3>Download WordPress Plugin &#8211; Download FlashBox v1.4<\/h3>\n<div class=\"downloadbtn2\"><a href=\"#\" onclick=\"location.href='http:\/\/www.matthijskamstra.nl\/blog\/download-manager.php?id=6'\" title=\"Download WordPress Plugin - FlashBox v1.4: wp-flashbox_v01.4.zip (33,3 kB)\"><strong>Download wp-FlashBox v1.4<\/strong> wp-flashbox_v01.4.zip (33,3 kB)<span class=\"downloadnumber2\"><!--downloads(6)--><\/span><\/a><\/div>\n<h3>Changelog<\/h3>\n<ul>\n<li><strong>FlashBox v 1.4 [2007-20-03]<\/strong> &#8211; <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/2007\/03\/19\/flashbox-v14-ie6-blocks-content\/#changelog\">FlashBox v1.4 &#8211; IE6 blocks content<\/a><\/li>\n<li><strong>FlashBox v 1.3 [2007-12-03]<\/strong> &#8211; <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/2007\/03\/12\/flashbox-v13\/#changelog\">FlashBox v1.3<\/a><\/li>\n<li><strong>FlashBox v 1.2 [2007-03-03]<\/strong> &#8211; <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/2007\/03\/03\/flashbox-v12-fixed-error-with-comma-in-title#changelog\">FlashBox v1.2: fixed error with comma in title<\/a><\/li>\n<li><strong>FlashBox v 1.1 [2007-26-02]<\/strong> &#8211; <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/2007\/02\/26\/flashbox-v11-fixed-visibility-bug-ff2-apple\/\">Fixed visibility bug FF2 (Apple)<\/a><\/li>\n<li><strong>FlashBox v 1.0 [2007-13-02]<\/strong> &#8211; Initial release <\/li>\n<\/ul>\n<p><a href=\"#top\" class=\"top\">back to the top<\/a><\/p>\n<hr \/>\n<p><a name=\"example\"><\/a><\/p>\n<h2 class='swf-title'>Examples<\/h2>\n<p>view a couple of examples<\/p>\n<h3>Single Images:<\/h3>\n<p><a href=\"http:\/\/www.enkeling.nl\/beeld\/payday_loan.gif\" rel=\"flashbox\">Enkeling || payday loan<\/a><br \/>\n<a href=\"http:\/\/smpenterprisesllc.com\/flash\/bin\/1999\/images\/robot04.gif\" rel=\"flashbox\">paperRobots1999.com || Optimus Prime<\/a><\/p>\n<h3>Different sizeImages in one group: <\/h3>\n<p><a href=\"http:\/\/www.jeffbots.com\/judgedredd1.jpg\" rel=\"flashbox[size]\" title=\"The ABC Warrior was a collectible relic built for war about half a century prior to the Judge Dredd timeline.\">ABC Warrior from Judge Dredd<\/a> | <a href=\"http:\/\/www.smallartworks.ca\/Gallery\/RobotTh.JPG\" rel=\"flashbox[size]\" title=\"Robot thumb\">robot 1<\/a> | <a href=\"http:\/\/www.smallartworks.ca\/Gallery\/Robot\/Robot4.JPG\" rel=\"flashbox[size]\" title=\"bigger robot\">robot 2<\/a> | <a href=\"http:\/\/www.smallartworks.ca\/Gallery\/Robot\/Robot5.JPG\" rel=\"flashbox[size]\" title=\"detail\">robot 2<\/a> | <a href=\"http:\/\/www.jeffbots.com\/cylon.jpg\" rel=\"flashbox[size]\" title=\"Cylons were a race of replicating war machines left over from an ancient lizard-like race extinct centuries ago.\">Cylon from Battlestar Galactica<\/a> | <a href=\"http:\/\/www.jeffbots.com\/S-MATT1.JPG\" rel=\"flashbox[size]\" title=\"Who hasn't heard someone imitating him by saying 'Danger Will Robinson'?  He has still got to be one of my all-time favorite television robots.  I keep saying that don't I? \">Robot B9 from Lost In Space<\/a> |<\/p>\n<p><a href=\"#top\" class=\"top\">back to the top<\/a><\/p>\n<hr\/>\n<p><a name=\"todo\"><\/a><\/p>\n<h2 class='swf-title'>Todo and requests<\/h2>\n<p>I&#8217;ve moved this content to a post, which is much easier to manage.<br \/>\nSo for request or an todo list, <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/2007\/03\/07\/flashbox-todo-and-requests\/\"><strong>Flashbox &#8211; Todo and requests<\/strong><\/a><\/p>\n<p><a href=\"#top\" class=\"top\">back to the top<\/a><\/p>\n<hr\/>\n<p><a name=\"how\"><\/a><\/p>\n<h2 class='swf-title'>How to Use:<\/h2>\n<p><b>Nice to know:<\/b> FlashBox is based upon Lightbox, and you don&#8217;t have to change all <code>rel=\"lightbox\"<\/code> &#8211; tags because it will also work with FlashBox.<br \/>\nSo if you are already using Lightbox and want to experiment with FlashBox, you can <strong>without<\/strong> changing anything.<\/p>\n<p>If you are not using lightbox yet, but you&#8217;re not sure if FlashBox is all that, you can choose to use <em>rel=&#8221;lightbox&#8221;<\/em> because it&#8217;s backwards compatible<br \/>\nBut I reather have you use <em>rel=&#8221;flashbox&#8221;<\/em> for officious reasons!<\/p>\n<p>You can use FlashBox without a WordPress blog, just <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/flashbox-just-another-box\/#download\">download<\/a> the WordPress Plugin and extract the zip in the main folder (root folder) of your site, delete the <code>wp-flashbox.php<\/code> and follow the next instructions:<br \/>\n\t<\/p>\n<h3>Part 1 &#8211; Setup<\/h3>\n<ol>\n<li>Flashbox uses a couple of Javascript file, don&#8217;t forget them to include in your header (place this between the <code><head><\/code> and <code><\/head><\/code> tags).\n<pre><code><script type=\"text\/javascript\" src=\"js\/domFunction.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/browser_detect.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/swfobject.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/flashbox.js\"><\/script><\/code><\/pre>\n<\/li>\n<li>Include the Flashbox CSS file (or append your active stylesheet with the Flashbox styles).\n<pre><code><link rel=\"stylesheet\" href=\"css\/flashbox.css\" type=\"text\/css\" media=\"screen\" \/><\/code><\/pre>\n<\/li>\n<\/ol>\n<h3>Part 2 &#8211; Activate<\/h3>\n<ol>\n<li>Add a <code>rel=\"flashbox\"<\/code> attribute to any link tag to activate the flashbox. For example:\n<pre><code><a href=\"images\/image-1.jpg\" rel=\"flashbox\" title=\"my caption\">image #1<\/a><\/code><\/pre>\n<p><em>Optional: <\/em>Use the <code>title<\/code> attribute if you want to show a caption.\t\t<\/li>\n<li>If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:\n<pre><code><a href=\"images\/image-1.jpg\" rel=\"flashbox[flashexperiment]\">image #1<\/a>\r\n<a href=\"images\/image-2.jpg\" rel=\"flashbox[flashexperiment]\">image #2<\/a>\r\n<a href=\"images\/image-3.jpg\" rel=\"flashbox[flashexperiment]\">image #3<\/a>\r\n<\/code><\/pre>\n<p>\nAnd because it also works with <strong>lightbox<\/strong>:<\/p>\n<pre><code><a href=\"images\/image-1.jpg\" rel=\"lightbox[flashexperiment]\">image #1<\/a>\r\n<a href=\"images\/image-2.jpg\" rel=\"lightbox[flashexperiment]\">image #2<\/a>\r\n<a href=\"images\/image-3.jpg\" rel=\"lightbox[flashexperiment]\">image #3<\/a>\r\n<\/code><\/pre>\n<p>\tNo limits to the number of image sets per page or how many images are allowed in each set. Go nuts!<\/li>\n<\/ol>\n<p><a href=\"#top\" class=\"top\">back to the top<\/a><\/p>\n<hr \/>\n<p>\t<a name=\"bugs\"><\/a><\/p>\n<h2 class='swf-title'>Tested in<\/h2>\n<p>\t<b>Apple<\/b><\/p>\n<ul>\n<li>Firefox 2.0.0.2 (fixed but not transparent)<\/li>\n<li>Opera 9.10<\/li>\n<li>Safari 1.3.2<\/li>\n<li>Camino 1.0.4<\/li>\n<\/ul>\n<p>\t<b>PC<\/b><\/p>\n<ul>\n<li>Firefox 2.0.0.2<\/li>\n<li>Opera 9.10<\/li>\n<li>IE 7.0<\/li>\n<li><strike>IE 6.0<\/strike> (non-constant behavior)<\/li>\n<li>IE 5.5<\/li>\n<li><strike>IE 5.0.1<\/strike>: crashed, but I will never support this browswer<\/li>\n<\/ul>\n<p>You can report bugs and requests at this post: <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/2007\/03\/07\/flashbox-todo-and-requests\/\"><strong>Flashbox &#8211; Todo and requests<\/strong><\/a>.<\/p>\n<p><a href=\"#top\" class=\"top\">back to the top<\/a><\/p>\n<hr \/>\n<p><a name=\"thanx\"><\/a><\/p>\n<h2 class='swf-title'>Thanx to:<\/h2>\n<p>People who deserve some props:<\/p>\n<p>\t<b>javascript<\/b><\/p>\n<ul class=\"thanx\">\n<li><a href=\"http:\/\/www.huddletogether.com\/projects\/lightbox2\/\" target=\"_blank\">Lightbox JS v2.0<\/a> &#8211; by Lokesh Dhakar<\/li>\n<li><a href=\"http:\/\/blog.deconcept.com\/swfobject\/\" target=\"_blank\">SWFObject<\/a> &#8211; by Geoff Stearns<\/li>\n<li><a href=\"http:\/\/www.quirksmode.org\/js\/detect.html\" target=\"_blank\">Browser detect <\/a> &#8211; by Peter-Paul Koch [quirksmode]<\/li>\n<li><a href=\"http:\/\/www.brothercake.com\/site\/resources\/scripts\/domready\/\" target=\"_blank\">domFunction<\/a> &#8211; by James Edwards [brothercake]<\/li>\n<li><a href=\"http:\/\/alex.dojotoolkit.org\/shrinksafe\/\" target=\"_blank\">ShrinkSafe<\/a> &#8211; for shrinking my JavaScript<\/li>\n<\/ul>\n<p>\t\t<b>Flash<\/b><\/p>\n<ul class=\"thanx\">\n<li><a href=\"http:\/\/www.sepy.it\/\" target=\"_blank\">SE|PY<\/a> &#8211; SE|PY is a FREE ActionScript editor for Macromedia Flash files<\/li>\n<li><a href=\"http:\/\/blog.greensock.com\/?cat=2\" title=\"TweenLite - A Lightweight Yet Powerful Tweening Engine\">TweenLite.as<\/a> &#8211; an excellent piece op work by Jack Doyle. <\/li>\n<\/ul>\n<p>\t\t<b>Misc<\/b><\/p>\n<ul class=\"thanx\">\n<li><a href=\"http:\/\/creativecommons.org\/\" target=\"_blank\">Creative Commons<\/a> &#8211; <!--Creative Commons License-->This work is licensed under a <a rel=\"license\" href=\"http:\/\/creativecommons.org\/licenses\/by-nc-sa\/2.5\/\">CC Attribution-Noncommercial-Share Alike 2.5  License<\/a>.<!--\/Creative Commons License--><\/li>\n<li><a href=\"http:\/\/ifelse.co.uk\/simpla\" target=\"_blank\">Simpla Theme<\/a> &#8211; for a quick css page<\/li>\n<\/ul>\n<p><a href=\"#top\" class=\"top\">back to the top<\/a><\/p>\n<hr \/>\n<div id=\"license\"><!--Creative Commons License--> <a rel=\"license\" href=\"http:\/\/creativecommons.org\/licenses\/by-nc-sa\/2.5\/\"><img decoding=\"async\" border=\"0\" alt=\"Creative Commons License\" src=\"http:\/\/creativecommons.org\/images\/public\/somerights20.png\" \/><\/a> This work is licensed under a <a rel=\"license\" href=\"http:\/\/creativecommons.org\/licenses\/by-nc-sa\/2.5\/\">Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License<\/a>.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Home Overview Download Example How to Use Tested in Todo \/ request Thanx to 1.4 Currently my interests are focused on AS3 which means that this project ( written in AS2) has no priority right now. So people who install (or have installed) FlashBox do this &#8220;as-is&#8220;. I haven&#8217;t seen any problems with FlashBox on [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"flashbox.php","meta":{"footnotes":""},"class_list":["post-200","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/pages\/200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/types\/page"}],"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=200"}],"version-history":[{"count":0,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/pages\/200\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/media?parent=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}