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 in an extended version.
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
Partly, Image Gallery requires the following scripts in order to deliver all of its functions:
Download: Image Gallery Javascript
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 = 12;
var MoveDirection = 2;
var Distance = 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 seconds 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.
|
|
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.
By default, no distance will be shown between images. By specifying a distance a white space in size if the entered pixels will be shown.
|
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.
Requirements
Image Gallery requires the following Javascripts, in order to allow fading of images:
Note: These Scripts are not required in case you wish to show images with movements only.
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/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>
Note: The Listing uses references to the scripts Prototype and Scriptaculous,
which are required only in case fading of images shall be used.
Note: In case you do not want to use the Scripts Prototype and Scriptaculous, Image Gallery may not be started with the function
Event.observe(). Instead use the onload Event of the body Element.
Ex.: <body onload="GalleryShow();">
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
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);
