// JavaScript Document
/*
Image Slider 1.2
Stephen Au Yeung
http://tintat.net
$.fn.initPhotoSlider = function(frameWidth, //frame width
frameHeight, //frame height
photo_src_path, //path of source images(large images)
photo_thumb_path, //path of thumbnail images(small images)
arrPhotoData, //*array of images and captions
showPicNum, //display image no.
showThumbs, //display thumbnail images
bg_color, //background color of large image
bg_img, //background image of large image
text_align) //the alignment of caption, 0:left, 1:center, 2:right
*/
$.fn.centerAlign = function(nOrgWidth, nOrgHeight) {
var nParentWidth = $(this).parent().width();
var nNewLeft = Math.ceil((nParentWidth - nOrgWidth) / 2) ;
var nParentHeight = $(this).parent().height();
var nNewTop = Math.ceil((nParentHeight - nOrgHeight) / 2) ;
$(this).css({top : nNewTop, left : nNewLeft});
}
$.fn.sliderLoadPhoto = function(rootID, nMaxWidth, nMaxHeight) {
var nNewWidth, nNewaHeight ;
var nOrgWidth, nOrgHeight ;
var nOrgRatio, nNewRatio ;
var sNewPhotoSrc = $(this).find("a").attr("href") ;
var sNewPhotoCaption = $(this).find('span').text() ;
var img = new Image();
var newObj;
var objClick = this ;
$(rootID).find('li').removeClass('img_thumbnail_selected') ;
//remove img element(if any)
$(rootID).find('div#img_slider_photo_content img').remove() ;
//display loading signal
$(rootID).find('div#img_slider_photo_container').attr('display','block') ;
//$('#img_slider_photo_loading').attr('display','block') ;
$(this).addClass('img_thumbnail_selected') ;
$(img).load(function(){
if (navigator.appName != 'Microsoft Internet Explorer') {
$(this).removeAttr("width")
.removeAttr("height")
.css({ width: "", height: "" }); // Remove css dimensions as well
}
$(rootID).find('div#img_slider_photo_content').append(this);
//change the image dimension to fit parent DIV
nOrgWidth = Math.floor(this.width) ;
nOrgHeight = Math.floor(this.height) ;
nOrgRatio = nOrgHeight / nOrgWidth ;
nNewRatio = nMaxHeight / nMaxWidth ;
//if both WIDTH and HEIGHT are smaller than the nMaxSize, then no changes are made.
if (nOrgWidth <= nMaxWidth && nOrgHeight <= nMaxHeight){
nNewWidth = nOrgWidth ;
nNewHeight = nOrgHeight ;
}
// otherwise.....
else if (nOrgRatio > nNewRatio) {
if (nOrgHeight > nMaxHeight) {
nNewHeight = nMaxHeight ;
}
nNewWidth = Math.floor(nNewHeight/nOrgRatio) ;
}
else if (nOrgRatio < nNewRatio) {
if (nOrgWidth > nMaxWidth) {
nNewWidth = nMaxWidth ;
}
nNewHeight = Math.floor(nNewWidth * nOrgRatio) ;
}
else if (nOrgRatio == nNewRatio){
nNewWidth = nMaxWidth ;
nNewHeight = nMaxHeight ;
}
//change photo display size
$(this).css({width : nNewWidth, height : nNewHeight}) ;
//make photo align vertical and horizontal center
$(rootID).find('div#img_slider_photo_content').centerAlign(nNewWidth, nNewHeight);
if(sNewPhotoCaption != '') {
$(rootID).find('div#img_slider_photo_caption').html('' + sNewPhotoCaption)
.css({top : (nMaxHeight - 10) - $(rootID).find('div#img_slider_photo_caption').height()})
.css('display','block') ;
}
else {
$(rootID).find('div#img_slider_photo_caption').css('display','none') ;
}
//hide the loading signal
$(rootID).find('div#img_slider_photo_loading').attr('display','none') ;
$(rootID).find('div#img_slider_photo_container').css('filter','')
.fadeTo(500,1,function() {
});
}).attr('src',sNewPhotoSrc) ;
};
$.fn.clickToLoad = function(rootID, newWidth, newHeight) {
var objClicked = this ;
//var newObj;
// newObj = $(rootID).find('div#img_slider_photo_container')
$(rootID).find('div#img_slider_photo_container').stop().fadeTo(150, 0.0, function() {
$(objClicked).sliderLoadPhoto(rootID, newWidth, newHeight) ;
});
}
$.fn.initPhotoSlider = function(frameWidth, frameHeight,thumbSize,photo_src_path, photo_thumb_path, arrPhotoData, showPicNum, bg_color, bg_img, text_align) {
var rootObj ;
var newPanelWidth = 0 ;
var numThumbs = 0 ;
var containerWidth, containerHeight ;
var newThumbsWrapperWidth = 0 ;
var j, thumbdata ;
var thumbFrame ;
var numOfPic ;
var showArrow = true ;
var new_html_element, ext_html_element ;
var strPicNum ;
var thumb_font_size ;
var new_html_1, new_html_2 ;
rootObj = this ;
if (photo_src_path != undefined && photo_src_path != '') {
photo_src_path = jQuery.trim(photo_src_path) ;
if (photo_src_path.charAt(photo_src_path.length - 1) != '/') {
photo_src_path = photo_src_path + '/' ;
}
}
else {
photo_src_path = '' ;
}
if (photo_thumb_path != undefined && photo_thumb_path != '') {
photo_thumb_path = jQuery.trim(photo_thumb_path) ;
if (photo_thumb_path.charAt(photo_thumb_path.length - 1) != '/') {
photo_thumb_path = photo_thumb_path + '/' ;
}
}
else {
photo_src_path = '' ;
}
if (thumbSize == undefined || thumbSize == null || thumbSize == '' || thumbSize <= 0) {
thumbSize = 50 ;
}
thumbFrame = thumbSize + 16 ;
// frame width and height
if (frameWidth == undefined || frameWidth == null || frameWidth == '' || frameWidth <= 300 ) {
frameWidth = 500 ;
}
if (frameHeight == undefined || frameHeight == null || frameHeight == '' || frameHeight <= 400 ) {
frameHeight = 600 ;
}
if (showPicNum == undefined || showPicNum == null || showPicNum == '') {
showPicNum = false ;
}
if (text_align == undefined) {
text_align = 0 ;
}
if ((text_align < 0 ) || (text_align > 2)){
text_align = 0 ;
}
//IE8 array bug!!??
numOfPic = arrPhotoData.length ;
if (arrPhotoData[numOfPic - 1] == undefined) {
numOfPic-- ;
}
if ( ((numOfPic * thumbFrame) + 20) <= frameWidth) {
showArrow = false ;
numThumbs = numOfPic ;
newPanelWidth = thumbFrame * numOfPic ;
newThumbsWrapperWidth = newPanelWidth + 16 ;
}
else
{
numThumbs = Math.floor((frameWidth - 60) / thumbFrame) ;
newPanelWidth = (numThumbs * thumbFrame) ;
newThumbsWrapperWidth = newPanelWidth + 60 ;
}
thumb_font_size = Math.floor(thumbSize/5) ;
$(rootObj).css('width',frameWidth + 'px')
.css('height',frameHeight + 'px') ;
new_html_1 = '
' +
' ' ;
$(rootObj).append(new_html_1) ;
new_html_2 ='' ;
ext_html_element = '' ;
for (j=0;j' ; }
else {
ext_html_element = 'class="img_no_thumbnail"' ;
}
new_html_2 = '' +
'' +
'' + arrPhotoData[j][2] + '' +
'' +
thumbdata +
'
' + (j + 1) + '
' +
'
' + '
' +
'