"); //change with YOUR loader image path
});
var j = 0;
jQuery.fn.slideViewerPro = function(settings) {
settings = jQuery.extend({
galBorderWidth: 6,
thumbsTopMargin: 8,
thumbsRightMargin: 4,
thumbsBorderWidth: 3,
buttonsWidth: 40,
galBorderColor: "#ff0000",
thumbsBorderColor: "#d8d8d8",
thumbsActiveBorderColor: "#ff0000",
buttonsTextColor: "#ff0000",
thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
easeTime: 750,
asTimer: 4000,
thumbs: 5,
thumbsPercentReduction: 12,
thumbsVis: true,
easeFunc: "easeInOutExpo",
leftButtonInner: "-", //could be an image "
" or an escaped char as "&larr";
rightButtonInner: "+", //could be an image or an escaped char as "&rarr";
autoslide: false,
typo: false,
typoFullOpacity: 0.9,
shuffle: false,
pictMaxHeight: 0,
totalMaxHeight: 0,
thumbsExtraSpace: 0,
imgSize: 0
}, settings);
return this.each(function(){
function shuffle(a) {
var i = a.size();
while (--i) {
var j = Math.floor(Math.random() * (i));
var tmp = a.slice(i, i+1);
a.slice(j, j+1).insertAfter(tmp);
}
}
var container = jQuery(this);
(!settings.shuffle) ? null : shuffle(container.find("li"));
container.find("img.ldrgif").remove();
container.removeClass("svwp").addClass("slideViewer");
container.attr("id", "svwp"+j);
//var pictWidth = container.find("img").attr("width");
var pictWidth = settings.imgSize;
var pictHeight = container.find("img").attr("height");
var pictEls = container.find("li").size();
(pictEls >= settings.thumbs) ? null : settings.thumbs = pictEls;
var slideViewerWidth = pictWidth*pictEls;
var thumbsWidth = Math.round(pictWidth*settings.thumbsPercentReduction/100);
var thumbsHeight = Math.round(pictHeight*settings.thumbsPercentReduction/100);
//var thumbsMaxHeight = Math.round(pictMaxHeight*settings.thumbsPercentReduction/100);
var pos = 0;
var r_enabled = true;
var l_enabled = true;
//pictWidth = 500;
//slideViewerWidth = pictWidth*pictEls;
container.find("ul").css("width" , slideViewerWidth)
.wrap(jQuery("- <\/ul><\/div>");
jQuery(this).next().after(""+settings.leftButtonInner+"<\/a>"+settings.rightButtonInner+"<\/span><\/a>");
jQuery(this).find("li").each(function(n) {
// dep var thumb_margin = parseInt(jQuery(this).find("img").css("margin-top"));
// dep thumb_margin = Math.round(thumb_margin*settings.thumbsPercentReduction/100);
var real_height = jQuery(this).find("img").height();
var real_width = jQuery(this).find("img").width();
//thumb_height = Math.round(real_height*settings.thumbsPercentReduction/100);
var thumb_width = jQuery(this).find("img").width();
thumb_width = Math.round(thumb_width*settings.thumbsPercentReduction/100);
//var thumb_height = Math.round(settings.pictMaxHeight*settings.thumbsPercentReduction/100);
var thumb_height =50;
var thumb_left = Math.round(((real_width*thumb_height/real_height)-thumb_height)/2);
thumbsWidth = thumb_height;
if (jQuery.support.boxModel) {
thumb_height = thumb_height - 2;
}
jQuery("div#thumbSlider" + j + " ul").append("
- <\/li>"); //jQuery("div#thumbSlider" + j + " ul").append("
<\/p><\/a><\/li>"); }); jQuery("div#thumbSlider" + j + " div.picframe").each(function(z) { jQuery(this).bind("click", function(){ jQuery(this).css({borderColor: settings.thumbsActiveBorderColor}); jQuery(this).parent().parent().find("div.picframe").not(jQuery(this)).css({borderColor: settings.thumbsBorderColor}); var cnt = -(pictWidth*z); //(cnt != container.find("ul").css("left").replace(/px/, "")) ? container.find("span.typo").animate({"opacity": 0}, 250) : null ; //container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc, function(){container.find("span.xtypo").animate({"opacity": settings.typoFullOpacity}, 250)}); container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc); return false; }); }); // shortcuts to +/- buttons var jQuerybtl = jQuery("a#left" + j); var jQuerybtr = jQuery("a#right" + j); // right/left jQuerybtr.bind("click", function(){ if (r_enabled) (pictEls-pos > settings.thumbs*2 || pictEls%settings.thumbs == 0)? pos += settings.thumbs : pos += pictEls % settings.thumbs; r_enabled = false; jQuery(this).prev().prev().find("ul:not(:animated)").animate({ left: -(thumbsWidth+settings.thumbsRightMargin)*pos}, 500, settings.easeFunc, function(){authorityMixing();}); return false; }); jQuerybtl.bind("click", function(){ if (l_enabled && pos!=0) (pictEls-pos > settings.thumbs || pictEls%settings.thumbs == 0)? pos -= settings.thumbs : pos -= pictEls % settings.thumbs; l_enabled = false; jQuery(this).prev().find("ul:not(:animated)").animate({ left: -(thumbsWidth+settings.thumbsRightMargin)*pos}, 500, settings.easeFunc, function(){authorityMixing();}); return false; }); function authorityMixing() { //right btt (pos == pictEls-settings.thumbs) ? jQuerybtr.addClass("r_dis") : jQuerybtr.removeClass("r_dis"); (pos == pictEls-settings.thumbs) ? r_enabled = false : r_enabled = true; //left btt (pos == 0) ? jQuerybtl.addClass("l_dis") : jQuerybtl.removeClass("l_dis"); (pos == 0) ? l_enabled = false : l_enabled = true; } //CSS defs @ runtime var tBorder = settings.thumbsBorderWidth; var contBorder = settings.galBorderWidth jQuery(".slideViewer a img").css({border: "0"}); if(settings.typo) { jQuery(this).find("span.typo").each(function(z) { var my_height = jQuery(this).prev().height(); var my_top = parseInt(jQuery(this).prev().css("margin-top")); jQuery(this).css({marginTop: (my_height+my_top+jQuery(this).innerHeight()), opacity: settings.typoFullOpacity}); //jQuery(this).css({marginTop: (pictHeight-jQuery(this).innerHeight()), opacity: settings.typoFullOpacity}); }); } jQuery("div#svwp"+ j).css({border: settings.galBorderWidth +"px solid "+settings.galBorderColor}); jQuery("div#thumbSlider" + j).css({position: "relative", left: contBorder, top: settings.thumbsTopMargin+"px", width: settings.thumbs*thumbsWidth+(((settings.thumbsRightMargin+settings.thumbsExtraSpace)*settings.thumbs)-settings.thumbsRightMargin), height: thumbsHeight, textAlign: "center", overflow: "hidden", margin: "0 auto"}); jQuery("div#thumbSlider" + j + " ul").css({width: (thumbsWidth*pictEls)+(settings.thumbsRightMargin + settings.thumbsExtraSpace)*pictEls, position: "relative", left: "0", top: "0"}); jQuery("div#thumbSlider" + j + " ul li").css({marginRight: settings.thumbsRightMargin}); //dep jQuery("div#thumbSlider" + j).find("p.tmbrdr").css({width: (thumbsWidth-tBorder*2)+"px", height: (thumbsHeight-tBorder*2) +"px", top: -(thumbsHeight) +"px", border: settings.thumbsBorderWidth +"px solid "+settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity}); //dep jQuery("div#thumbSlider" + j + " a:first p.tmbrdr").css({borderColor: settings.thumbsActiveBorderColor, opacity: settings.thumbsActiveBorderOpacity}); // jQuery("div#thumbSlider" + j).css({position: "relative", left: contBorder, top: settings.thumbsTopMargin+"px", width: settings.thumbs*thumbsWidth+((settings.thumbsRightMargin*settings.thumbs)-settings.thumbsRightMargin), height: thumbsHeight, textAlign: "center", overflow: "hidden", margin: "0 auto"}); // jQuery("div#thumbSlider" + j + " ul").css({width: (thumbsWidth*pictEls)+settings.thumbsRightMargin*pictEls, position: "relative", left: "0", top: "0"}); // jQuery("div#thumbSlider" + j + " ul li").css({marginRight: settings.thumbsRightMargin}); // jQuery("div#thumbSlider" + j).find("p.tmbrdr").css({width: (thumbsWidth-tBorder*2)+"px", height: (thumbsHeight-tBorder*2) +"px", top: -(thumbsHeight) +"px", border: settings.thumbsBorderWidth +"px solid "+settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity}); // jQuery("div#thumbSlider" + j + " a:first p.tmbrdr").css({borderColor: settings.thumbsActiveBorderColor, opacity: settings.thumbsActiveBorderOpacity}); jQuery("div#thumbSlider" + j + " div.picframe:first").css({borderColor: settings.thumbsActiveBorderColor}); var rbttLeftMargin = (pictWidth/2) + (jQuery("div#thumbSlider" + j).width()/2) + settings.thumbsRightMargin + contBorder; var lbttLeftMargin = (pictWidth/2) - (jQuery("div#thumbSlider" + j).width()/2) - (settings.buttonsWidth + settings.thumbsRightMargin) + contBorder; var innerImgH = jQuery("a#right" + j + " span img").attr("height"); jQuery("a#left" + j).css({display: "block", float: "left", textAlign: "center", width: settings.buttonsWidth + "px" , height: thumbsHeight+"px", margin: -(thumbsHeight-settings.thumbsTopMargin) +"px 0 0 "+lbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor}); jQuery("a#right" + j).css({display: "block", float: "left", textAlign: "center", width: settings.buttonsWidth + "px", height: thumbsHeight+"px" , margin: -(thumbsHeight) +"px 0 0 "+rbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor}); jQuery("a#left" + j + " span img").css({margin: Math.round((thumbsHeight/2)-(innerImgH/2))+"px 0 0 0"}); jQuery("a#right" + j + " span img").css({margin: Math.round((thumbsHeight/2)-(innerImgH/2))+"px 0 0 0"}); authorityMixing(); if(settings.autoslide){ var i = 1; jQuery("div#thumbSlider" + j).everyTime(settings.asTimer, "asld", function() { jQuery(this).find("a").eq(i).trigger("click"); if(i == 0) { pos = 0; l_enabled = false; jQuery("div#thumbSlider" + j).find("ul:not(:animated)").animate({ left: -(thumbsWidth+settings.thumbsRightMargin)*pos}, 500, settings.easeFunc, function(){authorityMixing();}); } else l_enabled = true; (i%settings.thumbs == 0)? jQuery(this).next().next().trigger("click") : null; (i < pictEls-1)? i++ : i=0; }); //stops autoslidemode jQuery("a#right" + j).bind("mouseup", function(){ jQuery(this).prev().prev().stopTime("asld"); }); jQuery("a#left" + j).bind("mouseup", function(){ jQuery(this).prev().stopTime("asld"); }); jQuery("div#thumbSlider" + j + " a").bind("mouseup", function(){ jQuery(this).parent().parent().parent().stopTime("asld"); }); } var uiDisplay = (settings.thumbsVis)? "block":"none"; jQuery("div#thumbSlider" + j + ", a#left" + j + ", a#right" + j).wrapAll("
<\/div>"); jQuery("div#svwp"+ j + ", div#ui" + j).wrapAll("<\/div>"); }); (jQuery("div#thumbSlider" + j).width()+(settings.buttonsWidth*2) >= pictWidth)? alert("ALERT: THE THUMBNAILS SLIDER IS TOO WIDE! \nthumbsPercentReduction and/or buttonsWidth needs to be scaled down!") : null; j++; }); };