"
+ '
");
this.$elem.append($html);
this.$imgContainer = this.$elem.find(".galleryTop");
this.$textContainer = this.$elem.find(".galleryText");
$html.find(".btn").bind("click", $.proxy(this, "show"));
},
show: function(ev){
if(! this.isAnimating){
this.isAnimating = true;
if(ev != undefined){
if($(ev.target).hasClass("btnNext")){
this.currentlyShown ++;
if(this.currentlyShown >= this.numBlocks)
this.currentlyShown = 0;
}
else if($(ev.target).hasClass("btnPrev")){
this.currentlyShown --;
if(this.currentlyShown < 0)
this.currentlyShown = this.numBlocks - 1;
}
}
var duration = 200;
this.$imgContainer.find("IMG").fadeOut(duration);
this.$textContainer.find(".imgDescription").fadeOut(duration, $.proxy(function(){
this.$textContainer.html("");
this.$imgContainer.html("");
var $img = this.$blocks.eq(this.currentlyShown).find("IMG").first().clone();
var $text = this.$blocks.eq(this.currentlyShown).find(".imgDescription").first().clone();
if($text.html() == '')
$text.html(" ");
this.$imgContainer.append($img.hide());
this.$textContainer.append($text.hide());
$img.fadeIn(duration);
$text.fadeIn(duration, $.proxy(function(){this.isAnimating = false}, this));
this.$elem.find(".galleryCount1").html(this.currentlyShown+1);
this.isAnimating = true;
}, this));
}
}
};
/** GLIDER **/
GliderHoriz = function(element, viscount){
// find necessary elements
this.$element = $(element);
this.$ul = this.$element.find("ul").first();
this.$left = this.$element.find("a.d_btnPageLeft").first();
this.$right = this.$element.find("a.d_btnPageRight").first();
this.$items = this.$ul.children();
// set initial values
this.animating = false;
this.currentIndex = 0;
this.itemWidth = this.$items.eq(0).innerWidth(); // get standard width of '
+ '
1 / ' + this.numBlocks +'
'
+ ''
+ ' 
'
+ ' 
'
+ '
'
+ "'
+ ' '
+ ' with your margins/paddings instead«
this.itemHeight = this.$items.eq(0).outerHeight(true); // get standard width of -items. don't apply margins or paddings to the s, use an inner
with your margins/paddings instead«
this.count = this.$items.size();
this.visibleElements = (viscount ? viscount : 2); // determine, how many items fit in your scroll-window
this.elmsToScroll = Math.min((this.count - this.visibleElements), this.visibleElements); // how many items scroll on each click?
this.animationDuration = Math.min(150 * this.elmsToScroll, 1300);
this.animationEasing = "easeInOutExpo"; //easeInOutExpo, easeOutExpo, easeOutElastic, easeInOutElastic, easeInBack, easeInOutBack, easeOutBounce
// set sizes to calculated values in case they were just estimated before
this.$ul.css({
width: this.itemWidth*this.count+"px",
position: "relative",
left: "0"
});
// bind event handlers to the links
var that = this;
this.$left.bind("click", function(){ that.pageRight();} );
this.$right.bind("click", function(){ that.pageLeft();} );
this.$right.attr("href","javascript: void(0)");
this.$left.attr("href","javascript: void(0)");
if (this.count <= this.visibleElements) {
this.$left.hide();
this.$right.hide();
}
}
GliderHoriz.prototype = {
pageRight: function(){
if (!this.animating) {
this.animating = true;
this.currentIndex -= this.elmsToScroll;
// if not enough elements available to perform the scroll, move them to the top of the list
while (this.currentIndex < 0) {
var temp = this.$items.eq(this.count-1).remove();
this.$ul.prepend(temp);
var left = parseInt(this.$ul.css("left")) || 0;
this.$ul.css({
left: (left - this.itemWidth) + "px"
});
this.$items = this.$ul.children();
++this.currentIndex;
}
// perform the gliding effect
var that = this;
var left = (parseInt(this.$ul.css("left").replace("px","")) || 0) + (this.elmsToScroll * this.itemWidth);
this.$ul.animate(
{
"left" : left
},
{
//duration: Math.min(150 * this.elmsToScroll, 1300),
duration: this.animationDuration,
easing: this.animationEasing,
complete: function(){ that.animating = false; }
}
);
}
},
pageLeft: function() {
if (!this.animating) {
this.animating = true;
this.currentIndex += this.elmsToScroll;
// if not enough elements available to perform the scroll, move them to the end of the list
while (this.currentIndex + this.visibleElements > this.count) {
var el = this.$items.eq(0).remove();
this.$ul.append(el);
var left = parseInt(this.$ul.css("left")) || 0;
this.$ul.css({
left: (left + this.itemWidth) + "px"
});
this.$items = this.$ul.children();
--this.currentIndex;
}
// perform the gliding effect
var that = this;
var left = (parseInt(that.$ul.css("left").replace("px", "")) || 0) - (that.elmsToScroll * that.itemWidth);
this.$ul.animate(
{
"left" : left
},
{
//duration: Math.min(150 * this.elmsToScroll, 1300),
duration: this.animationDuration,
easing: this.animationEasing,
complete: function(){ that.animating = false; }
}
);
}
},
pageTop: function(){
if (!this.animating) {
this.animating = true;
this.currentIndex -= this.elmsToScroll;
// if not enough elements available to perform the scroll, move them to the top of the list
while (this.currentIndex < 0) {
var temp = this.$items.eq(this.count-1).remove();
this.$ul.prepend(temp);
var top = parseInt(this.$ul.css("top")) || 0;
this.$ul.css({
top: (top - this.itemHeight) + "px"
});
this.$items = this.$ul.children();
++this.currentIndex;
}
// perform the gliding effect
var that = this;
var top = (parseInt(this.$ul.css("top").replace("px","")) || 0) + (this.elmsToScroll * this.itemHeight);
this.$ul.animate(
{
"top" : top
},
{
//duration: Math.min(150 * this.elmsToScroll, 1300),
duration: this.animationDuration,
easing: this.animationEasing,
complete: function(){ that.animating = false; }
}
);
}
},
pageBottom: function() {
if (!this.animating) {
this.animating = true;
this.currentIndex += this.elmsToScroll;
// if not enough elements available to perform the scroll, move them to the end of the list
while (this.currentIndex + this.visibleElements > this.count) {
var el = this.$items.eq(0).remove();
this.$ul.append(el);
var top = parseInt(this.$ul.css("top")) || 0;
this.$ul.css({
top: (top + this.itemHeight) + "px"
});
this.$items = this.$ul.children();
--this.currentIndex;
}
// perform the gliding effect
var that = this;
var top = (parseInt(that.$ul.css("top").replace("px", "")) || 0) - (that.elmsToScroll * that.itemHeight);
this.$ul.animate(
{
"top" : top
},
{
//duration: Math.min(150 * this.elmsToScroll, 1300),
duration: this.animationDuration,
easing: this.animationEasing,
complete: function(){ that.animating = false; }
}
);
}
}
};
Glider = function (element, visibleElements){
// find necessary elements
this.$element = $(element);
this.$ul = this.$element.find("ul").first();
this.$left = this.$element.find("a.d_btnPageLeft").first();
this.$right = this.$element.find("a.d_btnPageRight").first();
this.$items = this.$ul.children();
var that = this;
// set initial values
this.animating = false;
this.currentIndex = 0;
this.itemWidth = this.$items.eq(0).innerWidth(); // get standard width of -items. don't apply margins or paddings to the s, use an inner
with your margins/paddings instead´
this.itemHeight = this.$items.eq(0).outerHeight(true);
var that = this;
if(isIE(6)){ //omg IE6 is a bunch of crap
window.setTimeout(function(){
that.itemHeight = that.$items.eq(0).outerHeight(true);
}, 300);
}
this.count = this.$items.size();
//this.visibleElements = Math.floor(this.$element.find("ul").first().innerHeight() / this.itemHeight); // determine, how many items fit in your scroll-window
if(visibleElements)
this.visibleElements = parseInt(visibleElements);
else
this.visibleElements = 3;
// this.elmsToScroll = Math.min((this.count - this.visibleElements), this.visibleElements); // how many items scroll on each click?
this.elmsToScroll = 1; //fest auf 1, wegen Ausblende-Effekt etc.
this.animationDuration = Math.min(150 * this.elmsToScroll, 1300);
this.animationEasing = "easeInOutExpo"; //easeInOutExpo, easeOutExpo, easeOutElastic, easeInOutElastic, easeInBack, easeInOutBack, easeOutBounce
// set sizes to calculated values in case they were just estimated before
// this.$ul.css({
// width: this.itemWidth*this.count+"px",
// position: "relative",
// left: "0"
// });
// bind event handlers to the links
this.$right.bind("click", function(){ that.pageBottom();} );
this.$left.bind("click", function(){ that.pageTop();} );
this.$right.attr("href","javascript: void(0)");
this.$left.attr("href","javascript: void(0)");
if (this.count <= this.visibleElements) {
this.$left.add(this.$right).addClass("hidden");
this.$element.addClass("noButtons");
}
}
Glider.prototype = {
pageTop: function(){
if (!this.animating) {
this.animating = true;
this.currentIndex -= this.elmsToScroll;
// if not enough elements available to perform the scroll, move them to the top of the list
this.loopTimes = 1;
// console.log("currentIndex: " + this.currentIndex)
while (this.currentIndex < 0) {
this.moveOneElemBottomToTop();
}
// perform the gliding effect
var that = this;
var top = (parseInt(this.$ul.css("top").replace("px","")) || 0) + (this.elmsToScroll * this.itemHeight);
this.$ul.animate(
{
"top" : top
},
{
//duration: Math.min(150 * this.elmsToScroll, 1300),
duration: this.animationDuration,
easing: this.animationEasing,
complete: function(){ that.animating = false; }
}
);
}
},
moveOneElemBottomToTop: function(){
var $el = this.$items.eq(this.count-1).remove();
this.$ul.prepend($el);
if(! $el.hasClass("hidden")){
var top = parseInt(this.$ul.css("top")) || 0;
this.$ul.css({
top: (top - this.itemHeight) + "px"
});
this.currentIndex++;
}
this.$items = this.$ul.children();
if($el.hasClass("hidden")){
this.moveOneElemBottomToTop();
}
},
pageBottom: function() {
if (!this.animating) {
this.animating = true;
this.currentIndex += this.elmsToScroll;
// if not enough elements available to perform the scroll, move them to the end of the list
// console.log("while " + (this.currentIndex+this.visibleElements) + " > " + this.count);
while (this.currentIndex + this.visibleElements >= this.count) {
this.moveOneElemTopToBottom();
}
// perform the gliding effect
var that = this;
var top = (parseInt(that.$ul.css("top").replace("px", "")) || 0) - (that.elmsToScroll * that.itemHeight);
this.$ul.animate(
{
"top" : top
},
{
//duration: Math.min(150 * this.elmsToScroll, 1300),
duration: this.animationDuration,
easing: this.animationEasing,
complete: function(){ that.animating = false; }
}
);
}
},
moveOneElemTopToBottom: function() {
var $el = this.$items.eq(0).remove();
this.$ul.append($el);
if(! $el.hasClass("hidden")){
var top = parseInt(this.$ul.css("top")) || 0;
this.$ul.css({
top: (top + this.itemHeight) + "px"
});
this.currentIndex--;
}
this.$items = this.$ul.children();
//Sonderbehandlung, wenn das ausgeblendete Element verschoben wurde
if($el.hasClass("hidden")){
this.moveOneElemTopToBottom();
}
}
};
})(jQuery);