{"id":227,"date":"2007-03-07T18:30:45","date_gmt":"2007-03-07T17:30:45","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/index.php\/2007\/03\/07\/flashbox-usage-instructions\/"},"modified":"2007-03-07T23:38:15","modified_gmt":"2007-03-07T22:38:15","slug":"flashbox-usage-instructions","status":"publish","type":"post","link":"https:\/\/www.matthijskamstra.nl\/blog\/2007\/03\/07\/flashbox-usage-instructions\/","title":{"rendered":"FlashBox &#8211; Usage instructions"},"content":{"rendered":"<p><strong>Quicknavigation:<\/strong> <a href=\"#howtouse\">How to use<\/a> | <a href=\"#howtousewordpress\">How to install on WordPress<\/a> | <a href=\"#tips\">Tips and Tricks<\/a><\/p>\n<p><a name=\"howtouse\"><\/a><\/p>\n<h2 class='swf-title'>How to use<\/h2>\n<p>Download the lastest-zip file: in there you will find:<br \/>\n<img src='http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashboxzip.jpg' alt='FlashBox zip' \/><\/p>\n<pre>\r\n+ wp-flashbox (32.4 kB)\r\n|\t+ csMinimal Flash plugin version is 8!\r\n|\t|\t- flashbox.css (0.5 kB)\r\n|\t+ js\r\n|\t|\t- browser_detect.compressed.js (1.6 kB)\r\n|\t|\t- domFunction.compressed.js.js (0.4 kB)\r\n|\t|\t- browser_detect.compressed.js (1.6 kB)\r\n|\t|\t- flashbox.compressed.js (5.1 kB)\r\n|\t|\t- swfobject.compressed.js.js (6.1 kB)\r\n|\t- flashbox_v01.swf (11.2 kB)\r\n|\t- readme.txt (3.7 kB)\r\n|\t- wp-flashbox.php (3.4 kB)\r\n<\/pre>\n<h3>Part 1 &#8211; Setup<\/h3>\n<p>Flashbox uses Javascript files, don&#8217;t forget them to include in your header.<\/p>\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>\r\n<\/code><\/pre>\n<p>Include the Flashbox CSS file (or append your active stylesheet with the Flashbox styles).<\/p>\n<pre><code><link rel=\"stylesheet\" href=\"css\/flashbox.css\" type=\"text\/css\" media=\"screen\" \/>\r\n<\/code><\/pre>\n<h3>Part 2 &#8211; Activate<\/h3>\n<p>Add a <code>rel=\"flashbox\"<\/code> attribute to any link tag to activate the flashbox. For example:<\/p>\n<pre><code><a href=\"images\/image-1.jpg\" rel=\"flashbox\" title=\"my caption\">image #1<\/a>\r\n<\/code><\/pre>\n<p><em>Optional: <\/em>Use the <code>title<\/code> attribute if you want to show a caption.<\/p>\n<p>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:<\/p>\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>And 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>No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!<\/li>\n<p><a name=\"howtousewordpress\"><\/a><\/p>\n<h2 class='swf-title'>Install on WordPress<\/h2>\n<p>Usage instructions<\/p>\n<ul>\n<li>Download the latest-zip file and decompress into wp-content\/plugins.<\/li>\n<li>Go to your Plugins screen in the WordPress admin area, and activate \u00e2\u20ac\u0153Flashbox\u00e2\u20ac?.<\/li>\n<p><img src='http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_activate.jpg' alt='Activate FlashBox in WordPress admin' \/><\/p>\n<li>In the <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_0000_code-editor.jpg\" rel=\"flashbox[instal1]\" title=\"FlashBox in code-editor wp\">code view<\/a>, you get a <a href='http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_0001_flashbox-butt.jpg' rel=\"flashbox[instal1]\" title='FlashBox button in code editor'>\u00e2\u20ac\u0153Flashbox\u00e2\u20ac?-button<\/a> where you can fill in <a href='http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_0002_url.jpg' rel=\"flashbox[instal1]\" title='FlashBox url'>url<\/a> of the image, the <a href='http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_0003_caption.jpg' rel=\"flashbox[instal1]\" title='FlashBox caption'>caption<\/a> and the <a href='http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_0004_groupname.jpg' rel=\"flashbox[instal1]\" title='FlashBox groupname'>groupname<\/a>\n<\/li>\n<\/ul>\n<p>Check all images: <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_0000_code-editor.jpg\" rel=\"flashbox[instal]\" title=\"FlashBox in code-editor wp\">How to use FlashBox in WordPress<\/a>.<\/p>\n<div style=\"display:none\">\n<a href='http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_0001_flashbox-butt.jpg' rel=\"flashbox[instal]\" title='FlashBox button in code editor'>FlashBox button in code editor<\/a><br \/>\n<a href='http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_0002_url.jpg' rel=\"flashbox[instal]\" title='FlashBox url'>FlashBox url<\/a><br \/>\n<a href='http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_0003_caption.jpg' rel=\"flashbox[instal]\" title='FlashBox caption'>FlashBox caption<\/a><br \/>\n<a href='http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_0004_groupname.jpg' rel=\"flashbox[instal]\" title='FlashBox groupname'>FlashBox groupname<\/a><br \/>\n<a href='http:\/\/www.matthijskamstra.nl\/blog\/wp-content\/uploads\/flashbox_0005_result.jpg' rel=\"flashbox[instal]\" title='FlashBox result'>FlashBox result<\/a>\n<\/div>\n<p><a name=\"tips\"><\/a><\/p>\n<h2 class='swf-title'>Tips and Tricks<\/h2>\n<p>Minimal Flash plugin version is 8!<\/p>\n<p><strong>tip 1: How to create a gallery without showing every image.<\/strong><br \/>\nput this in the source of you html page:<br \/>\n<code><a href=\"http:\/\/www.urltoimage.com\/1.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\">image gallery<\/a><\/code><br \/>\nand where every in the page<\/p>\n<pre><code><div style=\"display:none\">\r\n<a href=\"http:\/\/www.urltoimage.com\/2.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<a href=\"http:\/\/www.urltoimage.com\/3.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<a href=\"http:\/\/www.urltoimage.com\/4.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<a href=\"http:\/\/www.urltoimage.com\/5.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<a href=\"http:\/\/www.urltoimage.com\/6.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<a href=\"http:\/\/www.urltoimage.com\/7.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<\/div>\r\n<\/code><\/pre>\n<p>The <code>display:none<\/code> will make the whole block (div) disappear for the viewer but, it will still be &#8220;visible&#8221; for the FlashBox code<\/p>\n<p><strong>tip 2: How to create a large gallery without showing every image, but some step inbetween.<\/strong><br \/>\nput this in the source of you html page:<\/p>\n<pre><code><a href=\"http:\/\/www.urltoimage.com\/1.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\">image 1 - 25<\/a>\r\n<div style=\"display:none\">\r\n<a href=\"http:\/\/www.urltoimage.com\/2.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<a href=\"http:\/\/www.urltoimage.com\/3.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<a href=\"http:\/\/www.urltoimage.com\/4.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n---\r\n<a href=\"http:\/\/www.urltoimage.com\/25.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<\/div>\r\n<a href=\"http:\/\/www.urltoimage.com\/26.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\">image 26 - 50<\/a>\r\n<div style=\"display:none\">\r\n<a href=\"http:\/\/www.urltoimage.com\/27.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<a href=\"http:\/\/www.urltoimage.com\/28.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<a href=\"http:\/\/www.urltoimage.com\/29.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n---\r\n<a href=\"http:\/\/www.urltoimage.com\/50.jpg\" rel=\"flashbox[usethisgroupname]\" title=\"Caption of the image\"><\/a>\r\n<\/div>\r\n<\/code><\/pre>\n<p>The <code>display:none<\/code> will make the whole block (div) disappear for the viewer but, it will still be &#8220;visible&#8221; for the FlashBox code. In html it will look like this:<\/p>\n<p><a href=\"#\">image 1-25<\/a><br \/>\n<a href=\"#\">image 26 &#8211; 50<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quicknavigation: How to use | How to install on WordPress | Tips and Tricks How to use Download the lastest-zip file: in there you will find: + wp-flashbox (32.4 kB) | + csMinimal Flash plugin version is 8! | | &#8211; flashbox.css (0.5 kB) | + js | | &#8211; browser_detect.compressed.js (1.6 kB) | | [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[405,406],"class_list":["post-227","post","type-post","status-publish","format-standard","hentry","category-flashbox","tag-flashbox","tag-wordpress-plugin"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/227","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=227"}],"version-history":[{"count":0,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/227\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/media?parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/categories?post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/tags?post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}