Annotation of pettastic/html/ss1/readme.html, revision 1.1.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