jQuery(function($){ thetheImageSlider = function(){ this.nID = null; this.currentIndex = 0; this.nextIndex = 1; this.slideLength = 0; this.arrSlides = []; this.arrSParams = []; this.defaultInterval = 4000; this.defaultSlideT = 500; this.nHeight = 313; this.nWidth = 500; this.bAutoplay = true; this.arrBlocks = []; this.arrNextBlocks = []; this.blockType = ''; this.arrCurrentBlock = {x: 0, y: 0}; this.bPlay = true; this.arrThumbs = [] this.arrBMinCol = { width : 6, height : 5 } this.arrF = {step : 1, x : 0, y : 0, sight : 1} this.arrBParams = { rows : 0, cols : 0, width : 0, height : 0, bcount : 0, bworkd : 0 } this.nBlockCols = 0; this.bBlockRows = 0; this.cTimeout = null; this.nImagesLoaded = 0; this.loader = null; this.loaderProgress = null; this.strSkin = ''; this.bLoop = true; this.bNextSlide = false; this.bAction = false; this.play = function(prev){ this.bPlay = true; if(this.cTimeout){ clearTimeout(this.cTimeout) } this.transition(prev); } this.pause = function(){ if( this.bPlay == true ){ this.stop(); return 'stopped'; }else{ this.play(); return 'played'; } } this.goNext = function(){ bPlay = this.bPlay; this.play(); this.bPlay = bPlay; } this.goPrevious = function(){ bPlay = this.bPlay; this.nextIndex -= 2; //this.currentIndex -= 1; if(this.nextIndex < 0){ this.nextIndex = this.slideLength-1; } if(this.currentIndex < 1){ //this.currentIndex = 1; } this.bPlay = true; if(this.cTimeout){ clearTimeout(this.cTimeout) } this.play(1); this.bPlay = bPlay; } this.stop = function(){ this.bPlay = false; } this.currentBlock = function(){ if(oMoz = $(this.arrSlides[this.currentIndex - 1]).children('.thethe-image-slider-blocks')){ if(oMoz.attr('class') != undefined){ return oMoz; } } return $(this.arrSlides[this.currentIndex - 1]).append('
').children('.thethe-image-slider-blocks'); } this.nextBlock = function(){ return $(this.arrSlides[this.nextIndex - 1]).append('').children('.thethe-image-slider-blocks'); } this.currentNotice = function(state){ if(!state){ $(this.arrSlides[this.currentIndex - 1]).children('.thethe-image-slider-caption').hide(); }else{ $(this.arrSlides[this.currentIndex - 1]).children('.thethe-image-slider-caption').fadeIn(this.defaultSlideT); } } this.nextNotice = function(state){ if(!state){ $(this.arrSlides[this.nextIndex - 1]).children('.thethe-image-slider-caption').hide(); }else{ $(this.arrSlides[this.nextIndex - 1]).children('.thethe-image-slider-caption').fadeIn(this.defaultSlideT); } } this.currentImg = function(){ return $(this.arrSlides[this.currentIndex - 1]).children('.thethe-image-slider-image'); } this.nextImg = function(){ return $(this.arrSlides[this.nextIndex - 1]).children('.thethe-image-slider-image'); } this.current = function(){ return $(this.arrSlides[this.currentIndex - 1]); } this.next = function(){ return $(this.arrSlides[this.nextIndex - 1]); } this.transitionEnd = function(){ this.clean(); this.currentNotice(false); this.nextNotice(true); this.arrBlocks = [] this.bAction = false; } this.restoreCurrentImg = function(){ this.currentImg() .css({width : this.nWidth, height : this.nHeight, opacity : 1}); var nii = this.currentImg().find('img'); nii.css({"width":nii.attr('width'), "height":nii.attr('height'), "top":(this.nHeight - nii.attr('height'))/2, "left":(this.nWidth - nii.attr('width'))/2}); } this.restoreNextImg = function(){ this.nextImg() .css({width : this.nWidth, height : this.nHeight, opacity : 1}); var nii = this.currentImg().find('img'); nii.css({"width":nii.attr('width'), "height":nii.attr('height'), "top":(this.nHeight - nii.attr('height'))/2, "left":(this.nWidth - nii.attr('width'))/2}); } this.slideLeft = function(){ var t = this; t.next() .addClass('show') .css({marginLeft : -this.nWidth + 'px'}) .animate({ marginLeft : 0 + 'px'}, this.defaultSlideT) t.current() .animate({ marginLeft : this.nWidth}, this.defaultSlideT-20, function(){t.transitionEnd()}) } this.slideRight = function(){ var t = this; t.current() .animate({ marginLeft : -this.nWidth}, this.defaultSlideT) t.next() .addClass('show') .css({marginLeft : this.nWidth + 'px'}) .animate({ marginLeft : 0 + 'px'}, this.defaultSlideT-20, function(){t.transitionEnd()}) } this.slideTop = function(){ var t = this; t.next() .addClass('show') .css({marginTop : -this.nHeight + 'px'}) .animate({ marginTop : 0 + 'px'}, this.defaultSlideT) t.current() .animate({ marginTop : this.nHeight}, this.defaultSlideT-20, function(){t.transitionEnd()}) } this.slideBottom = function(){ var t = this; t.next() .addClass('show') .css({marginTop : this.nHeight + 'px'}) .animate({ marginTop : 0 + 'px'}, this.defaultSlideT) t.current() .animate({ marginTop : -this.nHeight}, this.defaultSlideT-20, function(){t.transitionEnd()}) } this.slideAndBounceTop = function(){ var t = this; t.current() .animate({ marginTop : this.nHeight}, this.defaultSlideT) t.next() .addClass('show') .css({marginTop : -this.nHeight + 'px'}) .animate({ marginTop : 80 + 'px'}, this.defaultSlideT) .animate({ marginTop : -50 + 'px'}, this.defaultSlideT/2) .animate({ marginTop : 20 + 'px'}, this.defaultSlideT/2) .animate({ marginTop : 0 + 'px'}, this.defaultSlideT/2, function(){t.transitionEnd()}) } this.slideAndBounceRight = function(){ var t = this; t.current() .animate({ marginLeft : -this.nWidth}, this.defaultSlideT) t.next() .addClass('show') .css({marginLeft : this.nWidth + 'px'}) .animate({ marginLeft : -80 + 'px'}, this.defaultSlideT) .animate({ marginLeft : 50 + 'px'}, this.defaultSlideT/2) .animate({ marginLeft : -20 + 'px'}, this.defaultSlideT/2) .animate({ marginLeft : 0 + 'px'}, this.defaultSlideT/2, function(){t.transitionEnd()}) } this.slideAndBounceLeft = function(){ var t = this; t.current() .animate({ marginLeft : this.nWidth}, this.defaultSlideT) t.next() .addClass('show') .css({marginLeft : -this.nWidth + 'px'}) .animate({ marginLeft : 80 + 'px'}, this.defaultSlideT) .animate({ marginLeft : -50 + 'px'}, this.defaultSlideT/2) .animate({ marginLeft : 20 + 'px'}, this.defaultSlideT/2) .animate({ marginLeft : 0 + 'px'}, this.defaultSlideT/2, function(){t.transitionEnd()}) } this.slideAndBounceBottom = function(){ var t = this; t.current() .animate({ marginTop : -this.nHeight}, this.defaultSlideT) t.next() .addClass('show') .css({marginTop : this.nHeight + 'px'}) .animate({ marginTop : -80 + 'px'}, this.defaultSlideT) .animate({ marginTop : 50 + 'px'}, this.defaultSlideT/2) .animate({ marginTop : -20 + 'px'}, this.defaultSlideT/2) .animate({ marginTop : 0 + 'px'}, this.defaultSlideT/2, function(){t.transitionEnd()}) } this.scaleCenter = function(){ var t = this; t.current() .animate({ height: 0, width : 0, marginLeft : t.nWidth/2, marginTop : t.nHeight/2, opacity : 0}, t.defaultSlideT, function(){ t.next() .css({ height: 0, width : 0, marginLeft : t.nWidth/2, marginTop : t.nHeight/2, opacity : 0}) .addClass('show') .animate({height: t.nHeight, width : t.nWidth, marginLeft : 0, marginTop : 0, opacity : 1}, t.defaultSlideT); } ); t.current().find('img') .animate({"height":0, "width":0, "left":0, "top":0}, t.defaultSlideT, function(){ var tii = t.next().find('img'); tii .css({"height":0, "width":0, "top":0, "left":0}) .animate({ "height":tii.attr('height'), "width":tii.attr('width'), "left":(t.nWidth - tii.attr('width'))/2, "top":(t.nHeight - tii.attr('height'))/2}, t.defaultSlideT ); } ); t.currentImg() .animate({ height: 0, width : 0}, t.defaultSlideT, function(){ t.restoreCurrentImg(); t.nextImg() .css({ height: 0, width : 0}) .animate({height: t.nHeight, width : t.nWidth}, t.defaultSlideT, function(){t.transitionEnd()}) } ); } this.flip = function(){ var t = this; t.current() .animate({ width : 0 + 'px', marginLeft : t.nWidth/2 + 'px'}, t.defaultSlideT, function(){ t.next() .css({ width : 0 + 'px', marginLeft : t.nWidth/2 + 'px', opacity : 0.5}) .addClass('show') .animate({width : t.nWidth + 'px', marginLeft : 0 + 'px', opacity : 1}, t.defaultSlideT); }) t.currentImg() .animate({ width : 0 + 'px'}, t.defaultSlideT, function(){ t.restoreCurrentImg(); t.nextImg() .css({ width : 0 + 'px'}) .animate({ width : t.nWidth + 'px'}, t.defaultSlideT, function(){t.transitionEnd()}) } ) var lii = t.currentImg().find('img'); lii .animate({ "width":0, "left":0}, t.defaultSlideT, function(){ t.restoreCurrentImg(); var lii = t.nextImg().find('img'); lii .css({ "width":0, "left":0}) .animate({ "width":lii.attr('width'), "left":(t.nWidth - lii.attr('width'))/2}, t.defaultSlideT, function(){t.transitionEnd()}) } ) } this.scaleTop = function(){ var t = this; t.current() .animate({ height: 0, width : 0, marginLeft : t.nWidth/2, marginTop : -t.nHeight, opacity : 0}, t.defaultSlideT, function(){ t.next() .css({ height: 0, width : 0, marginLeft : t.nWidth/2, marginTop : t.nHeight, opacity : 0}) .addClass('show') .animate({height: t.nHeight, width : t.nWidth, marginLeft : 0, marginTop : 0, opacity : 1}, t.defaultSlideT); } ); t.current().find('img') .animate({"height":0, "width":0, "left" : 0, "top":0}, t.defaultSlideT, function(){ var tii = t.next().find('img'); tii .css({"height":0, "width":0, "left":0, "top":0}) .animate({ "height":tii.attr('height'), "width":tii.attr('width'), "left":(t.nWidth - tii.attr('width'))/2, "top":(t.nHeight - tii.attr('height'))/2},t.defaultSlideT ); } ); t.currentImg() .animate({ height: 0, width : 0}, t.defaultSlideT, function(){ t.nextImg() .css({ height: 0, width : 0}) .animate({height: t.nHeight, width : t.nWidth}, t.defaultSlideT, function(){t.transitionEnd()}) } ); } this.zoom = function(){ var t = this; multip = 10; t.current() .animate({ "marginLeft":-t.nWidth * (multip - 1)/2, "width":t.nWidth * multip, "height":t.nHeight * multip, "marginTop":-t.nHeight * (multip - 1)/2}, t.defaultSlideT, function(){ t.next() .css({ "marginLeft":-t.nWidth * (multip - 1)/2, "width":t.nWidth * multip, "height":t.nHeight * multip, "marginTop":-t.nHeight * (multip - 1)/2}) .addClass('show') .animate({ "marginLeft":0, "marginTop":0, "height":t.nHeight, "width":t.nWidth}, t.defaultSlideT); } ); t.currentImg() .animate({ height: t.nHeight*multip, width : t.nWidth*multip }, t.defaultSlideT, function(){ t.nextImg() .css({ height: t.nHeight * multip, width : t.nWidth * multip }) .animate({height: t.nHeight, width : t.nWidth}, t.defaultSlideT, function(){t.transitionEnd()}) } ) var lii = t.currentImg().find('img') lii .animate({ "height":lii.attr('height') * multip, "width":lii.attr('width') * multip, "left":(t.nWidth - lii.attr('width')) * multip / 2, "top":(t.nHeight - lii.attr('height')) * multip / 2}, t.defaultSlideT, function(){ var lii = t.nextImg().find('img'); lii .css({ "height":lii.attr('height') * multip, "width":lii.attr('width') * multip, "left":(t.nWidth - lii.attr('width')) * multip / 2, "top":(t.nHeight - lii.attr('height')) * multip / 2}) .animate({ "height":lii.attr('height'), "width":lii.attr('width'), "left":(t.nWidth - lii.attr('width')) / 2, "top":(t.nHeight - lii.attr('height')) / 2}, t.defaultSlideT) } ) } this.scaleAndSlide = function(){ this.currentNotice(false); this.nextNotice(false); var t = this; t.current() .animate({height:t.nHeight/5, width:t.nWidth/5, marginLeft:((t.nWidth-t.nWidth/5)/2), marginTop:(t.nHeight-t.nHeight/5)/2, opacity:0.5}, t.defaultSlideT, function(){ t.current() .animate({ marginLeft : (-t.nWidth)/5}, t.defaultSlideT, function(){ t.next() .css({ height: t.nHeight/5, width : t.nWidth/5, marginLeft : t.nWidth + 'px' , marginTop : (t.nHeight-t.nHeight/5)/2, opacity : 0.5}) .addClass('show') .animate({ marginLeft : ((t.nWidth-t.nWidth/5)/2)}, t.defaultSlideT, function(){ t.next() .animate({height: t.nHeight, width : t.nWidth, marginLeft : 0, marginTop : 0, opacity : 1}, t.defaultSlideT); t.nextImg() .animate({height: t.nHeight, width : t.nWidth}, t.defaultSlideT, function(){t.transitionEnd()}); }); t.nextImg() .css({ height: t.nHeight/5, width : t.nWidth/5}) } ) } ); var lii = t.current().find('img'); lii .animate({ "height":lii.attr('height')/5, "width":lii.attr('width')/5, "left":(t.nWidth-lii.attr('width'))/10, "top":(t.nHeight-lii.attr('height'))/10}, t.defaultSlideT, function(){ lii .css({"marginLeft":-1}) .animate({"marginLeft":0}, t.defaultSlideT, function(){ var lii = t.next().find('img'); lii .css({ "height":lii.attr('height')/5, "width":lii.attr('width')/5, "left":(t.nWidth-lii.attr('width'))/10, "top":(t.nHeight-lii.attr('height'))/10, "marginLeft":-1 }) .animate({"marginLeft":0}, t.defaultSlideT, function(){ var lii = t.next().find('img'); lii .animate({ "height":lii.attr('height'), "width":lii.attr('width'), "left":(t.nWidth-lii.attr('width'))/2, "top":(t.nHeight-lii.attr('height'))/2}, t.defaultSlideT); } ); } ) } ); } this.fade = function(){ var t = this; t.current() .animate({ opacity : 0}, this.defaultSlideT); t.next() .css({opacity: 0}) .addClass('show') .animate({ opacity : 1}, this.defaultSlideT, function(){t.transitionEnd()}) } this.makeSquares = function(){ this.arrBlocks = [] s = this.currentBlock(); n = this.arrBMinCol.width; while(n < 30){ if(!(this.nWidth % n)){ this.arrBParams.width = this.nWidth / n; this.arrBParams.rows = n; break; } n++; } if(!this.arrBParams.rows){ this.arrBParams.width = Math.floor(this.nWidth / this.arrBMinCol.width); this.arrBParams.rows = this.arrBMinCol.width + 1; } n = this.arrBMinCol.height; while(n < 30){ if(!(this.nHeight % n)){ this.arrBParams.height = this.nHeight / n; this.arrBParams.cols = n; break; } n++; } if(!this.arrBParams.cols){ this.arrBParams.height = Math.floor(this.nHeight / this.arrBMinCol.height); this.arrBParams.cols = this.arrBMinCol.height + 1; } this.arrBParams.bcount = this.arrBParams.cols * this.arrBParams.rows; this.arrBParams.bworkd = 0; this.arrCurrentBlock.x = 0; this.arrCurrentBlock.y = 0; for(y = 0; y < this.arrBParams.cols; y++ ){ for( x = 0; x < this.arrBParams.rows ; x++ ){ var _oDiv = document.createElement('DIV'); _oDiv.className = 'thethe-image-slider-block'; _oDiv.style.width = this.arrBParams.width + 'px'; _oDiv.style.height = this.arrBParams.height + 'px'; _oDiv.style.backgroundImage = 'url(' + this.currentImg().attr('src') + ')'; _oDiv.style.backgroundPosition = '-' + (x * this.arrBParams.width) + 'px ' + '-' + (y * this.arrBParams.height) + 'px'; s.append($(_oDiv)); if(!this.arrBlocks[y]){ this.arrBlocks[y] = [] } this.arrBlocks[y][x] = _oDiv; } } } this.makeRows = function(){ s = this.currentBlock(); n = this.arrBMinCol.width; n = this.arrBMinCol.height; while(n < 10){ if(!(this.nHeight % n)){ this.arrBParams.height = this.nHeight / n; this.arrBParams.cols = n; break; } n++; } if(!this.arrBParams.cols){ this.arrBParams.height = Math.floor(this.nHeight / this.arrBMinCol.height); this.arrBParams.cols = this.arrBMinCol.height + 1; } this.arrBParams.bcount = this.arrBParams.cols; this.arrBParams.bworkd = 0; this.arrCurrentBlock.y = 0; var lii = this.currentImg().find('img'); for(y = 0; y < this.arrBParams.cols; y++ ){ var _oDivImg = $('') .css({ "position":"absolute", "left":(this.nWidth - lii.attr('width'))/2, "top":(this.nHeight - lii.attr('height'))/2 - y * this.arrBParams.height }); var _oDiv = $('