/** * jquery iview slider v2.0 * * @version: 2.0.1 - august 17, 2012 * * @author: hemn chawroka * hemn@iprodev.com * http://iprodev.com/ * */ (function ($, window, undefined) { var iview = function (el, options) { //get slider holder var iv = this; iv.options = options; iv.slidercontent = el, iv.sliderinner = iv.slidercontent.html(); iv.slidercontent.html("
" + iv.sliderinner + "
"); //get slider iv.slider = $('.iviewslider', iv.slidercontent); iv.slider.css({'position': 'relative','width':'1920px','height':'632px','overflow':'hidden'}); //necessary variables. iv.defs = { slide: 0, total: 0, image: '', images: [], width: iv.slidercontent.width(), height: iv.slidercontent.height(), timer: options.timer.tolowercase(), lock: false, paused: (options.autoadvance) ? false : true, time: options.pausetime, easing: options.easing }; //disable slider text selection iv.disableselection(iv.slider[0]); //find slides iv.slides = iv.slider.children(); iv.slides.each(function (i) { var slide = $(this); //find images & thumbnails iv.defs.images.push(slide.data("iview:image")); if (slide.data("iview:thumbnail")) iv.defs.images.push(slide.data("iview:thumbnail")); slide.css('display', 'none'); //find videos if (slide.data("iview:type") == "video") { var element = slide.children().eq(0), video = $('
˟
'); slide.append(video); element.appendto($('div.iview-video-container', video)); video.css({ width: iv.defs.width, height: iv.defs.height, top: '-' + iv.defs.height + 'px' }).hide(); slide.addclass('iview-video').css({ 'cursor': 'pointer' }); } iv.defs.total++; }).css({ width: iv.defs.width, height: iv.defs.height }); //set preloader element iv.slidercontent.append('
'); var iviewpreloader = $('#iview-preloader', iv.slidercontent); var preloaderbar = $('div', iviewpreloader); iviewpreloader.css({ top: ((iv.defs.height / 2) - (iviewpreloader.height() / 2)) + 'px', left: ((iv.defs.width / 2) - (iviewpreloader.width() / 2)) + 'px' }); //set timer element iv.slidercontent.append('
'); iv.iviewtimer = $('#iview-timer', iv.slidercontent); iv.iviewtimer.hide(); //find captions $('.iview-caption', iv.slider).each(function (i) { var caption = $(this); caption.html('
' + caption.html() + '
'); }); //if randomstart options.startslide = (options.randomstart) ? math.floor(math.random() * iv.defs.total) : options.startslide; //set startslide options.startslide = (options.startslide > 0 && options.startslide >= iv.defs.total) ? iv.defs.total - 1 : options.startslide; iv.defs.slide = options.startslide; //set first image iv.defs.image = iv.slides.eq(iv.defs.slide); //set pausetime iv.defs.time = (iv.defs.image.data('iview:pausetime')) ? iv.defs.image.data('iview:pausetime') : options.pausetime; //set easing iv.defs.easing = (iv.defs.image.data('iview:easing')) ? iv.defs.image.data('iview:easing') : options.easing; iv.piedegree = 0; var padding = options.timerpadding, diameter = options.timerdiameter, stroke = options.timerstroke; if (iv.defs.total > 1 && iv.defs.timer != "bar") { //start the raphael stroke = (iv.defs.timer == "360bar") ? options.timerstroke : 0; var width = (diameter + (padding * 2) + (stroke * 2)), height = width, r = raphael(iv.iviewtimer[0], width, height); iv.r = (diameter / 2); var param = { stroke: options.timerbg, "stroke-width": (stroke + (padding * 2)) }, param2 = { stroke: options.timercolor, "stroke-width": stroke, "stroke-linecap": "round" }, param3 = { fill: options.timercolor, stroke: 'none', "stroke-width": 0 }, bgparam = { fill: options.timerbg, stroke: 'none', "stroke-width": 0 }; // custom arc attribute r.customattributes.arc = function (value, r) { var total = 360, alpha = 360 / total * value, a = (90 - alpha) * math.pi / 180, cx = ((diameter / 2) + padding + stroke), cy = ((diameter / 2) + padding + stroke), x = cx + r * math.cos(a), y = cy - r * math.sin(a), path; if (total == value) { path = [["m", cx, cy - r], ["a", r, r, 0, 1, 1, 299.99, cy - r]]; } else { path = [["m", cx, cy - r], ["a", r, r, 0, +(alpha > 180), 1, x, y]]; } return { path: path }; }; // custom segment attribute r.customattributes.segment = function (angle, r) { var a1 = -90; r = r - 1; angle = (a1 + angle); var flag = (angle - a1) > 180, x = ((diameter / 2) + padding), y = ((diameter / 2) + padding); a1 = (a1 % 360) * math.pi / 180; angle = (angle % 360) * math.pi / 180; return { path: [["m", x, y], ["l", r * math.cos(a1), r * math.sin(a1)], ["a", r, r, 0, +flag, 1, x + r * math.cos(angle), y + r * math.sin(angle)], ["z"]] }; }; if (iv.defs.total > 1 && iv.defs.timer == "pie") { r.circle(iv.r + padding, iv.r + padding, iv.r + padding - 1).attr(bgparam); } iv.timerbgpath = r.path().attr(param), iv.timerpath = r.path().attr(param2), iv.pietimer = r.path().attr(param3); } iv.bartimer = $('div', iv.iviewtimer); if (iv.defs.total > 1 && iv.defs.timer == "360bar") { iv.timerbgpath.attr({ arc: [359.9, iv.r] }); } //set timer styles if (iv.defs.timer == "bar") { iv.iviewtimer.css({ opacity: options.timeropacity, width: diameter, height: stroke, border: options.timerbarstroke + 'px ' + options.timerbarstrokecolor + ' ' + options.timerbarstrokestyle, padding: padding, background: options.timerbg }); iv.bartimer.css({ width: 0, height: stroke, background: options.timercolor, 'float': 'left' }); } else { iv.iviewtimer.css({ opacity: options.timeropacity, width: width, height: height }); } //set timer position iv.settimerposition(); // run preloader new imagepreload(iv.defs.images, function (i) { var percent = (i * 10); preloaderbar.stop().animate({ width: percent + '%' }); }, function () { preloaderbar.stop().animate({ width: '100%' }, function () { iviewpreloader.remove(); iv.startslider(); //trigger the onafterload callback options.onafterload.call(this); }); }); //touch navigation iv.slidercontent.bind('swipeleft', function () { if (iv.defs.lock) return false; iv.cleantimer(); iv.goto('next'); }).bind('swiperight', function () { if (iv.defs.lock) return false; iv.cleantimer(); iv.defs.slide -= 2; iv.goto('prev'); }); //keyboard navigation if (options.keyboardnav) { $(document).bind('keyup.iview', function (event) { //left if (event.keycode == '37') { if (iv.defs.lock) return false; iv.cleantimer(); iv.defs.slide -= 2; iv.goto('prev'); } //right if (event.keycode == '39') { if (iv.defs.lock) return false; iv.cleantimer(); iv.goto('next'); } }); } //play/pause action iv.iviewtimer.live('click', function () { if (iv.iviewtimer.hasclass('paused')) { iv.playslider(); } else { iv.stopslider(); } }); //bind the stop action iv.slidercontent.bind('iview:pause', function () { iv.stopslider(); }); //bind the start action iv.slidercontent.bind('iview:play', function () { iv.playslider(); }); //bind the start action iv.slidercontent.bind('iview:previous', function () { if (iv.defs.lock) return false; iv.cleantimer(); iv.defs.slide -= 2; iv.goto('prev'); }); //bind the start action iv.slidercontent.bind('iview:next', function () { if (iv.defs.lock) return false; iv.cleantimer(); iv.goto('next'); }); //bind the goslide action iv.slidercontent.bind('iview:goslide', function (event, slide) { if (iv.defs.lock || iv.defs.slide == slide) return false; if ($(this).hasclass('active')) return false; iv.cleantimer(); iv.slider.css('background', 'url("' + iv.defs.image.data('iview:image') + '") no-repeat'); iv.defs.slide = slide - 1; iv.goto('control'); }); //bind the resize action iv.slidercontent.bind('resize', function () { t = $(this), tw = t.width(), th = t.height(), width = iv.slider.width(), height = iv.slider.height(); if(iv.defs.width != tw){ var ratio = (tw / width), newheight = math.round(iv.defs.height * ratio); iv.slider.css({ '-webkit-transform-origin' : '0 0', '-moz-transform-origin' : '0 0', '-o-transform-origin' : '0 0', '-ms-transform-origin' : '0 0', 'transform-origin' : '0 0', '-webkit-transform' : 'scale('+ ratio +')', '-moz-transform' : 'scale('+ ratio +')', '-o-transform' : 'scale('+ ratio +')', '-ms-transform' : 'scale('+ ratio +')', 'transform' : 'scale('+ ratio +')', 'overflow':'hidden', 'width':'1920px', 'height':'632px' }); t.css({ height: newheight }); iv.defs.width = tw; //set timer position iv.settimerposition(); } }); //bind video display $('.iview-video', iv.slider).click(function(e){ var t = $(this), video = $('.iview-video-show', t); if(!$(e.target).hasclass('iview-video-close') && !$(e.target).hasclass('iview-caption') && !$(e.target).parents().hasclass('iview-caption')){ video.show().animate({ top: 0 }, 1000, 'easeoutbounce'); iv.slidercontent.trigger('iview:pause'); } }); //bind the video closer $('.iview-video-close', iv.slider).click(function(){ var video = $(this).parents('.iview-video-show'), iframe = $('iframe', video), src = iframe.attr('src'); iframe.removeattr('src').attr('src',src); video.animate({ top: '-' + iv.defs.height + 'px' }, 1000, 'easeoutbounce', function(){ video.hide(); iv.slidercontent.trigger('iview:play'); }); }); }; //iview helper functions iview.prototype = { timer: null, //start slider startslider: function () { var iv = this; var img = new image(); img.src = iv.slides.eq(0).data('iview:image'); imgwidth = img.width; if(imgwidth != iv.defs.width){ iv.defs.width = imgwidth; iv.slidercontent.trigger('resize'); } iv.iviewtimer.show(); //show slide iv.slides.eq(iv.defs.slide).css('display', 'block'); //set first background iv.slider.css('background', 'url("' + iv.defs.image.data('iview:image') + '") no-repeat'); //set initial caption iv.setcaption(iv.options); iv.iviewtimer.addclass('paused').attr('title', iv.options.playlabel); if (iv.options.autoadvance && iv.defs.total > 1) { iv.iviewtimer.removeclass('paused').attr('title', iv.options.pauselabel); iv.settimer(); } //add direction nav if (iv.options.directionnav) { iv.slidercontent.append('
' + iv.options.previouslabel + '' + iv.options.nextlabel + '
'); //animate direction nav $('.iview-directionnav', iv.slidercontent).css({ opacity: iv.options.directionnavhoveropacity }); iv.slidercontent.hover(function () { $('.iview-directionnav', iv.slidercontent).stop().animate({ opacity: 1 }, 300); }, function () { $('.iview-directionnav', iv.slidercontent).stop().animate({ opacity: iv.options.directionnavhoveropacity }, 300); }); $('a.iview-prevnav', iv.slidercontent).live('click', function () { if (iv.defs.lock) return false; iv.cleantimer(); iv.defs.slide -= 2; iv.goto('prev'); }); $('a.iview-nextnav', iv.slidercontent).live('click', function () { if (iv.defs.lock) return false; iv.cleantimer(); iv.goto('next'); }); } //add control nav if (iv.options.controlnav) { var iviewcontrol = '
', iviewtooltip = ''; if (!iv.options.directionnav && iv.options.controlnavnextprev) iviewcontrol += '' + iv.options.previouslabel + ''; iviewcontrol += '
'; if (!iv.options.directionnav && iv.options.controlnavnextprev) iviewcontrol += '' + iv.options.nextlabel + ''; iviewcontrol += '
'; if (!iv.options.controlnavthumbs && iv.options.controlnavtooltip) iviewcontrol += '
' + iviewtooltip + '
'; iv.slidercontent.append(iviewcontrol); //set initial active link $('.iview-controlnav a.iview-control:eq(' + iv.defs.slide + ')', iv.slidercontent).addclass('active'); $('a.iview-controlprevnav', iv.slidercontent).live('click', function () { if (iv.defs.lock) return false; iv.cleantimer(); iv.defs.slide -= 2; iv.goto('prev'); }); $('a.iview-controlnextnav', iv.slidercontent).live('click', function () { if (iv.defs.lock) return false; iv.cleantimer(); iv.goto('next'); }); $('.iview-controlnav a.iview-control', iv.slidercontent).live('click', function () { if (iv.defs.lock) return false; if ($(this).hasclass('active')) return false; iv.cleantimer(); iv.slider.css('background', 'url("' + iv.defs.image.data('iview:image') + '") no-repeat'); iv.defs.slide = $(this).attr('rel') - 1; iv.goto('control'); }); //animate control nav $('.iview-controlnav', iv.slidercontent).css({ opacity: iv.options.controlnavhoveropacity }); iv.slidercontent.hover(function () { $('.iview-controlnav', iv.slidercontent).stop().animate({ opacity: 1 }, 300); iv.slidercontent.addclass('iview-hover'); }, function () { $('.iview-controlnav', iv.slidercontent).stop().animate({ opacity: iv.options.controlnavhoveropacity }, 300); iv.slidercontent.removeclass('iview-hover'); }); //show tooltip var tooltiptimer = null; $('.iview-controlnav a.iview-control', iv.slidercontent).hover(function (e) { var t = $(this), i = t.attr('rel'), tooltip = $('#iview-tooltip', iv.slidercontent), holder = $('div.holder', tooltip), x = t.offset().left - iv.slidercontent.offset().left - (tooltip.outerwidth() / 2) + iv.options.tooltipx, y = t.offset().top - iv.slidercontent.offset().top - tooltip.outerheight() + iv.options.tooltipy, imd = $('div[rel=' + i + ']') scrollleft = (i * imd.width()); tooltip.stop().animate({ left: x, top: y, opacity: 1 }, 300); //tooltip.css({ opacity: 1 }); if (tooltip.not(':visible')) tooltip.fadein(300); holder.stop().animate({ scrollleft: scrollleft }, 300); cleartimeout(tooltiptimer); }, function (e) { var tooltip = $('#iview-tooltip', iv.slidercontent); tooltiptimer = settimeout(function () { tooltip.animate({ opacity: 0 }, 300, function () { tooltip.hide(); }); }, 200); }); } //bind hover setting iv.slidercontent.bind('mouseover.iview mousemove.iview', function () { //clear the timer if (iv.options.pauseonhover && !iv.defs.paused) iv.cleantimer(); iv.slidercontent.addclass('iview-hover'); }).bind('mouseout.iview', function () { //restart the timer if (iv.options.pauseonhover && !iv.defs.paused && iv.timer == null && iv.piedegree <= 359 && iv.options.autoadvance) iv.settimer(); iv.slidercontent.removeclass('iview-hover'); }); }, // setcaption function setcaption: function () { var iv = this, slide = iv.slides.eq(iv.defs.slide), captions = $('.iview-caption', slide), timeex = 0; captions.each(function (i) { var caption = $(this), fx = (caption.data('transition')) ? $.trim(caption.data('transition').tolowercase()) : "fade", speed = (caption.data('speed')) ? caption.data('speed') : iv.options.captionspeed, easing = (caption.data('easing')) ? caption.data('easing') : iv.options.captioneasing, x = (caption.data('x')!="undefined") ? caption.data('x') : "center", y = (caption.data('y')!="undefined") ? caption.data('y') : "center", w = (caption.data('width')) ? caption.data('width') : caption.width(), h = (caption.data('height')) ? caption.data('height') : caption.height(), ow = caption.outerwidth(), oh = caption.outerheight(); if(x == "center") x = ((iv.defs.width/2) - (ow/2)); if(y == "center") y = ((iv.defs.height/2) - (oh/2)); var captioncontain = $('.caption-contain', caption); caption.css({ opacity: 0 }); captioncontain.css({ opacity: 0, position: 'relative', width: w, height: h }); switch (fx) { case "wipedown": caption.css({ top: (y - h), left: x }); captioncontain.css({ top: (h + (h * 3)), left: 0 }); break; case "wipeup": caption.css({ top: (y + h), left: x }); captioncontain.css({ top: (h - (h * 3)), left: 0 }); break; case "wiperight": caption.css({ top: y, left: (x - w) }); captioncontain.css({ top: 0, left: (w + (w * 2)) }); break; case "wipeleft": caption.css({ top: y, left: (x + w) }); captioncontain.css({ top: 0, left: (w - (w * 2)) }); break; case "fade": caption.css({ top: y, left: x }); captioncontain.css({ top: 0, left: 0 }); break; case "expanddown": caption.css({ top: y, left: x, height: 0 }); captioncontain.css({ top: (h + (h * 3)), left: 0 }); break; case "expandup": caption.css({ top: (y + h), left: x, height: 0 }); captioncontain.css({ top: (h - (h * 3)), left: 0 }); break; case "expandright": caption.css({ top: y, left: x, width: 0 }); captioncontain.css({ top: 0, left: (w + (w * 2)) }); break; case "expandleft": caption.css({ top: y, left: (x + w), width: 0 }); captioncontain.css({ top: 0, left: (w - (w * 2)) }); break; } settimeout(function () { caption.animate({ opacity: iv.options.captionopacity, top: y, left: x, width: w, height: h }, speed, easing, function () {}); }, timeex); settimeout(function () { captioncontain.animate({ opacity: iv.options.captionopacity, top: 0, left: 0 }, speed, easing); }, (timeex + 100)); timeex += 250; }); }, //process the timer processtimer: function () { var iv = this; if (iv.defs.timer == "360bar") { var degree = (iv.piedegree == 0) ? 0 : iv.piedegree + .9; iv.timerpath.attr({ arc: [degree, iv.r] }); } else if (iv.defs.timer == "pie") { var degree = (iv.piedegree == 0) ? 0 : iv.piedegree + .9; iv.pietimer.attr({ segment: [degree, iv.r] }); } else { iv.bartimer.css({ width: ((iv.piedegree / 360) * 100) + '%' }); } iv.piedegree += 3; }, //when animation finishes transitionend: function (iv) { //trigger the onafterchange callback iv.options.onafterchange.call(this); //lock the slider iv.defs.lock = false; //hide slider slides iv.slides.css('display', 'none'); //diplay the current slide iv.slides.eq(iv.defs.slide).show(); iv.slider.css('background', 'url("' + iv.defs.image.data('iview:image') + '") no-repeat'); // remove any strips and blocks from last transition $('.iview-strip, .iview-block', iv.slider).remove(); //set slide pausetime iv.defs.time = (iv.defs.image.data('iview:pausetime')) ? iv.defs.image.data('iview:pausetime') : iv.options.pausetime; //process timer iv.iviewtimer.animate({ opacity: iv.options.timeropacity }); iv.piedegree = 0; iv.processtimer(); //set caption iv.setcaption(iv.options); //restart the timer if (iv.timer == null && !iv.defs.paused) iv.timer = setinterval(function () { iv.timercall(iv); }, (iv.defs.time / 120)); }, // add strips addstrips: function (vertical, opts) { var iv = this; opts = (opts) ? opts : iv.options; for (var i = 0; i < opts.strips; i++) { var stripwidth = math.round(iv.slider.width() / opts.strips), stripheight = math.round(iv.slider.height() / opts.strips), bgposition = '-' + ((stripwidth + (i * stripwidth)) - stripwidth) + 'px 0%', top = ((vertical) ? (stripheight * i) + 'px' : '0px'), left = ((vertical) ? '0px' : (stripwidth * i) + 'px'); if (vertical) bgposition = '0% -' + ((stripheight + (i * stripheight)) - stripheight) + 'px'; if (i == opts.strips - 1) { var width = ((vertical) ? '0px' : (iv.slider.width() - (stripwidth * i)) + 'px'), height = ((vertical) ? (iv.slider.height() - (stripheight * i)) + 'px' : '0px'); } else { var width = ((vertical) ? '0px' : stripwidth + 'px'), height = ((vertical) ? stripheight + 'px' : '0px'); } var strip = $('
').css({ width: width, height: height, top: top, left: left, background: 'url("' + iv.defs.image.data('iview:image') + '") no-repeat ' + bgposition, opacity: 0 }); iv.slider.append(strip); } }, // add blocks addblocks: function () { var iv = this, blockwidth = math.round(iv.slider.width() / iv.options.blockcols), blockheight = math.round(iv.slider.height() / iv.options.blockrows); for (var rows = 0; rows < iv.options.blockrows; rows++) { for (var columns = 0; columns < iv.options.blockcols; columns++) { var top = (rows * blockheight) + 'px', left = (columns * blockwidth) + 'px', width = blockwidth + 'px', height = blockheight + 'px', bgposition = '-' + ((blockwidth + (columns * blockwidth)) - blockwidth) + 'px -' + ((blockheight + (rows * blockheight)) - blockheight) + 'px'; if (columns == iv.options.blockcols - 1) width = (iv.slider.width() - (blockwidth * columns)) + 'px'; var block = $('
').css({ width: blockwidth + 'px', height: blockheight + 'px', top: (rows * blockheight) + 'px', left: (columns * blockwidth) + 'px', background: 'url("' + iv.defs.image.data('iview:image') + '") no-repeat ' + bgposition, opacity: 0 }); iv.slider.append(block); } } }, runtransition: function (fx) { var iv = this; switch (fx) { case 'strip-up-right': case 'strip-up-left': iv.addstrips(); var timedelay = 0; i = 0, strips = $('.iview-strip', iv.slider); if (fx == 'strip-up-left') strips = $('.iview-strip', iv.slider).reverse(); strips.each(function () { var strip = $(this); strip.css({ top: '', bottom: '0px' }); settimeout(function () { strip.animate({ height: '100%', opacity: '1.0' }, iv.options.animationspeed, iv.defs.easing, function () { if (i == iv.options.strips - 1) iv.transitionend(iv); i++; }); }, (100 + timedelay)); timedelay += 50; }); break; case 'strip-down': case 'strip-down-right': case 'strip-down-left': iv.addstrips(); var timedelay = 0, i = 0, strips = $('.iview-strip', iv.slider); if (fx == 'strip-down-left') strips = $('.iview-strip', iv.slider).reverse(); strips.each(function () { var strip = $(this); strip.css({ bottom: '', top: '0px' }); settimeout(function () { strip.animate({ height: '100%', opacity: '1.0' }, iv.options.animationspeed, iv.defs.easing, function () { if (i == iv.options.strips - 1) iv.transitionend(iv); i++; }); }, (100 + timedelay)); timedelay += 50; }); break; case 'strip-left-right': case 'strip-left-right-up': case 'strip-left-right-down': iv.addstrips(true); var timedelay = 0, i = 0, v = 0, strips = $('.iview-strip', iv.slider); if (fx == 'strip-left-right-down') strips = $('.iview-strip', iv.slider).reverse(); strips.each(function () { var strip = $(this); if (i == 0) { strip.css({ right: '', left: '0px' }); i++; } else { strip.css({ left: '', right: '0px' }); i = 0; } settimeout(function () { strip.animate({ width: '100%', opacity: '1.0' }, iv.options.animationspeed, iv.defs.easing, function () { if (v == iv.options.strips - 1) iv.transitionend(iv); v++; }); }, (100 + timedelay)); timedelay += 50; }); break; case 'strip-up-down': case 'strip-up-down-right': case 'strip-up-down-left': iv.addstrips(); var timedelay = 0, i = 0, v = 0, strips = $('.iview-strip', iv.slider); if (fx == 'strip-up-down-left') strips = $('.iview-strip', iv.slider).reverse(); strips.each(function () { var strip = $(this); if (i == 0) { strip.css({ bottom: '', top: '0px' }); i++; } else { strip.css({ top: '', bottom: '0px' }); i = 0; } settimeout(function () { strip.animate({ height: '100%', opacity: '1.0' }, iv.options.animationspeed, iv.defs.easing, function () { if (v == iv.options.strips - 1) iv.transitionend(iv); v++; }); }, (100 + timedelay)); timedelay += 50; }); break; case 'left-curtain': case 'right-curtain': case 'top-curtain': case 'bottom-curtain': if (fx == 'left-curtain' || fx == 'right-curtain') iv.addstrips(); else iv.addstrips(true); var timedelay = 0, i = 0, strips = $('.iview-strip', iv.slider); if (fx == 'right-curtain' || fx == 'bottom-curtain') strips = $('.iview-strip', iv.slider).reverse(); strips.each(function () { var strip = $(this); var width = strip.width(); var height = strip.height(); if (fx == 'left-curtain' || fx == 'right-curtain') strip.css({ top: '0px', height: '100%', width: '0px' }); else strip.css({ left: '0px', height: '0px', width: '100%' }); settimeout(function () { if (fx == 'left-curtain' || fx == 'right-curtain') strip.animate({ width: width, opacity: '1.0' }, iv.options.animationspeed, iv.defs.easing, function () { if (i == iv.options.strips - 1) iv.transitionend(iv); i++; }); else strip.animate({ height: height, opacity: '1.0' }, iv.options.animationspeed, iv.defs.easing, function () { if (i == iv.options.strips - 1) iv.transitionend(iv); i++; }); }, (100 + timedelay)); timedelay += 50; }); break; case 'strip-up-right': case 'strip-up-left': iv.addstrips(); var timedelay = 0, i = 0, strips = $('.iview-strip', iv.slider); if (fx == 'strip-up-left') strips = $('.iview-strip', iv.slider).reverse(); strips.each(function () { var strip = $(this); strip.css({ 'bottom': '0px' }); settimeout(function () { strip.animate({ height: '100%', opacity: '1.0' }, iv.options.animationspeed, iv.defs.easing, function () { if (i == iv.options.strips - 1) iv.transitionend(iv); i++; }); }, (100 + timedelay)); timedelay += 50; }); break; case 'strip-left-fade': case 'strip-right-fade': case 'strip-top-fade': case 'strip-bottom-fade': if (fx == 'strip-left-fade' || fx == 'strip-right-fade') iv.addstrips(); else iv.addstrips(true); var timedelay = 0, i = 0, strips = $('.iview-strip', iv.slider); if (fx == 'strip-right-fade' || fx == 'strip-bottom-fade') strips = $('.iview-strip', iv.slider).reverse(); strips.each(function () { var strip = $(this); var width = strip.width(); var height = strip.height(); if (fx == 'strip-left-fade' || fx == 'strip-right-fade') strip.css({ top: '0px', height: '100%', width: width }); else strip.css({ left: '0px', height: height, width: '100%' }); settimeout(function () { strip.animate({ opacity: '1.0' }, iv.options.animationspeed * 1.7, iv.defs.easing, function () { if (i == iv.options.strips - 1) iv.transitionend(iv); i++; }); }, (100 + timedelay)); timedelay += 35; }); break; case 'slide-in-up': case 'slide-in-down': opts = { strips: 1 }; iv.addstrips(false, opts); var strip = $('.iview-strip:first', iv.slider), top = 0; if (fx == 'slide-in-up') top = '-' + iv.defs.height + 'px'; else top = iv.defs.height + 'px'; strip.css({ top: top, 'height': '100%', 'width': iv.defs.width }); strip.animate({ 'top': '0px', opacity: 1 }, (iv.options.animationspeed * 2), iv.defs.easing, function () { iv.transitionend(iv); }); break; case 'zigzag-top': case 'zigzag-bottom': case 'zigzag-grow-top': case 'zigzag-grow-bottom': case 'zigzag-drop-top': case 'zigzag-drop-bottom': iv.addblocks(); var totalblocks = (iv.options.blockcols * iv.options.blockrows), timedelay = 0, blocktoarr = new array(), blocks = $('.iview-block', iv.slider); for (var rows = 0; rows < iv.options.blockrows; rows++) { var odd = (rows % 2), start = (rows * iv.options.blockcols), end = ((rows + 1) * iv.options.blockcols); if (odd == 1) { for (var columns = end - 1; columns >= start; columns--) { blocktoarr.push($(blocks[columns])); } } else { for (var columns = start; columns < end; columns++) { blocktoarr.push($(blocks[columns])); } } } if (fx == 'zigzag-bottom' || fx == 'zigzag-grow-bottom' || fx == 'zigzag-drop-bottom') blocktoarr.reverse(); // run animation blocks.each(function (i) { var block = $(blocktoarr[i]), h = block.height(), w = block.width(), top = block.css('top'); if (fx == 'zigzag-grow-top' || fx == 'zigzag-grow-bottom') block.width(0).height(0); else if (fx == 'zigzag-drop-top' || fx == 'zigzag-drop-bottom') block.css({ top: '-=50' }); settimeout(function () { if (fx == 'zigzag-grow-top' || fx == 'zigzag-grow-bottom') block.animate({ opacity: '1', height: h, width: w }, iv.options.animationspeed, iv.defs.easing, function () { if (i == totalblocks - 1) iv.transitionend(iv); }); else if (fx == 'zigzag-drop-top' || fx == 'zigzag-drop-bottom') block.animate({ top: top, opacity: '1' }, iv.options.animationspeed, iv.defs.easing, function () { if (i == totalblocks - 1) iv.transitionend(iv); }); else block.animate({ opacity: '1' }, (iv.options.animationspeed * 2), 'easeinoutexpo', function () { if (i == totalblocks - 1) iv.transitionend(iv); }); }, (100 + timedelay)); timedelay += 20; }); break; case 'block-fade': case 'block-fade-reverse': case 'block-expand': case 'block-expand-reverse': iv.addblocks(); var totalblocks = (iv.options.blockcols * iv.options.blockrows), i = 0, timedelay = 0; // split blocks into array var rowindex = 0; var colindex = 0; var blocktoarr = new array(); blocktoarr[rowindex] = new array(); var blocks = $('.iview-block', iv.slider); if (fx == 'block-fade-reverse' || fx == 'block-expand-reverse') { blocks = $('.iview-block', iv.slider).reverse(); } blocks.each(function () { blocktoarr[rowindex][colindex] = $(this); colindex++; if (colindex == iv.options.blockcols) { rowindex++; colindex = 0; blocktoarr[rowindex] = new array(); } }); // run animation for (var columns = 0; columns < (iv.options.blockcols * 2); columns++) { var col = columns; for (var rows = 0; rows < iv.options.blockrows; rows++) { if (col >= 0 && col < iv.options.blockcols) { (function () { var block = $(blocktoarr[rows][col]); var w = block.width(); var h = block.height(); if (fx == 'block-expand' || fx == 'block-expand-reverse') { block.width(0).height(0); } settimeout(function () { block.animate({ opacity: '1', width: w, height: h }, iv.options.animationspeed / 1.3, iv.defs.easing, function () { if (i == totalblocks - 1) iv.transitionend(iv); i++; }); }, (100 + timedelay)); })(); } col--; } timedelay += 100; } break; case 'block-random': case 'block-expand-random': case 'block-drop-random': iv.addblocks(); var totalblocks = (iv.options.blockcols * iv.options.blockrows), timedelay = 0; var blocks = iv.shuffle($('.iview-block', iv.slider)); blocks.each(function (i) { var block = $(this), h = block.height(), w = block.width(), top = block.css('top'); if (fx == 'block-expand-random') block.width(0).height(0); if (fx == 'block-drop-random') block.css({ top: '-=50' }); settimeout(function () { block.animate({ top: top, opacity: '1', height: h, width: w }, iv.options.animationspeed, iv.defs.easing, function () { if (i == totalblocks - 1) iv.transitionend(iv); }); }, (100 + timedelay)); timedelay += 20; }); break; case 'slide-in-right': case 'slide-in-left': case 'fade': default: opts = { strips: 1 }; iv.addstrips(false, opts); var strip = $('.iview-strip:first', iv.slider); strip.css({ 'height': '100%', 'width': iv.defs.width }); if (fx == 'slide-in-right') strip.css({ 'height': '100%', 'width': iv.defs.width, 'left': iv.defs.width + 'px', 'right': '' }); else if (fx == 'slide-in-left') strip.css({ 'left': '-' + iv.defs.width + 'px' }); strip.animate({ left: '0px', opacity: 1 }, (iv.options.animationspeed * 2), iv.defs.easing, function () { iv.transitionend(iv); }); break; } }, // shuffle an array shuffle: function (oldarray) { var newarray = oldarray.slice(); var len = newarray.length; var i = len; while (i--) { var p = parseint(math.random() * len); var t = newarray[i]; newarray[i] = newarray[p]; newarray[p] = t; } return newarray; }, // timer interval caller timercall: function (iv) { iv.processtimer(); if (iv.piedegree >= 360) { iv.cleantimer(); iv.goto(false); } }, //set the timer function settimer: function () { var iv = this; iv.timer = setinterval(function () { iv.timercall(iv); }, (iv.defs.time / 120)); }, //clean the timer function cleantimer: function () { var iv = this; clearinterval(iv.timer); iv.timer = null; }, // goto function goto: function (action) { var iv = this; //trigger the onlastslide callback if (iv.defs && (iv.defs.slide == iv.defs.total - 1)) { iv.options.onlastslide.call(this); } iv.cleantimer(); iv.iviewtimer.animate({ opacity: 0 }); //trigger the onbeforechange callback iv.options.onbeforechange.call(this); //set current background before change if (!action) { iv.slider.css('background', 'url("' + iv.defs.image.data('iview:image') + '") no-repeat'); } else { if (action == 'prev' || action == 'next') { iv.slider.css('background', 'url("' + iv.defs.image.data('iview:image') + '") no-repeat'); } } iv.defs.slide++; //trigger the onslideshowend callback if (iv.defs.slide == iv.defs.total) { iv.defs.slide = 0; iv.options.onslideshowend.call(this); } if (iv.defs.slide < 0) iv.defs.slide = (iv.defs.total - 1); //set iv.defs.image iv.defs.image = iv.slides.eq(iv.defs.slide); //set active links if (iv.options.controlnav) { $('.iview-controlnav a.iview-control', iv.slidercontent).removeclass('active'); $('.iview-controlnav a.iview-control:eq(' + iv.defs.slide + ')', iv.slidercontent).addclass('active'); } var fx = iv.options.fx; //generate random transition if (iv.options.fx.tolowercase() == 'random') { var transitions = new array('left-curtain', 'right-curtain', 'top-curtain', 'bottom-curtain', 'strip-down-right', 'strip-down-left', 'strip-up-right', 'strip-up-left', 'strip-up-down', 'strip-up-down-left', 'strip-left-right', 'strip-left-right-down', 'slide-in-right', 'slide-in-left', 'slide-in-up', 'slide-in-down', 'fade', 'block-random', 'block-fade', 'block-fade-reverse', 'block-expand', 'block-expand-reverse', 'block-expand-random', 'zigzag-top', 'zigzag-bottom', 'zigzag-grow-top', 'zigzag-grow-bottom', 'zigzag-drop-top', 'zigzag-drop-bottom', 'strip-left-fade', 'strip-right-fade', 'strip-top-fade', 'strip-bottom-fade', 'block-drop-random'); fx = transitions[math.floor(math.random() * (transitions.length + 1))]; if (fx == undefined) fx = 'fade'; fx = $.trim(fx.tolowercase()); } //run random transition from specified set (eg: effect:'strip-left-fade,right-curtain') if (iv.options.fx.indexof(',') != -1) { var transitions = iv.options.fx.split(','); fx = transitions[math.floor(math.random() * (transitions.length))]; if (fx == undefined) fx = 'fade'; fx = $.trim(fx.tolowercase()); } //custom transition as defined by "data-iview:transition" attribute if (iv.defs.image.data('iview:transition')) { var transitions = iv.defs.image.data('iview:transition').split(','); fx = transitions[math.floor(math.random() * (transitions.length))]; fx = $.trim(fx.tolowercase()); } //set slide easing iv.defs.easing = (iv.defs.image.data('iview:easing')) ? iv.defs.image.data('iview:easing') : iv.options.easing; //start transition iv.defs.lock = true; iv.runtransition(fx); }, playslider: function () { var iv = this; if (iv.timer == null && iv.defs.paused) { iv.iviewtimer.removeclass('paused').attr('title', iv.options.pauselabel); iv.settimer(); iv.defs.paused = false; //trigger the onplay callback iv.options.onplay.call(this); } }, stopslider: function () { var iv = this; iv.iviewtimer.addclass('paused').attr('title', iv.options.playlabel); iv.cleantimer(); iv.defs.paused = true; //trigger the onpause callback iv.options.onpause.call(this); }, //set timer position function settimerposition: function(){ var iv = this, position = iv.options.timerposition.tolowercase().split('-'); for (var i = 0; i < position.length; i++) { if (position[i] == 'top') { iv.iviewtimer.css({ top: iv.options.timery + 'px', bottom: '' }); } else if (position[i] == 'middle') { iv.iviewtimer.css({ top: (iv.options.timery + (iv.defs.height / 2) - (iv.options.timerdiameter / 2)) + 'px', bottom: '' }); } else if (position[i] == 'bottom') { iv.iviewtimer.css({ bottom: iv.options.timery + 'px', top: '' }); } else if (position[i] == 'left') { iv.iviewtimer.css({ left: iv.options.timerx + 'px', right: '' }); } else if (position[i] == 'center') { iv.iviewtimer.css({ left: (iv.options.timerx + (iv.defs.width / 2) - (iv.options.timerdiameter / 2)) + 'px', right: '' }); } else if (position[i] == 'right') { iv.iviewtimer.css({ right: iv.options.timerx + 'px', left: '' }); } } }, disableselection: function (target) { if (typeof target.onselectstart != "undefined") target.onselectstart = function () { return false; }; else if (typeof target.style.mozuserselect != "undefined") target.style.mozuserselect = "none"; else if (typeof target.style.webkituserselect != "undefined") target.style.webkituserselect = "none"; else if (typeof target.style.userselect != "undefined") target.style.userselect = "none"; else target.onmousedown = function () { return false; }; target.unselectable = "on"; }, //touch istouch: function () { return !!('ontouchstart' in window); } }; //image preloader function var imagepreload = function (p_aimages, p_pfnpercent, p_pfnfinished) { this.m_pfnpercent = p_pfnpercent; this.m_pfnfinished = p_pfnfinished; this.m_nloaded = 0; this.m_nprocessed = 0; this.m_aimages = new array; this.m_nicount = p_aimages.length; for (var i = 0; i < p_aimages.length; i++) this.preload(p_aimages[i]) }; imagepreload.prototype = { preload: function (p_oimage) { var oimage = new image; this.m_aimages.push(oimage); oimage.onload = imagepreload.prototype.onload; oimage.onerror = imagepreload.prototype.onerror; oimage.onabort = imagepreload.prototype.onabort; oimage.oimagepreload = this; oimage.bloaded = false; oimage.source = p_oimage; oimage.src = p_oimage }, oncomplete: function () { this.m_nprocessed++; if (this.m_nprocessed == this.m_nicount) this.m_pfnfinished(); else this.m_pfnpercent(math.round((this.m_nprocessed / this.m_nicount) * 10)) }, onload: function () { this.bloaded = true; this.oimagepreload.m_nloaded++; this.oimagepreload.oncomplete() }, onerror: function () { this.berror = true; this.oimagepreload.oncomplete() }, onabort: function () { this.babort = true; this.oimagepreload.oncomplete() } } // begin the iview plugin $.fn.iview = function (options) { // default options. play carefully. options = jquery.extend({ fx: 'random', easing: 'easeoutquad', strips: 20, blockcols: 10, blockrows: 5, animationspeed: 500, pausetime: 5000, startslide: 0, directionnav: true, directionnavhoveropacity: 0.6, controlnav: false, controlnavnextprev: true, controlnavhoveropacity: 0.6, controlnavthumbs: false, controlnavtooltip: true, captionspeed: 500, captioneasing: 'easeinoutsine', captionopacity: 1, autoadvance: true, keyboardnav: true, touchnav: true, pauseonhover: false, nextlabel: "next", previouslabel: "previous", playlabel: "play", pauselabel: "pause", closelabel: "close", randomstart: false, timer: 'pie', timerbg: '#000', timercolor: '#eee', timeropacity: 0.5, timerdiameter: 30, timerpadding: 4, timerstroke: 3, timerbarstroke: 1, timerbarstrokecolor: '#eee', timerbarstrokestyle: 'solid', timerposition: 'top-right', timerx: 10, timery: 10, tooltipx: 5, tooltipy: -5, onbeforechange: function () {}, onafterchange: function () {}, onafterload: function () {}, onlastslide: function () {}, onslideshowend: function () {}, onpause: function () {}, onplay: function () {} }, options); $(this).each(function () { var el = $(this); new iview(el, options); }); }; $.fn.reverse = [].reverse; var elems = $([]), jq_resize = $.resize = $.extend($.resize, {}), timeout_id, str_settimeout = "settimeout", str_resize = "resize", str_data = str_resize + "-special-event", str_delay = "delay", str_throttle = "throttlewindow"; jq_resize[str_delay] = 250; jq_resize[str_throttle] = true; $.event.special[str_resize] = { setup: function () { if (!jq_resize[str_throttle] && this[str_settimeout]) { return false } var elem = $(this); elems = elems.add(elem); $.data(this, str_data, { w: elem.width(), h: elem.height() }); if (elems.length === 1) { loopy() } }, teardown: function () { if (!jq_resize[str_throttle] && this[str_settimeout]) { return false } var elem = $(this); elems = elems.not(elem); elem.removedata(str_data); if (!elems.length) { cleartimeout(timeout_id) } }, add: function (handleobj) { if (!jq_resize[str_throttle] && this[str_settimeout]) { return false } var old_handler; function new_handler(e, w, h) { var elem = $(this), data = $.data(this, str_data); data.w = w !== undefined ? w : elem.width(); data.h = h !== undefined ? h : elem.height(); old_handler.apply(this, arguments) } if ($.isfunction(handleobj)) { old_handler = handleobj; return new_handler } else { old_handler = handleobj.handler; handleobj.handler = new_handler } } }; function loopy() { timeout_id = window[str_settimeout](function () { elems.each(function () { var elem = $(this), width = elem.width(), height = elem.height(), data = $.data(this, str_data); if (width !== data.w || height !== data.h) { elem.trigger(str_resize, [data.w = width, data.h = height]) } }); loopy() }, jq_resize[str_delay]) } var supporttouch = !! ('ontouchstart' in window), touchstartevent = supporttouch ? "touchstart" : "mousedown", touchstopevent = supporttouch ? "touchend" : "mouseup", touchmoveevent = supporttouch ? "touchmove" : "mousemove"; // also handles swipeleft, swiperight $.event.special.swipe = { scrollsupressionthreshold: 10, // more than this horizontal displacement, and we will suppress scrolling. durationthreshold: 1000, // more time than this, and it isn't a swipe. horizontaldistancethreshold: 30, // swipe horizontal displacement must be more than this. verticaldistancethreshold: 75, // swipe vertical displacement must be less than this. setup: function () { var thisobject = this, $this = $(thisobject); $this.bind(touchstartevent, function (event) { var data = event.originalevent.touches ? event.originalevent.touches[0] : event, start = { time: (new date()).gettime(), coords: [data.pagex, data.pagey], origin: $(event.target) }, stop; function movehandler(event) { if (!start) { return; } var data = event.originalevent.touches ? event.originalevent.touches[0] : event; stop = { time: (new date()).gettime(), coords: [data.pagex, data.pagey] }; // prevent scrolling if (math.abs(start.coords[0] - stop.coords[0]) > $.event.special.swipe.scrollsupressionthreshold) { event.preventdefault(); } } $this.bind(touchmoveevent, movehandler).one(touchstopevent, function (event) { $this.unbind(touchmoveevent, movehandler); if (start && stop) { if (stop.time - start.time < $.event.special.swipe.durationthreshold && math.abs(start.coords[0] - stop.coords[0]) > $.event.special.swipe.horizontaldistancethreshold && math.abs(start.coords[1] - stop.coords[1]) < $.event.special.swipe.verticaldistancethreshold) { start.origin.trigger("swipe").trigger(start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight"); } } start = stop = undefined; }); }); } }; $.each({ swipeleft: "swipe", swiperight: "swipe" }, function (event, sourceevent) { $.event.special[event] = { setup: function () { $(this).bind(sourceevent, $.noop); } }; }); })(jquery, this);