https://crsbenefits.com/scripts/photo_album.js

1function initGallery(galElId, galWidth, galHeight, relPath, bgColor, capColor, capFont,showGallery, autoplay, browsingControls, slideshowDelay, thumbLayout) {
2
3	var imageList = getImageList(galElId + "_thumbs", galWidth, galHeight, browsingControls);
4	
5	var hasCaption = false;
6	if(imageList != null){
7	   for (var j=0; j<imageList.length; j++){
8	      if (imageList[j][6] && imageList[j][6].length>0){
9		     hasCaption = true;
10			 break;
11		  }
12	   }
13	}
14	
15	
16	var height = galHeight;
17	var heightWithCaptionPanel = galHeight;
18	var heightOfNavPanel =35;
19	var heightOfCaptionPanel = this.calculateCaptionPanelHeight(25, thumbLayout, galHeight);;
20	
21	
22	//The controls are shown all the time we want gallery to be bigger and display controls at bottom of pic
23	if (browsingControls || hasCaption){
24		height = galHeight + heightOfNavPanel + Math.floor(galHeight/25);
25		heightWithCaptionPanel = galHeight + heightOfNavPanel + heightOfCaptionPanel + Math.floor(galHeight/25);
26	}
27	
28	var myGallery = new simpleGallery({
29		wrapperid: galElId + "_gallery", //ID of main gallery container,
30		galWidth: galWidth, //width/height of gallery in pixels. Should reflect dimensions of the images exactly
31		imagearray: imageList,
32		relpath: relPath,	
33		bgcolor: bgColor,
34		fontfamily: capFont,
35		fontcolor: capColor,
36		showControls : browsingControls,
37		showGallery: showGallery,				
38		autoplay: [autoplay, slideshowDelay, 200], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
39		persist: false, //remember last viewed slide and recall within same session?
40		calcCaptionPanelHeight: heightOfCaptionPanel,
41		fadeduration: 500, //transition duration (milliseconds)
42		oninit:function(){ //event that fires when gallery has initialized/ ready to run
43			//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
44		},
45		onslide:function(curslide, i){ //event that fires after each slide is shown
46			//Keyword "this": references current gallery instance
47			//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
48			//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
49		}
50	});
51
52	return myGallery;
53}
54
55function calculateCaptionPanelHeight(defaultHeightOfCaptionPanel, thumbLayout, galHeight){
56	    
57	    var calcHeightOfCaptionPanel = defaultHeightOfCaptionPanel;
58	    
59	    if(thumbLayout == null){
60	       thumbLayout = "";
61	    }
62		
63		if(thumbLayout == 'landscape'){
64	       //bump up the height to avoid overlap with captions.
65	       if(galHeight > 400){
66	          calcHeightOfCaptionPanel += 75;
67	       }
68	       else{
69	          calcHeightOfCaptionPanel += 35;
70	       }
71	    }
72	    else if(thumbLayout == 'square' && galHeight > 525){
73	       //bump up the height to avoid overlap with captions.
74	       calcHeightOfCaptionPanel += 65;
75	    }
76	    
77	    return calcHeightOfCaptionPanel
78}
79
80function getImageList(elemId, galWidth, galHeight , browsingControls){
81	var imgArray = $('#' + elemId).find('img');
82	var paramArray = new Array(imgArray.length);
83	
84	imgArray.each(function(i){
85
86		//[widht, height, html attribute]
87		var fittedDimension = getFittedDimension(this.attributes['orig_width'].value,this.attributes['orig_height'].value,galWidth,galHeight);
88		
89		paramArray[i] = [	this.attributes['source_path'].value,
90		                 	fittedDimension[0],
91							fittedDimension[1],
92							this.attributes['title'].value,
93							fittedDimension[2],
94							"margin:10px 0px;",
95							this.attributes['caption'].value];
96							
97	});
98	return paramArray;
99}
100
101/**
102 * fit the images to the widht and height column.
103 * return an array with the selected [width, height and html attribute for the <img> tag. 
104 * */
105function getFittedDimension(width, height, galWidth, galHeight){
106		width = parseInt(width);
107		height = parseInt(height);
108
109		var response = [width, height, ""];
110
111		if((height > 0) && (galHeight > 0)){
112			if((width < galWidth) && (height < galHeight)){
113				response = [width, height, ' width="' + width + 'px"'];
114
115			}else if((width/height) > (galWidth/galHeight)){ //image width ratio is larger
116				///width --> galWidth
117				///height --> x
118				response = [galWidth, Math.floor( (galWidth * height) / width) , ' width="' + galWidth + 'px"'];
119
120			}else{  //height ratio is larger
121				///height --> galHeight
122				///width  --> x
123				response = [Math.floor( (galHeight * width) /  height), galHeight, ' height="' + galHeight + 'px"'];
124			}
125		}
126		return response;
127}
128
129function getTopOffset(width, height, galWidth, galHeight, browsingControls){
130		var offSet;
131		var marginValue = 0;
132		if((height > 0) && (galHeight > 0)){
133			if((width < galWidth) && (height < galHeight)){
134				marginValue= Math.floor((galHeight-height)/2 ) ;
135			}else if((width/height) > (galWidth/galHeight)){ //image width ratio is larger... determine ratio to shrink height and pad
136				marginValue= Math.floor((galHeight-((galWidth/width)*height))/2) ;
137			}
138		}
139		//If browisng control shown all the time we want image to appear below the desc panel in gallery
140		
141		if (browsingControls){
142			marginValue = Math.floor(marginValue + (galHeight/25));
143			}
144		
145		marginValue = marginValue/4; //reduce the blank space
146		marginValue = Math.floor(marginValue);
147		offSet= "margin:" + marginValue + "px 0px;";
148		return offSet;
149}
150	
151function getThumbWidth(galleryWidth, thumbnailsPerRow) {
152	var iWidthCalc = galleryWidth / thumbnailsPerRow;
153	iWidthCalc = iWidthCalc - 8; /*margin right + margin left*/
154	return iWidthCalc;
155}
156
157$(window).bind("load", function() {
158	//get all albums
159	$(".wb_element_pa").each(function(i){
160		var thumbLayout = this.attributes['thumblayout'].value;
161		var heightFactor = 0;
162		switch(thumbLayout){
163			case "square":  //Slideshow with Thumbs
164				heightFactor = 1;
165				break;
166			case "landscape":
167				heightFactor = 0.75;
168				break;
169			case "portrait":
170				heightFactor = 1.5;
171				break;
172			default:
173				heightFactor = 0.75;
174		}
175		
176		var albumElId = this.id;
177		var galWidth = this.offsetWidth;

178		var galHeight = Math.floor(heightFactor * galWidth);
179
180	 	var relPath = this.attributes['relative_file_path'].value;
181		var bgColor = this.attributes['bg_color'].value;
182		var capColor = this.attributes['text_color'].value;
183		var capFont = this.attributes['text_font_family'].value;
184		
185		var thumbnailsPerRow = 1;
186		var sThumbsPerRow = this.attributes['thumbnails_per_row'];
187		if(sThumbsPerRow && !isNaN(sThumbsPerRow.value)){
188		   thumbnailsPerRow = parseFloat(sThumbsPerRow.value);
189		}
190
191		var thumbWidth = getThumbWidth((galWidth + 5), thumbnailsPerRow);
192		
193		
194		var thumbHeight = Math.floor(heightFactor * thumbWidth);
195		var thumbRatio = thumbWidth/thumbHeight;		
196		var autoplay = this.attributes['autoplay'].value;
197		//Make sure that old photo album which doesnot have the autoplay and slideshow attributes work as before
198		if (autoplay !==""){
199			if (autoplay ==='true'){
200				autoplay=true;
201			}else{
202				autoplay=false;
203			}
204		}else{
205			// default is start album in play mode
206			autoplay=true;
207		}
208		
209		var browsingControls =this.attributes['browsing_controls'].value;
210		if (browsingControls !==""){
211			if (browsingControls ==='true'){
212				browsingControls=true;
213			}else{
214				browsingControls=false;
215			}
216		}else{
217			//deafult is not show all the time
218			browsingControls=false;
219		}	
220		
221		var slideshowDelay = this.attributes['slideshow_delay'].value;
222		if (slideshowDelay === ''){
223			slideshowDelay = 4500
224		}
225				
226		var albumId = this.id;
227		var thumbDivId = albumId + '_thumbs'; 
228		
229		//prepare some variables to use in the loop
230		var captionHeight = thumbHeight/2;
231		if(captionHeight < 60){
232		   //allow for maximum caption length
233		   captionHeight = 60;
234		}
235		
236		var captionFontSize = Math.floor(thumbWidth/8);
237		if(captionFontSize > 12){

238		   captionFontSize = 12;
239		} 
240		
241		var thumbInterSpace = galWidth - (thumbWidth * thumbnailsPerRow);
242		thumbInterSpace = thumbInterSpace / (thumbnailsPerRow * 2 );
243		
244		thumbInterSpace = Math.floor(thumbInterSpace);
245	
246		$('#' + thumbDivId + ' div').each(function(i) {
247	      if(this.className == 'wb_element_paThumbBlock'){
248		            $(this).height(thumbHeight);  
249		            /*$(this).css('backgroundColor', bgColor);*/
250		      }else if(this.className == 'wb_element_paThumbContainer'){
251		            $(this).css("margin", '2px ' +  thumbInterSpace + 'px');
252		            $(this).css('width', thumbWidth + 'px');
253
254		      }else if(this.className == 'wb_element_paThumbRowSpacer'){
255		            $(this).height(5);
256		      }else{ //caption div
257		            $(this).height(captionHeight);    
258		            $(this).css('font-size', captionFontSize + 'px'); 
259		            $(this).css('font-family', capFont);                                      
260		      }
261
262			});   
263
264				
265		switch(this.attributes['album_type'].value){
266			case "1":  //Slideshow with Thumbs
267 				var showGallery = true;
268				var myGallery = initGallery(this.id, galWidth, galHeight, relPath, bgColor, capColor, capFont,showGallery, autoplay, browsingControls, slideshowDelay, thumbLayout);
269				myGallery.start();
270								
271				$('#' + thumbDivId + ' img').each(function(i) {		
272					$(this).css("cursor", "pointer");
273					
274					var imgRatio = this.attributes['thumb_width'].value/this.attributes['thumb_height'].value;
275
276					if ((this.attributes['thumb_width'].value < thumbWidth) && (this.attributes['thumb_height'].value < thumbHeight)){ //image already fits... middle align
277
278						$(this).width(this.attributes['thumb_width'].value + 'px');
279						$(this).height(this.attributes['thumb_height'].value + 'px');
280						 $(this).css("margin", Math.floor((thumbHeight - this.height)/2) + 'px 0px');
281						
282
283					} else if(imgRatio > thumbRatio){ //image width ratio is larger
284
285						$(this).width(thumbWidth);
286						$(this).height(Math.floor(thumbWidth / imgRatio));
287						 $(this).css("margin", Math.floor((thumbHeight - this.height)/2) + 'px 0px');
288
289																							
290					}else{
291
292						$(this).width(Math.floor(imgRatio * thumbHeight));
293						$(this).height(thumbHeight);
294					}	
295										
296					$(this).click(function(){
297						myGallery.navigate(i);
298					});
299				});
300				break;
301 
302			case "2":  //Slideshow Only
303				var showGallery = true;
304				var myGallery = initGallery(this.id, galWidth, galHeight, relPath, bgColor, capColor, capFont,showGallery, autoplay, browsingControls, slideshowDelay, thumbLayout);
305				myGallery.start();
306				break;
307
308			case "3":  //Thumbs Only
309				var showGallery = false;
310				
311				var myGallery = initGallery(this.id, galWidth, galHeight, relPath, bgColor, capColor, capFont,showGallery, autoplay, browsingControls, slideshowDelay, thumbLayout);
312				myGallery.start();
313				
314				$('#' + thumbDivId + ' img').each(function(i) {
315					$(this).css("cursor", "pointer");
316
317					var imgRatio = this.attributes['thumb_width'].value/this.attributes['thumb_height'].value;
318
319					if ((this.attributes['thumb_width'].value < thumbWidth) && (this.attributes['thumb_height'].value < thumbHeight)){ //image already fits... middle align			
320
321						$(this).width(this.attributes['thumb_width'].value + 'px');
322						$(this).height(this.attributes['thumb_height'].value + 'px');
323						$(this).css("margin-top", Math.floor((thumbHeight - this.height)/2));
324						
325					} else if(imgRatio > thumbRatio){ //image width ratio is larger
326						$(this).width(thumbWidth);
327						$(this).height(Math.floor(thumbWidth / imgRatio));
328						$(this).css("margin-top", Math.floor((thumbHeight - this.height)/2));
329																							
330					}else{
331						$(this).width(Math.floor(imgRatio * thumbHeight));
332						$(this).height(thumbHeight);
333					}	
334															
335					$(this).click(function(){
336						$('#' + albumId + '_galleryHolder').css("y", $('#' + thumbDivId).position().top);
337						$('#' + albumId + '_galleryHolder').css("display", "block");
338						myGallery.navigate(i);					
339					});
340				});
341				break;
342
343			default:
344				alert('def');
345		}
346	});
347});