Funktionalität
Image Gallery bietet eine flexibel konfigurierbare Funktionalität. Sie können die Funktionalität über Parameter steuern. Die einzelnen Paramter werden
folgend detailliert beschrieben.
Generell bestimmen Sie, ob Sie Bilder aus einem definierten URL (Unique Resource Locator) laden oder alle Bilder als Dateiname in einem angegebenen (verborgenem)
Feld speichern und von dort laden. Desweiteren bestimmen Sie, welche Animation auf die Bilder angewendet wird.
Parameter
Die Funktionalität der Applikation wird über Parameter des Javascripts gesteuert. Sie bestimmen diese Parameter im Javascript Code durch Anpassung der Standardwerte.
Die Parameter entsprechen weitgehend den Einstellungen, die Sie oben in der Beispielapplikation vornehmen können.
Die folgenden Parameter können Im Javascript Code gesetzt werden:
var GalleryContainer = 'Gallery';
var GalleryMode = 2;
var isAdjustGallerySize = true;
var isByURL = true;
var iMax = 13;
var sURL = 'images/urlaub/small/';
var sFileName = 'image';
var sFileNameExtension = 'jpg';
var sFieldName = 'AllImages';
var ImageChangeDelay = 12000;
var FadeDuration = 12;
var MoveDirection = 2;
var Distance = 0;
Die Parameter steuern die Applikation und bewirken im Einzelnen:
|
Variable:
|
Erklärung:
|
|
GalleryContainer
|
Die ID des DIV Elements, in welchem die Bilder angezeigt werden sollen.
|
|
GalleryMode
|
Eine Zahl, die bestimmt, ob Bilder bewegt angezeigt oder eingeblendet werden.
1: Bilder einblenden
2: Bilder bewegen
|
|
isAdjustGallerySize
|
Boolean Wert, der bestimmt, ob die Größe der Gallery an das erste geladene Bild angepasst wird.
True: Größe anpassen
False: Größe konstant belassen
|
|
isByURL
|
Boolean Wert, der bestimmt, dass Bilder aus einem festgelegten URL geladen werden.
True: Bilder werden aus einem angegebenen URL geladen.
False: Bilder werden aus einem angegebenem Feld (sFieldName) geladen.
Hinweis: isByURL = True benötigt die folgenden gesetzten Felder:
iMax
sURL
sFileName
sFileNameExtension
|
|
iMax
|
Die Anzahl der Bilder in dem angegebenen URL plus 1. Spezifizieren Sie 10, falls 9 Bilder geladen werden sollen.
|
|
sURL
|
Der URL, aus dem Bilder geladen werden sollen. Dies kann ein absoluter oder relativer URL sein.
|
|
sFileName
|
Der gleichbleibende Teil des Dateinamens der Bilddateien. Dateinamen der Bilder werden wie folgt erwartet:
[sFileName][laufende Nummer].[sFileNameExtension]
Die laufende Nummer wird automatisch durch die Applikation bestimmt. Es wird vorausgesetzt, dass Bilder von 1 bis iMax-1 numeriert sind.
Bsp.:
sFileName = "Image"
sFileNameExtension = "jpg"
iMax = 11
Es werden alle Bilder von Bild 1 bis 10 geladen, die folgenden Namen haben:
Image001.jpg, Image002.jpg, ..., image010.jpg
|
|
sFileNameExtension
|
Die Dateinamenserweiterung der Bilddateien, z.B. jpg, gif, png, bmp, etc.
|
|
sFieldName
|
Der Name des Feldes, der alle Dateinamen enthält. Falls isByURL = False gesetzt ist, werden Bilder aus diesem Feld geladen.
Hinweis: isByURL = False benötigt das folgende gesetzte Feld, falls mindestens ein Dateiname keine Pfadangabe enthält:
sURL
|
|
ImageChangeDelay
|
Die Zeit in Millisekunden, nachdem ein Bild gewechselt wird. Spezifizieren Sie z.B. 12000, um Bilder nach
12 Sekunden zu wechseln.
|
|
FadeDuration
|
Die Zeit in Sekunden, die für das Einblenden eines Bildes verwendet wird. Je kürzer diese Zeit bestimmt ist, desto schneller
erfolgt der Wechsel eines Bildes.
Hinweis: FadeDuration sollte <= ImageChangeDelay sein.
|
|
MoveDirection
|
Bestimmen Sie die Richtung, in der Bilder bewegt werden.
1: Rechts -> Links
2: Links -> Rechts
3: Oben -> Unten
4: Unten -> Oben
|
|
Distance
|
Der Abstand zwischen den einzelnen Bildern in Pixel, falls diese bewegt werden.
Standardmäßig wird kein Abstand zwischen Bildern angezeigt. Bei Angabe eines Abstands wird ein weisser Bereich in Größe der angegebenen Pixels zwischen den Bildern angezeigt.
|
Details:
Sie bestimmen durch Angabe des Parameters isByURL, ob Bilder aus einem URL geladen werden sollen oder ob diese in einem verstecktem
Feld gespeichert und von dort geladen werden sollen.
Sie verwenden isByURL = False, falls Ihre Server Applikation alle Bilder dynamisch
ermittelt und deren Dateinamen in das in sFieldName spezifizierte (verborgene) Feld speichert. Die Liste der Dateinamen muss eine Komma
separierte Liste sein. Dateinamen können mit oder ohne Pfad angegeben werden. Sollten Dateinamen ohne Pfad angegeben sein, muss sURL
spezifiziert sein, um Bilder korrekt laden zu können. In diesem Fall werden alle Bilder in dem angegebenen Pfad gesucht.
Sie verwenden isByURL = True, falls Sie Bilder aus einem angegebenen URL laden möchten. Verwenden Sie hierfür die oben beschriebenen Parameter
iMax
sURL
sFileName
sFileNameExtension,
um diese Einstellung zu komplettieren.
Quick Start:
Für einen schnellen Start, verwenden Sie Image Gallery mit Standardeinstellungen.
Passen Sie nur folgende Parameter an:
-
iMax
-
sURL
-
sFileName
-
sFileNameExtension.
Voraussetzungen
Image Gallery benötigt die folgenden Javascripts, um das Einblenden (Fading) von Bildern zu ermöglichen:
Hinweis: Diese Scripts werden nicht benötigt, falls Sie nur Bilder bewegt animieren möchten.
HTML
Das folgende HTML Code Beispiel listet den minimalen HTML Code, der für das erfolgreiche Verwenden der Image Gallery nötig ist.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>My Title</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/imageGallery.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', GalleryShow, false);
</script>
<style type="text/css">
.Gallery{width:200px;height:280px;margin-left:150px;border:solid 5px Gray;overflow:hidden;position:relative}
</style>
</head>
<body>
<input type="hidden" id="AllImages" name="AllImages" value="" />
<div id="Gallery" class="Gallery">
</div>
</body>
</html>
Hinweis: Das Listing listet Referenzen zu den Scripts Prototype und Scriptaculous, welche nur benötigt werden, falls Sie
das Einblenden von Bildern verwenden möchten.
Hinweis: Sollten Sie die Scripts Prototype und Scriptaculous nicht verwenden, dann dürfen Sie Image Gallery nicht mit der Funktion
Event.observe() starten. Verwenden Sie z.B. stattdessen das onload Ereignis des body Elements.
Bsp.: <body onload="GalleryShow();">
Hinweis: Das Listing listet eine Referenz zu der Javascript Datei imageGallery.js, welche den Code von Image Gallery als
externe Datei enthält. Alternativ fügen Sie den Code als Teil der HTML Datei ein.
Javascript Source Code
1 /*
2 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
3 Javascript (JS) driven Image Gallery
4 Ver.: 1.0.0
5 Date: September 2009
6 Author: Uwe Gemsjäger
7 (c) digital-ecom GmbH
8
9 Function: This JS displays images in an animated fashion. The type of animation can be specified by application settings.
10 The JS benefits are:
11 - Easy to adapt to a different set of images
12 - ... in a new location
13 - No need of Flash for display of images in an animated fashion ...
14 - No expensive reprogramming of Flash files in case the set of images changed ...
15 - Less CPU expensive than Flash ...
16
17
18 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
19 */
20
21 /*
22 ////////////////////////////////////////////////////////////////////////////////////////////////
23 Specify a global variable which gets assigned to setTimeout functions - allowing to stop those functions on demand (-> clearTimeout()).
24 ////////////////////////////////////////////////////////////////////////////////////////////////
25 */
26 var myGallery;
27
28 /*
29 ////////////////////////////////////////////////////////////////////////////////////////////////
30 Core function, loaded by onload event of body.
31 ////////////////////////////////////////////////////////////////////////////////////////////////
32 */
33 function GalleryShow()
34 {
35 // Specify application settings:
36 var GalleryContainer = 'Gallery'; // The DIV which will contain all your images.
37 var GalleryMode = 2; // What type of animation to use: 1 = Fade images in and out; 2 = Move images from left to right, top to bottom, etc.
38 var isAdjustGallerySize = true; // Picks up 1st image, obtains its size and adjusts size of GalleryContainer to image size.
39 var isByURL = true; // If true, iMax, sURL + sFileName have to specify the images to load. If false, field AllImages has to be filled with all file names of your images as comma separated list.
40 var iMax = 13; // if isByURL is true, iMax has to be specified. iMax = Number of images in folder + 1 (i.e. specify 10 if the folder contains 9 images).
41 var sURL = 'images/urlaub/small/'; // if isByURL is true, sURL has to be specified. If false it has to be specified in case field AllImages contains at least one file name, which does not contain path information.
42 var sFileName = 'image'; // if isByURL is true, the application expects image files to be build by identical filenames, specified further by contigeous numbers within the filename (i.e. Image001.jpg, Image002.jpg, etc.)
43 var sFileNameExtension = 'jpg'; // if isByURL is true, the type of Image has to be specified (i.e. jpg, gif, bmp, etc.).
44 var sFieldName = 'AllImages'; // The FieldName, which contains all image file names.
45 var ImageChangeDelay = 12000; // Time in msec until the next image is loaded.
46 var FadeDuration = 12; // When GalleryMode = 1, specify how fast fading is performed.
47 var MoveDirection = 2; // When GalleryMode = 2, specify 1 in order to move from right to left, 2 = left to right, 3 = top to down, 4 = down to top.
48 var Distance = 0; // When GalleryMode = 2, specify the empty space in Pixels between Image1 and Image2. Specify 0 if no Distance is desired.
49
50 var objGalleryContainer = document.getElementById(GalleryContainer); // Do not change ...
51
52 // Specify array of images, create HTML code by using this array and fill images (as HTML) into DIV; get counters for all our images (first, last, etc.):
53 var aPics = ImageList_Get(isByURL, iMax, sURL, sFileName, sFileNameExtension, sFieldName);
54 objGalleryContainer.innerHTML = GalleryHTML_Set(aPics, isAdjustGallerySize, GalleryContainer);
55
56 var ImageList = objGalleryContainer.getElementsByTagName('img');
57 for (var j=0; j < ImageList.length; j++){
58 if(j!=0){
59 ImageList[j].style.display = 'none';
60 }
61 }
62 var ImageLast = ImageList.length -1;
63 var ImageFirst = 0;
64 var ImageCurrent = 0;
65
66 // Depending on the GalleryMode specified, animate images by using scheduled functions. Those functions will call themselves again, partly.
67 if (GalleryMode == 1){
68 myGallery = setTimeout(fadeElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, FadeDuration), ImageChangeDelay);
69 }
70 else{
71
72 myGallery = setTimeout(moveElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, MoveDirection, Distance), ImageChangeDelay);
73 }
74 }
75
76 /*
77 ////////////////////////////////////////////////////////////////////////////////////////////////
78 Supplemental functions ...
79 ////////////////////////////////////////////////////////////////////////////////////////////////
80 */
81
82 /*
83 Get images list as array ...
84 */
85 function ImageList_Get(isByURL, iMax, sURL, sFileName, sFileNameExtension, sFieldName)
86 {
87 if (sURL.substring(sURL.length-1, 1) != '/'){
88 sURL += '/';
89 }
90
91 if (isByURL){
92 return ImageList_ByPath(iMax, sURL, sFileName, sFileNameExtension);
93 }
94 else{
95 return ImageList_ByFieldList(sURL, sFieldName);
96 }
97 }
98
99 function ImageList_ByPath(iMax, sURL, sFileName, sFileNameExtension)
100 {
101 var aPics = new Array();
102 if (isNaN(iMax) || iMax<1){
103 aPics[0] = '';
104 }
105 else{
106 for (var i=1;i<iMax;i++){
107 if (i<10){
108 aPics[i-1] = sURL + sFileName + '00' + i + '.' + sFileNameExtension;
109 }
110 else if(i<100){
111 aPics[i-1] = sURL + sFileName + '0' + i + '.' + sFileNameExtension;
112 }
113 else{
114 aPics[i-1] = sURL + sFileName + i + '.' + sFileNameExtension;
115 }
116 }
117 }
118 return aPics;
119 }
120
121 function ImageList_ByFieldList(sURL, sFieldName)
122 {
123 var aPics = new Array();
124 var aTMP = new Array();
125 if (document.getElementById(sFieldName) == undefined || document.getElementById(sFieldName).value == ''){
126 aPics[0] = '';
127 }
128 else{
129 aTMP = document.getElementById(sFieldName).value.split(',');
130 for (var i=0; i<aTMP.length; i++){
131 if (aTMP[i].indexOf('/')>-1){
132 aPics.push(aTMP[i]);
133 }
134 else{
135 aPics.push(sURL + aTMP[i]);
136 }
137 }
138 }
139 return aPics;
140 }
141
142 /*
143 Create HTML of images by using the array of images ...
144 */
145 function GalleryHTML_Set(aPics, isAdjustGallerySize, GalleryContainer)
146 {
147 var sHTML = '';
148 var sFileName = '';
149 for (var i=0;i<aPics.length;i++){
150 sFileName = FileName(aPics[i]);
151 if (isAdjustGallerySize && i==0){
152 sHTML += '<img id=\"img_01_xAe2345_Bg67\" src=\"' + aPics[i] + '\" alt=\"' + sFileName + '\" title=\"' + sFileName + '\" onload=\"GallerySize_Adjust(\'img_01_xAe2345_Bg67\', \'' + GalleryContainer +'\')\" style=\"border:0px;position:absolute;left:0px;top:0px\" />';
153 }
154 else{
155 sHTML += '<img src=\"' + aPics[i] + '\" alt=\"' + sFileName + '\" title=\"' + sFileName + '\" style=\"border:0px;position:absolute;left:0px;top:0px\" />';
156 }
157 }
158 return sHTML;
159 }
160
161 function FileName(sURL)
162 {
163 var p = sURL.lastIndexOf('/');
164 if (p>-1){
165 return sURL.substring(p+1, sURL.length);
166 }
167 else{
168 return sURL;
169 }
170 }
171
172 /*
173 If to adjust size of Gallery, adjust its size by size of first image ...
174 */
175 function GallerySize_Adjust(Img1_ID, GalleryContainer_ID)
176 {
177 var ImageWidth;
178 var ImageHeight;
179 var Img1 = document.getElementById(Img1_ID);
180 var GalleryContainer = document.getElementById(GalleryContainer_ID);
181
182 if (Img1.clientWidth){
183 ImageWidth = Img1.clientWidth;
184 ImageHeight = Img1.clientHeight;
185 }
186 else{
187 ImageWidth = Img1.innerWidth;
188 ImageHeight = Img1.innerHeight;
189 }
190 GalleryContainer.style.width = parseFloat(ImageWidth) + 'px';
191 GalleryContainer.style.height = parseFloat(ImageHeight) + 'px';
192 }
193
194 /*
195 The Animation Functions ...
196 */
197 function fadeElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, FadeDuration)
198 {
199 return (function()
200 {
201 ImageList[ImageCurrent].style.position = "absolute";
202 ImageList[ImageCurrent].style.left = document.getElementById('Gallery').style.left;
203
204 Effect.Fade(ImageList[ImageCurrent],{ duration:FadeDuration, from:1.0, to:0.0 });
205 if (ImageCurrent == ImageLast){
206 ImageCurrent = ImageFirst;
207 }
208 else{
209 ImageCurrent++;
210 }
211
212 Effect.Appear(ImageList[ImageCurrent], { duration:FadeDuration, from:0.0, to:1.0 });
213 myGallery = setTimeout(fadeElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, FadeDuration), ImageChangeDelay);
214 }
215 )
216 }
217
218
219 function moveElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, MoveDirection, Distance)
220 {
221 return (function()
222 {
223 var ImageWidth;
224 var ImageHeight;
225 var Img1 = ImageList[ImageCurrent];
226 if (ImageCurrent >= ImageLast){
227 var Img2 = ImageList[ImageFirst];
228 }
229 else{
230 var Img2 = ImageList[ImageCurrent +1];
231 }
232
233 Img1.style.display = 'block';
234 Img2.style.display = 'block';
235
236 if (Img1.clientWidth){
237 ImageWidth = Img1.clientWidth;
238 ImageHeight = Img1.clientHeight;
239 }
240 else{
241 ImageWidth = Img1.innerWidth;
242 ImageHeight = Img1.innerHeight;
243 }
244
245 switch (MoveDirection){
246 case 1:
247 Img2.style.left = parseFloat(ImageWidth + Distance) + 'px';
248 break;
249 case 2:
250 Img2.style.left = parseFloat(ImageWidth*(-1) - Distance) + 'px';
251 break;
252 case 3:
253 Img2.style.top = parseFloat(ImageHeight*(-1) - Distance) + 'px';
254 break;
255 case 4:
256 Img2.style.top = parseFloat(ImageHeight + Distance) + 'px';
257 break;
258 }
259
260 setTimeout(moveImage(Img1, Img2, ImageWidth, ImageHeight, 1, MoveDirection, Distance),0);
261
262 if (ImageCurrent == ImageLast){
263 ImageCurrent = ImageFirst;
264 }
265 else{
266 ImageCurrent++;
267 }
268 myGallery = setTimeout(moveElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, MoveDirection, Distance), ImageChangeDelay);
269 }
270 )
271 }
272
273 function moveImage(obj1, obj2, ImageWidth, ImageHeight, Pixel, MoveDirection, Distance)
274 {
275 return (function()
276 {
277 Pixel += 1;
278 switch(MoveDirection){
279 case 1:
280 obj1.style.left = parseFloat(parseFloat(obj1.style.left.replace(/px/,'')) - 1) + 'px';
281 obj2.style.left = parseFloat(parseFloat(obj2.style.left.replace(/px/,'')) - 1) + 'px';
282 break;
283 case 2:
284 obj1.style.left = parseFloat(parseFloat(obj1.style.left.replace(/px/,'')) + 1) + 'px';
285 obj2.style.left = parseFloat(parseFloat(obj2.style.left.replace(/px/,'')) + 1) + 'px';
286 break;
287 case 3:
288 obj1.style.top = parseFloat(parseFloat(obj1.style.top.replace(/px/,'')) + 1) + 'px';
289 obj2.style.top = parseFloat(parseFloat(obj2.style.top.replace(/px/,'')) + 1) + 'px';
290 break;
291 case 4:
292 obj1.style.top = parseFloat(parseFloat(obj1.style.top.replace(/px/,'')) - 1) + 'px';
293 obj2.style.top = parseFloat(parseFloat(obj2.style.top.replace(/px/,'')) - 1) + 'px';
294 break;
295 }
296 if (MoveDirection<3){
297 if (Pixel < parseFloat(ImageWidth + 1 + Distance)){
298 setTimeout(moveImage(obj1, obj2, ImageWidth, ImageHeight, Pixel, MoveDirection, Distance), 0);
299 }
300 }
301 else{
302 if (Pixel < parseFloat(ImageHeight + 1 + Distance)){
303 setTimeout(moveImage(obj1, obj2, ImageWidth, ImageHeight, Pixel, MoveDirection, Distance), 0);
304 }
305 }
306 }
307 )
308 }
309
310 Event.observe(window, 'load', GalleryShow, false);
