Image Gallery
Image Gallery is a freely available Javascript for displaying images in an animated fashion. You can download this Javascript and use it on your website.
Image Gallery was originally developed for one of our customers and is now available for the public in an even extended version.
Note:
Image Gallery is now available as Version 1.0.4 which does no longer require external script libraries like Prototype and Scriptacolous. If you are used to
the previous version of Image Gallery please note that parameter FadeDuration now has to be specified in Milliseconds instead of Seconds. This new Version additionally
allows specifying the speed of moving images (parameter MoveSpeed).
Benefits
Image Gallery is a Javascript offering the following benefits:
-
Animated display of images without requirement of creating a Flash Application
-
Quick and easy adoption to new and different images
-
No deeper programming skills required
-
Extensible by your own programming
You can test functionality of this application by adjusting the settings of the example application below.
Download
Download: Image Gallery Javascript Ver. 1.0.4
Functionality
Image Gallery offers flexible functionality. You can steer application functionality by parameters.
The single parameters are described in detail below.
In general, you determine whether images are loaded from a defined URL (Unique Resource Locator) or if the filenames of all images
are stored in a specified (hidden) field and images are loaded from there. Additionally, you specify what type of animation shall be used.
Parameter
Functionality of the application is steered by parameters within the Javascript. You set these parameters by changing the
standard values of the parameters within the Javascript Code. The parameters are nearly the same as the ones you can set within the example application above.
The following parameters can be set within the Javascript Code:
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;
The parameters steer the application and have the following functions:
|
Variable:
|
Explanation:
|
|
GalleryContainer
|
The ID of the DIV Element in which the images shall be displayed.
|
|
GalleryMode
|
A number which determines whether images are shown in a moving a fading animation.
1: Fade images
2: Move images
|
|
isAdjustGallerySize
|
Boolean value, which determines, if the size of the gallery will be adjusted to the size of the first image.
True: Adjust size
False: Remain size constant
|
|
isByURL
|
Boolean Value, which determines, that images will be loaded from a specified URL.
True: images will be loaded from a specified URL.
False: images will be loaded from a specified field (sFieldName).
Note: isByURL = True requires the following parameters to be specified:
iMax
sURL
sFileName
sFileNameExtension
|
|
iMax
|
The number of images within the specified URL plus 1. Specify 10 in case 9 images shall be loaded.
|
|
sURL
|
The URL, to load images from. This can be a relative or absolute URL.
|
|
sFileName
|
The part of the filename of all images which stays constant. Filenames are expected as follows:
[sFileName][Increasing Number].[sFileNameExtension]
The Increasing Number will be determined by the application automatically.
It is expected that images are numbered from 1 to iMax-1.
Ex.:
sFileName = "Image"
sFileNameExtension = "jpg"
iMax = 11
All images from 1 to 10 will be loaded having the following names:
Image001.jpg, Image002.jpg, ..., image010.jpg
|
|
sFileNameExtension
|
The file name extension of the images files, i.e. jpg, gif, png, bmp, etc.
|
|
sFieldName
|
The name of the field which contains all filenames. In case isByURL = False images will be loaded from this field.
Note: isByURL = False requires the following field to be specified in case at least one filename does not contain a path:
sURL
|
|
ImageChangeDelay
|
The time in milliseconds after which an image is changed. For example, specify 12000, in order to change images after 12 seconds.
|
|
FadeDuration
|
The time in milliseconds which is used to fade in an image. The shorter the time is set the faster images will be changed.
Note: FadeDuration should be <= ImageChangeDelay.
Note: FadeDuration has to be specified in milliseconds from Version 1.0.4 on.
|
|
MoveDirection
|
A number which determines the direction in which images are moved.
1: Right -> Left
2: Left -> Right
3: Top -> Down
4: Bottom -> Up
|
|
Distance
|
In case images are configured to be moved this setting determines the distance between the images in Pixels.
By default, no distance will be shown between images. By specifying a distance a white space in size of the entered pixels will be shown.
|
|
MoveSpeed
|
In case images are configured to be moved this setting determines the speed of moving images.
By default, no delay will be when moving images - images are moved immediately pixel by pixel. By specifying a speed the images will be moved more slowly.
If, for example, a MoveSpeed of 50 Milliseconds is specified, images will be moved by 1 pixel every 50 Milliseconds. Moving an image completely, having a width of
400px, requires 20.000 Milliseconds. You should determine ImageChangeDelay accordingly, so enough time is available for moving an image before the next
image is to be shown.
Note: This setting is new with Version 1.0.4.
|
Details:
By specifying parameter isByURL you determine if images are loaded from an URL or if they are stored in a hidden field and loaded from there.
You use isByURL = False in case your server application determines all images dynamically and stores their filenames
in the hidden field specified in sFieldName. The list of filenames has to be a comma seperated list. Filenames can be
with or without path information. In case filenames are specified without path information, sURL has to be set in order
to correctly load image files. In this case all image files will be searched within the path specified by the URL.
Specify isByURL = True, in order to load all image files from this URL. Additionally set the following parameters described above
iMax
sURL
sFileName
sFileNameExtension,
in order to complete this setting.
Quick Start:
For a quick start use Image Gallery with default settings.
Adjust the following parameters only:
-
iMax
-
sURL
-
sFileName
-
sFileNameExtension.
HTML
The following HTML Code Example lists the minimal HTML Code required for a successful use of Image Gallery.
<!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>
Note: The Listing lists a reference to the Javascript file imageGallery.js, which contains the Code of Image Gallery as
external file. Alternatively insert the code as part of the HTML file.
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 }
