Annotation of pettastic/html/ss1/readme.html, revision 1.1
1.1 ! nick 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
! 2: <html xmlns="http://www.w3.org/1999/xhtml">
! 3: <head>
! 4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
! 5: <title>Flash Gallery</title>
! 6: <style type="text/css">
! 7: html {background-color:#EEEEEE;}
! 8: body {background-color:#FFFFFF; margin:0 auto; margin-top:30px; margin-bottom:30px; padding:30px 30px 40px 30px; width:720px; color:#222222; border:1px solid #E0E0E0;}
! 9: a {text-decoration:none; color:#2887E3;}
! 10: a:hover {text-decoration:underline;}
! 11: code {color: #666666;}
! 12: table {border-collapse: collapse;}
! 13: table td {border:1px solid #BBBBBB;}
! 14: h1 {text-align:center; margin:0;}
! 15: h2 {margin:25px 0 10px 0;}
! 16: h3 {margin:10px 0 3px 0;}
! 17: i {color:#000000;}
! 18: ul.tabs {margin:0 10px; padding:0; text-align:right;}
! 19: ul.tabs li {list-style:none; display:inline; margin:0; padding:0;}
! 20: ul.tabs a {border:1px solid #E0E0E0; padding:3px 6px; background:#F0F0F0; font-size:18px; text-decoration:none;}
! 21: ul.tabs a:hover {text-decoration:none; background-color:#F6F6F6;}
! 22: ul.tabs a.current {background:#FFFFFF; color:#222222; border-bottom:1px solid #FFFFFF;}
! 23: #div_1, #div_2 {border:1px solid #E0E0E0; padding:5px 15px 15px 15px; margin-top:3px;}
! 24: </style>
! 25:
! 26: <script type="text/javascript">
! 27: getElem = function(elemId) {return document.getElementById(elemId);}
! 28: var CurrentStep = 1;
! 29: function SetCurrent(val)
! 30: {
! 31: if(CurrentStep!=val)
! 32: {
! 33: getElem('div_'+CurrentStep).style.display = 'none';
! 34: getElem('a_title_'+CurrentStep).className = '';
! 35: getElem('div_'+val).style.display = 'block';
! 36: getElem('a_title_'+val).className = 'current';
! 37: }
! 38: CurrentStep = val;
! 39: }
! 40: </script>
! 41:
! 42: </head>
! 43:
! 44: <body>
! 45: <h1>Flash Gallery</h1>
! 46: <h2>License</h2>
! 47: This application is developed by <a href="http://www.realitysoftware.ca">Reality Software</a> and released by <a href="http://www.flash-gallery.org">Flash Gallery</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, which means you can use it in any way you want provided you keep our links intact.<br/>
! 48: <b>Don't want our links in the script? You can support this project by <a href="http://www.flash-gallery.org/buy.html">purchasing</a> a paid version.</b>
! 49: <h2>What's included</h2>
! 50: <ul>
! 51: <li><i>flashgallery.html</i> - demo use of the gallery with comments;</li>
! 52: <li><i>default.xml</i> - customizable settings;</li>
! 53: <li><i>flashgallery.swf</i> - compiled Flash application;</li>
! 54: <li><i>flashgallery.php</i> - script that scans folder for JPG and PNG files and reads filenames;</li>
! 55: <li><i>swfobject.js</i> - script that detects Flash.</li>
! 56: </ul>
! 57: <h2>Installation tips</h2>
! 58: <ul class="tabs">
! 59: <li><a id="a_title_1" onclick="SetCurrent(1);return false;" class="current" href="#">Local images</a></li>
! 60: <li><a id="a_title_2" onclick="SetCurrent(2);return false;" href="#">Flickr photostream</a></li>
! 61: </ul>
! 62: <div id="div_1">
! 63: <h3>Step 1</h3>
! 64: Copy all files to your webserver and try running <i>flashgallery.html</i>. You should be able to view demo images. If it works, then move to the next step.<br/>
! 65: <strong>Note: Your server should support PHP for this script to work with local images.</strong>
! 66: <h3>Step 2</h3>
! 67: You need to embed the gallery into your webpages. You can copy and paste code from <i>flashgallery.html</i> or from here.<br/>
! 68: <strong>Note: You can change location of files in the following code. The path can be relative or absolute (except for <i>img</i> folder, which should always be relative to PHP script).</strong>
! 69: <br/><br/>
! 70: Add this to the head of your webpage:
! 71: <br/>
! 72: <code><!-- Location of javascript. --><br/>
! 73: <script language="javascript" type="text/javascript" src="swfobject.js" ></script></code>
! 74: <br/>
! 75: <br/>
! 76: Add this to the body of your webpage, where you want gallery to appear:
! 77: <br/>
! 78: <code><!-- Div that contains gallery. --><br/>
! 79: <div id="gallery" align="center"><br/>
! 80: <h1>No flash player!</h1><br/>
! 81: <p>It looks like you don't have flash player installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p><br/>
! 82: </div><br/>
! 83: <br/>
! 84: <!-- Script that embeds gallery. --><br/>
! 85: <script language="javascript" type="text/javascript"><br/>
! 86: var so = new SWFObject("flashgallery.swf", "gallery", "800", "600", "8"); // Location of SWF file. You can change gallery width and height here (using pixels or percents).<br/>
! 87: so.addParam("quality", "high");<br/>
! 88: so.addParam("allowFullScreen", "true");<br/>
! 89: so.addParam("wmode", "transparent");<br/>
! 90: so.addVariable("content_path","img"); // Location of a folder with JPG and PNG files (relative to PHP script).<br/>
! 91: so.addVariable("color_path","default.xml"); // Location of XML file with settings.<br/>
! 92: so.addVariable("script_path","flashgallery.php"); // Location of PHP script.<br/>
! 93: so.write("gallery");<br/>
! 94: </script></code>
! 95: <br/>
! 96: <br/>
! 97: <strong>Note: You can change gallery width and height (using pixels or percents).</strong>
! 98: <br/>
! 99: <br/>
! 100: Add this somewhere in the body of your webpage:<br/>
! 101: <code><!-- <br/>
! 102: Please place this link anywhere on the page that uses Flash Gallery.<br/>
! 103: You can style it anyway you want, but do not change or delete it.<br/>
! 104: Read the license! Thanks. :-)<br/>
! 105: --><br/>
! 106: Powered by <a href="http://www.flash-gallery.org">Flash Gallery</a></code>
! 107: <h3>Step 3</h3>
! 108: Upload your JPG and PNG files to <i>img</i> folder.
! 109: </div>
! 110: <div id="div_2" style="display:none">
! 111: <h3>Step 1</h3>
! 112: You need to embed the gallery into your webpages. You can copy and paste code from here.<br/>
! 113: <strong>Note: You can change location of files in the following code (the path can be relative or absolute).</strong>
! 114: <br/><br/>
! 115: Add this to the head of your webpage:
! 116: <br/>
! 117: <code><!-- Location of javascript. --><br/>
! 118: <script language="javascript" type="text/javascript" src="swfobject.js" ></script></code>
! 119: <br/>
! 120: <br/>
! 121: Add this to the body of your webpage, where you want gallery to appear:
! 122: <br/>
! 123: <code><!-- Div that contains gallery. --><br/>
! 124: <div id="gallery" align="center"><br/>
! 125: <h1>No flash player!</h1><br/>
! 126: <p>It looks like you don't have flash player installed. <a href="http://www.macromedia.com/go/getflashplayer" >Click here</a> to go to Macromedia download page.</p><br/>
! 127: </div><br/>
! 128: <br/>
! 129: <!-- Script that embeds gallery. --><br/>
! 130: <script language="javascript" type="text/javascript"><br/>
! 131: var so = new SWFObject("flashgallery.swf", "gallery", "800", "600", "8"); // Location of SWF file. You can change gallery width and height here (using pixels or percents).<br/>
! 132: so.addParam("quality", "high");<br/>
! 133: so.addParam("allowFullScreen", "true");<br/>
! 134: so.addParam("wmode", "transparent");<br/>
! 135: so.addVariable("content_path","http://www.flickr.com/photos/username/"); // Link to Flickr photostream or set.<br/>
! 136: so.addVariable("color_path","default.xml"); // Location of XML file with settings.<br/>
! 137: so.addVariable("api_key","xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"); // Flickr API key.<br/>
! 138: so.write("gallery");<br/>
! 139: </script></code>
! 140: <br/>
! 141: <br/>
! 142: <strong>Note: You can change gallery width and height (using pixels or percents).</strong>
! 143: <br/>
! 144: <br/>
! 145: Add this somewhere in the body of your webpage:<br/>
! 146: <code><!-- <br/>
! 147: Please place this link anywhere on the page that uses Flash Gallery.<br/>
! 148: You can style it anyway you want, but do not change or delete it.<br/>
! 149: Read the license! Thanks. :-)<br/>
! 150: --><br/>
! 151: Powered by <a href="http://www.flash-gallery.org">Flash Gallery</a></code>
! 152: <h3>Step 2</h3>
! 153: Replace <i>"http://www.flickr.com/photos/username/"</i> with a link to your Flickr photostream or set (for example <i>"http://www.flickr.com/photos/username/sets/12345678901234567/"</i>).
! 154: <h3>Step 3</h3>
! 155: Replace <i>"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"</i> with your Flickr API key.<br/>
! 156: <strong>Note: You can get an API key by going to <a href="http://www.flickr.com/services/apps/create/noncommercial/" target="_blank">Flickr App Garden -> Get an API key -> Non-Commercial</a> (you will need to be logged-in).</strong>
! 157: </div>
! 158:
! 159: <h2>Customizing gallery</h2>
! 160: You can customize gallery looks in <i>default.xml</i> by changing the following variables:
! 161: <br/>
! 162: <br/>
! 163: <table cellpadding="2" cellspacing="0">
! 164: <tr><td><code>background_color</code></td><td>Overall background color (can be set to "transparent")</td></tr>
! 165: <tr><td><code>picture_color</code></td><td>Main picture border color</td></tr>
! 166: <tr><td><code>text_color</code></td><td>Text color</td></tr>
! 167: <tr><td><code>btn_color</code></td><td>Next-previous buttons color (this color is always semi-transparent)</td></tr>
! 168: <tr><td><code>btn_arrow_color</code></td><td>Next-previous buttons arrows color</td></tr>
! 169: <tr><td><code>btn_over_color</code></td><td>Mouseover next-previous buttons color</td></tr>
! 170: <tr><td><code>btn_arrow_over_color</code></td><td>Mouseover next-previous buttons arrows color</td></tr>
! 171: <tr><td><code>scroll_color</code></td><td>Scroll buttons color</td></tr>
! 172: <tr><td><code>scroll_arrow_color</code></td><td>Scroll buttons arrows color</td></tr>
! 173: <tr><td><code>scroll_over_color</code></td><td>Mouseover scroll buttons color</td></tr>
! 174: <tr><td><code>scroll_arrow_over_color</code></td><td>Mouseover scroll buttons arrows color</td></tr>
! 175: <tr><td><code>thumb_color</code></td><td>Thumbnails border color</td></tr>
! 176: <tr><td><code>thumb_over_color</code></td><td>Mouseover and current thumbnails border color</td></tr>
! 177: <tr><td><code>text</code></td><td>Show text (on, off)</td></tr>
! 178: <tr><td><code>fullscreen_icon</code></td><td>Show fullscreen icon (on, off)</td></tr>
! 179: <tr><td><code>slideshow_icon</code></td><td>Show slideshow icon (on, off)</td></tr>
! 180: <tr><td><code>slideshow_autostart</code></td><td>Start slideshow on page load (on, off)</td></tr>
! 181: <tr><td><code>slideshow_delay</code></td><td>Delay between slides (from 1 to 9)</td></tr>
! 182: </table>
! 183: <h2>Support</h2>
! 184: Please do not hesitate to <a href="http://www.flash-gallery.org/support.html">contact us</a> if you have any questions or suggestions or if you want to report a bug.
! 185: </body>
! 186: </html>
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>
![[BACK]](/cvsweb/icons/back.gif){kind=icon}
Return to readme.html CVS log ![[TXT]](/cvsweb/icons/text.gif){kind=icon}
![[DIR]](/cvsweb/icons/dir.gif){kind=icon}
Up to [Local Repository] / pettastic / html / ss1