Image Gallery
Image Gallery ist ein frei verfügbares Javascript, mit dem Bilder animiert dargestellt werden können. Sie können dieses Javascript herunterladen und für Ihre
Webseite verwenden.
Image Gallery wurde ursprünglich für einen unserer Kunden geschrieben und steht Ihnen nun in einer erweiterten Version zur Verfügung.
Hinweis:
Image Gallery ist nun in der Version 1.0.4 verfügbar. Diese benötigt keine externen Script Bibliotheken wie Prototype und Scriptacolous.
Wenn Sie bisher mit der vorherigen Version gearbeitet haben, berücksichtigen Sie bitte, dass in dieser neuen Version der Parameter
FadeDuration in Millisekunden anstatt Sekunden angegeben werden muss. Die neue Version erlaubt zusätzlich eine Angabe
der Geschwindigkeit für das Bewegen von Bildern (Paramter MoveSpeed).
Vorteile
Image Gallery ist ein Javascript und bietet die folgenden Vorteile:
-
Animierte Anzeige von Bildern ohne Notwendigkeit, eine aufwendige Flash Applikation zu erstellen
-
Leichte und schnelle Anpassung an neue Bilder
-
Keine tiefen Programmierkenntnisse nötig
-
Erweiterbar durch eigene Programmierung
Sie können die Funktionen dieser Applikation testen, indem Sie unten die Einstellungen der Beispiel Applikation ändern.
Download
Download: Image Gallery Javascript Ver. 1.0.4
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 = 8000;
var MoveDirection = 2;
var Distance = 0;
var MoveSpeed = 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 Millisekunden, 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.
Hinweis: FadeDuration muss seit Version 1.0.4 in Millisekunden angegeben werden.
|
|
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.
|
|
MoveSpeed
|
Falls Bilder bewegt animiert werden, dann bestimmen Sie mit diesem Parameter die Geschwindigkeit der Bewegung.
Standardmäßig werden Bilder Bilder ohne Verzögerung Pixel für Pixel bewegt. Durch Angabe einer Geschwinddigkeit verlangsamt
sich die Bewgung. Falls zB. ein MoveSpeed von 50 Millisekunden spezifiziert wird, dann wird das Bild alle 50 Millisekunden 1 Pixel
weit bewegt. Um ein Bild komplett zu verschieben, welches zB. eine Breite von 400px besitzt, sind 20.000 Millisekunden nötig. Sie
sollten ImageChangeDelay angemessen definieren, so dass genügend Zeit für das vollständige Bewegen des Bildes zur Verfügung steht.
Hinweis: Dieser Parameter ist neu ab Version 1.0.4.
|
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.
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/imageGallery.js"></script>
<style type="text/css">
.Gallery{width:200px;height:280px;margin-left:150px;border:solid 5px Gray;overflow:hidden;position:relative}
</style>
</head>
<body>
<form name="myForm" id="myForm" method="post" action="">
<input type="hidden" id="AllImages" name="AllImages" value="" />
</form>
<div id="Gallery" class="Gallery">
</div>
</body>
</html>
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
001 /*
002 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
003 Javascript (JS) driven Image Gallery
004 Ver.: 1.0.0
005 Date: September 2009
006 Author: Uwe Gemsjäger
007 (c) digital-ecom GmbH
008
009 Function: This JS displays images in an animated fashion. The type of animation can be specified by application settings.
010 The JS benefits are:
011 - Easy to adapt to a different set of images
012 - ... in a new location
013 - No need of Flash for display of images in an animated fashion ...
014 - No expensive reprogramming of Flash files in case the set of images changed ...
015 - Less CPU expensive than Flash ...
016
017 Ver.: 1.0.4
018 Date: April 2011
019 Author: Uwe Gemsjäger
020 (c) digital-ecom GmbH
021
022 Changes: The script no longer requires the external script libraries Scriptacolous + Prototype.
023 The script now uses Milliseconds as unique measurement unit for ImageChangeDelay + FadeDuration.
024 The script now allows determining the speed in milliseconds for moving images (MoveSpeed).
025 The script now uses its own Event Listener function for starting ImageGallery.
026
027 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
028 */
029
030 /*
031 ////////////////////////////////////////////////////////////////////////////////////////////////
032 Specify global variable which get assigned to setTimeout functions - allowing to stop those functions on demand (-> clearTimeout()).
033 ////////////////////////////////////////////////////////////////////////////////////////////////
034 */
035 var myGallery;
036 var myFade;
037 var myMove;
038 /*
039 ////////////////////////////////////////////////////////////////////////////////////////////////
040 Core function, loaded by onload event of body.
041 ////////////////////////////////////////////////////////////////////////////////////////////////
042 */
043 function GalleryShow()
044 {
045 // Specify application settings:
046 var GalleryContainer = 'Gallery'; // The DIV which will contain all your images.
047 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.
048 var isAdjustGallerySize = true; // Picks up 1st image, obtains its size and adjusts size of GalleryContainer to image size.
049 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.
050 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).
051 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.
052 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.)
053 var sFileNameExtension = 'jpg'; // if isByURL is true, the type of Image has to be specified (i.e. jpg, gif, bmp, etc.).
054 var sFieldName = 'AllImages'; // The FieldName, which contains all image file names.
055 var ImageChangeDelay = 12000; // Time in msec until the next image is loaded.
056 var FadeDuration = 8000; // When GalleryMode = 1, specify how fast fading is performed.
057 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.
058 var Distance = 0; // When GalleryMode = 2, specify the empty space in Pixels between Image1 and Image2. Specify 0 if no Distance is desired.
059 var MoveSpeed = 0; // When GalleryMode = 2, specify the speed of moving an image (in milliseconds). Ex.: 0 = fast (no delay), 10 = medium, 50 = slow. You can specify any number but keep in mind that moving i.e. every 50 milliseconds will move the image by 1 px. An image of 400px width requires 20.000 milliseconds to be moved completely. This might conflict with ImageChangeDelay.
060
061 var objGalleryContainer = document.getElementById(GalleryContainer); // Do not change ...
062
063 // 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.):
064 var aPics = ImageList_Get(isByURL, iMax, sURL, sFileName, sFileNameExtension, sFieldName);
065 objGalleryContainer.innerHTML = GalleryHTML_Set(aPics, isAdjustGallerySize, GalleryContainer);
066
067 var ImageList = objGalleryContainer.getElementsByTagName('img');
068 for (var j=0; j < ImageList.length; j++){
069 if(j!=0){
070 ImageList[j].style.display = 'none';
071 }
072 }
073 var ImageLast = ImageList.length -1;
074 var ImageFirst = 0;
075 var ImageCurrent = 0;
076
077 // Depending on the GalleryMode specified, animate images by using scheduled functions. Those functions will call themselves again, partly.
078 if (GalleryMode == 1){
079 myGallery = setTimeout(fadeElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, FadeDuration), ImageChangeDelay);
080 }
081 else{
082
083 myGallery = setTimeout(moveElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, MoveDirection, Distance, MoveSpeed), ImageChangeDelay);
084 }
085 }
086
087 /*
088 ////////////////////////////////////////////////////////////////////////////////////////////////
089 Supplemental functions ...
090 ////////////////////////////////////////////////////////////////////////////////////////////////
091 */
092
093 /*
094 Get images list as array ...
095 */
096 function ImageList_Get(isByURL, iMax, sURL, sFileName, sFileNameExtension, sFieldName)
097 {
098 if (sURL.substring(sURL.length-1, 1) != '/'){
099 sURL += '/';
100 }
101
102 if (isByURL){
103 return ImageList_ByPath(iMax, sURL, sFileName, sFileNameExtension);
104 }
105 else{
106 return ImageList_ByFieldList(sURL, sFieldName);
107 }
108 }
109
110 function ImageList_ByPath(iMax, sURL, sFileName, sFileNameExtension)
111 {
112 var aPics = new Array();
113 if (isNaN(iMax) || iMax<1){
114 aPics[0] = '';
115 }
116 else{
117 for (var i=1;i<iMax;i++){
118 if (i<10){
119 aPics[i-1] = sURL + sFileName + '00' + i + '.' + sFileNameExtension;
120 }
121 else if(i<100){
122 aPics[i-1] = sURL + sFileName + '0' + i + '.' + sFileNameExtension;
123 }
124 else{
125 aPics[i-1] = sURL + sFileName + i + '.' + sFileNameExtension;
126 }
127 }
128 }
129 return aPics;
130 }
131
132 function ImageList_ByFieldList(sURL, sFieldName)
133 {
134 var aPics = new Array();
135 var aTMP = new Array();
136 if (document.getElementById(sFieldName) == undefined || document.getElementById(sFieldName).value == ''){
137 aPics[0] = '';
138 }
139 else{
140 aTMP = document.getElementById(sFieldName).value.split(',');
141 for (var i=0; i<aTMP.length; i++){
142 if (aTMP[i].indexOf('/')>-1){
143 aPics.push(aTMP[i]);
144 }
145 else{
146 aPics.push(sURL + aTMP[i]);
147 }
148 }
149 }
150 return aPics;
151 }
152
153 /*
154 Create HTML of images by using the array of images ...
155 */
156 function GalleryHTML_Set(aPics, isAdjustGallerySize, GalleryContainer)
157 {
158 var sHTML = '';
159 var sFileName = '';
160 for (var i=0;i<aPics.length;i++){
161 sFileName = FileName(aPics[i]);
162 if (isAdjustGallerySize && i==0){
163 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\" />';
164 }
165 else{
166 sHTML += '<img id="\img_' + i + '\" src=\"' + aPics[i] + '\" alt=\"' + sFileName + '\" title=\"' + sFileName + '\" style=\"border:0px;position:absolute;left:0px;top:0px\" />';
167 }
168 }
169 return sHTML;
170 }
171
172 function FileName(sURL)
173 {
174 var p = sURL.lastIndexOf('/');
175 if (p>-1){
176 return sURL.substring(p+1, sURL.length);
177 }
178 else{
179 return sURL;
180 }
181 }
182
183 /*
184 If to adjust size of Gallery, adjust its size by size of first image ...
185 */
186 function GallerySize_Adjust(Img1_ID, GalleryContainer_ID)
187 {
188 var ImageWidth;
189 var ImageHeight;
190 var Img1 = document.getElementById(Img1_ID);
191 var GalleryContainer = document.getElementById(GalleryContainer_ID);
192
193 if (Img1.clientWidth){
194 ImageWidth = Img1.clientWidth;
195 ImageHeight = Img1.clientHeight;
196 }
197 else{
198 ImageWidth = Img1.innerWidth;
199 ImageHeight = Img1.innerHeight;
200 }
201 GalleryContainer.style.width = parseFloat(ImageWidth) + 'px';
202 GalleryContainer.style.height = parseFloat(ImageHeight) + 'px';
203 }
204
205 /*
206 The Animation Functions ...
207 */
208
209 // Fade images in/out
210 function fadeElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, FadeDuration)
211 {
212 return (function()
213 {
214 ImageList[ImageCurrent].style.position = "absolute";
215 ImageList[ImageCurrent].style.left = document.getElementById('Gallery').style.left;
216
217 fadeOut(ImageList[ImageCurrent].id, FadeDuration);
218 if (ImageCurrent == ImageLast){
219 ImageCurrent = ImageFirst;
220 }
221 else{
222 ImageCurrent++;
223 }
224 fadeIn(ImageList[ImageCurrent].id, FadeDuration);
225
226 myGallery = setTimeout(fadeElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, FadeDuration), ImageChangeDelay);
227 }
228 )
229 }
230
231 function fadeIn(sID, FadeDuration) {
232 setTransparent(sID);
233 opacity(sID, 0, 100, FadeDuration);
234 }
235
236 function fadeOut(sID, FadeDuration) {
237 opacity(sID, 100, 0, FadeDuration);
238 }
239
240 function opacity(sID, opacStart, opacEnd, millisec) {
241 //speed for each frame (we will get 100 frames max)
242 var speed = Math.round(millisec / 100);
243 var timer = 0;
244
245 //determine the direction for the blending, if start and end are the same nothing happens
246 if (opacStart > opacEnd) {
247 for (i = opacStart; i >= opacEnd; i--) {
248 myFade = setTimeout("changeOpac(" + i + ", '" + sID + "', '" + opacEnd + "')", (timer * speed));
249 timer++;
250 }
251 } else if (opacStart < opacEnd) {
252 if (document.getElementById(sID).style.display == 'none') {
253 document.getElementById(sID).style.display = 'block';
254 }
255 for (i = opacStart; i <= opacEnd; i++) {
256 myFade = setTimeout("changeOpac(" + i + ", '" + sID + "', '" + opacEnd + "')", (timer * speed));
257 timer++;
258 }
259 }
260 }
261
262 // change the opacity for different browsers
263 function changeOpac(opacity, sID, opacEnd) {
264 try {
265 var objStyle = document.getElementById(sID).style;
266
267 objStyle.opacity = (opacity / 100);
268 objStyle.MozOpacity = (opacity / 100);
269 objStyle.KhtmlOpacity = (opacity / 100);
270 objStyle.filter = "alpha(opacity=" + opacity + ")";
271 }
272 catch (e) { }
273 }
274
275 // When fading in an image for the first time avoid flickering by setting image to transparent first
276 function setTransparent(sID) {
277 try {
278 var objStyle = document.getElementById(sID).style;
279
280 objStyle.opacity = (0);
281 objStyle.MozOpacity = (0);
282 objStyle.KhtmlOpacity = (0);
283 objStyle.filter = "alpha(opacity=0)";
284 }
285 catch (e) { }
286 }
287
288 // Move Elements
289 function moveElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, MoveDirection, Distance, MoveSpeed)
290 {
291 return (function()
292 {
293 var ImageWidth;
294 var ImageHeight;
295 var Img1 = ImageList[ImageCurrent];
296 if (ImageCurrent >= ImageLast){
297 var Img2 = ImageList[ImageFirst];
298 }
299 else{
300 var Img2 = ImageList[ImageCurrent +1];
301 }
302
303 Img1.style.display = 'block';
304 Img2.style.display = 'block';
305
306 if (Img1.clientWidth){
307 ImageWidth = Img1.clientWidth;
308 ImageHeight = Img1.clientHeight;
309 }
310 else{
311 ImageWidth = Img1.innerWidth;
312 ImageHeight = Img1.innerHeight;
313 }
314
315 switch (MoveDirection){
316 case 1:
317 Img2.style.left = parseFloat(ImageWidth + Distance) + 'px';
318 break;
319 case 2:
320 Img2.style.left = parseFloat(ImageWidth*(-1) - Distance) + 'px';
321 break;
322 case 3:
323 Img2.style.top = parseFloat(ImageHeight*(-1) - Distance) + 'px';
324 break;
325 case 4:
326 Img2.style.top = parseFloat(ImageHeight + Distance) + 'px';
327 break;
328 }
329
330 myMove = setTimeout(moveImage(Img1, Img2, ImageWidth, ImageHeight, 1, MoveDirection, Distance, MoveSpeed), 0);
331
332 if (ImageCurrent == ImageLast){
333 ImageCurrent = ImageFirst;
334 }
335 else{
336 ImageCurrent++;
337 }
338 myGallery = setTimeout(moveElements(ImageCurrent, ImageFirst, ImageLast, ImageList, ImageChangeDelay, MoveDirection, Distance, MoveSpeed), ImageChangeDelay);
339 }
340 )
341 }
342
343 function moveImage(obj1, obj2, ImageWidth, ImageHeight, Pixel, MoveDirection, Distance, MoveSpeed)
344 {
345 return (function()
346 {
347 Pixel += 1;
348 switch(MoveDirection){
349 case 1:
350 obj1.style.left = parseFloat(parseFloat(obj1.style.left.replace(/px/,'')) - 1) + 'px';
351 obj2.style.left = parseFloat(parseFloat(obj2.style.left.replace(/px/,'')) - 1) + 'px';
352 break;
353 case 2:
354 obj1.style.left = parseFloat(parseFloat(obj1.style.left.replace(/px/,'')) + 1) + 'px';
355 obj2.style.left = parseFloat(parseFloat(obj2.style.left.replace(/px/,'')) + 1) + 'px';
356 break;
357 case 3:
358 obj1.style.top = parseFloat(parseFloat(obj1.style.top.replace(/px/,'')) + 1) + 'px';
359 obj2.style.top = parseFloat(parseFloat(obj2.style.top.replace(/px/,'')) + 1) + 'px';
360 break;
361 case 4:
362 obj1.style.top = parseFloat(parseFloat(obj1.style.top.replace(/px/,'')) - 1) + 'px';
363 obj2.style.top = parseFloat(parseFloat(obj2.style.top.replace(/px/,'')) - 1) + 'px';
364 break;
365 }
366 if (MoveDirection<3){
367 if (Pixel < parseFloat(ImageWidth + 1 + Distance)){
368 myMove = setTimeout(moveImage(obj1, obj2, ImageWidth, ImageHeight, Pixel, MoveDirection, Distance, MoveSpeed), MoveSpeed);
369 }
370 }
371 else{
372 if (Pixel < parseFloat(ImageHeight + 1 + Distance)){
373 myMove = setTimeout(moveImage(obj1, obj2, ImageWidth, ImageHeight, Pixel, MoveDirection, Distance, MoveSpeed), MoveSpeed);
374 }
375 }
376 }
377 )
378 }
379
380
381 // Use this function in order to stop all current animations i.e. in order to display a bigger sized image of an animated image (-> Lightbox)
382 function GalleryStop() {
383 try {
384 window.clearTimeout(myFade);
385 window.clearTimeout(myMove);
386 window.clearTimeout(myGallery);
387 }
388 catch (ex) { }
389 }
390
391 // Use this function in order to stop all current animations and restart it again (i.e. after your Lightbox closed).
392 function GalleryReload() {
393 GalleryStop();
394 GalleryShow();
395 }
396
397 // Start the Image Gallery
398 if (window.addEventListener) {
399 window.addEventListener("load", GalleryShow, false);
400 }
401 else {
402 if (window.attachEvent) {
403 window.attachEvent("onload", GalleryShow);
404 }
405 else {
406 try {
407 window.onload = GalleryShow();
408 }
409 catch (ex) { }
410 }
411 }
