(function($) { var carouselevo = function(element, options) { var settings = $.extend({}, $.fn.carousel.defaults, options), self = this, element = $(element), carousel = element.children('.slides'); carousel.children('div').addclass('slideitem'); var slideitems = carousel.children('.slideitem'), slideimage = slideitems.find('img'), currentslide = 0, targetslide = 0, numberslides = slideitems.length, isanimationrunning = false, pause = true; videos = { youtube: { reg: /youtube\.com\/watch/i, split: '=', index: 1, url: 'http://www.youtube.com/embed/%id%?autoplay=1&fs=1rel=0' }, vimeo: { reg: /vimeo\.com/i, split: '/', index: 3, url: 'http://player.vimeo.com/video/%id%?portrait=0&autoplay=1' } }; this.current = currentslide; this.length = numberslides; this.init = function() { var o = settings; initslides(); if (o.directionnav == true) { initdirectionbutton(); } if (o.buttonnav != 'none') { initbuttonnav(); } if (o.reflection == true) { initreflection(); } if (o.shadow == true) { initshadow(); } if (o.description == true) { initdesc(); } if (o.autoplay == true) { runautoplay(); } initvideo(); }; var setimagesize = function(p) { var o = settings, n = numberslides, w = o.frontwidth, h = o.frontheight, ret; if (p != 0) { if (o.halign == 'center') { if (p > 0 && p <= math.ceil((n - 1) / 2)) { var front = setimagesize(p - 1); w = o.backzoom * front.width; h = o.backzoom * front.height; } else { var sz = setimagesize(n - p); w = sz.width; h = sz.height; } } else { if (p == (n - 1)) { w = o.frontwidth / o.backzoom; h = o.frontheight / o.backzoom; } else { var front = setimagesize(p - 1); w = o.backzoom * front.width; h = o.backzoom * front.height; } } } return ret = { width: w, height: h }; }; var setslidesize = function(p) { var o = settings, n = numberslides, w = o.frontwidth, h = o.frontheight + reflectionheight(p) + shadowheight(p), ret; if (p != 0) { if (o.halign == 'center') { if (p > 0 && p <= math.ceil((n - 1) / 2)) { var front = setimagesize(p - 1); w = o.backzoom * front.width; h = (o.backzoom * front.height) + reflectionheight(p) + shadowheight(p); } else { var sz = setslidesize(n - p); w = sz.width; h = sz.height; } } else { if (p == (n - 1)) { w = o.frontwidth / o.backzoom; h = (o.frontheight / o.backzoom) + reflectionheight(p) + shadowheight(p); } else { var front = setimagesize(p - 1); w = o.backzoom * front.width; h = (o.backzoom * front.height) + reflectionheight(p) + shadowheight(p); } } } return ret = { width: w, height: h }; }; var getmargin = function(p) { var o = settings, vm, hm, ret, iz = setimagesize(p); vm = iz.height * o.vmargin; hm = iz.width * o.hmargin; return ret = { vmargin: vm, hmargin: hm }; }; var centerpos = function(p) { var o = settings, c = toppos(p - 1) + (setimagesize(p - 1).height - setimagesize(p).height) / 2; if (o.halign != 'center') { if (p == (numberslides - 1)) { c = o.top - ((setimagesize(p).height - setimagesize(0).height) / 2); } } return c; }; var toppos = function(p) { var o = settings, t = o.top, vm = getmargin(p).vmargin; if (o.valign == 'bottom') { t = o.bottom; } if (p != 0) { if (o.halign == 'center') { if (p > 0 && p <= math.ceil((numberslides - 1) / 2)) { if (o.valign == 'center') { t = centerpos(p); } else { t = centerpos(p) + vm; } } else { t = toppos(numberslides - p); } } else { if (p == (numberslides - 1)) { if (o.valign == 'center') { t = centerpos(p); } else { t = centerpos(p) - vm; } } else { if (o.valign == 'center') { t = centerpos(p); } else { t = centerpos(p) + vm; } } } } return t; }; var horizonpos = function(p) { var o = settings, n = numberslides, hpos, mod = n % 2, endslide = n / 2, hm = getmargin(p).hmargin; if (p == 0) { if (o.halign == 'center') { hpos = (o.carouselwidth - o.frontwidth) / 2; } else { hpos = o.left; if (o.halign == 'right') { hpos = o.right; } } } else { if (o.halign == 'center') { if (p > 0 && p <= math.ceil((n - 1) / 2)) { hpos = horizonpos(p - 1) - hm; if (mod == 0) { if (p == endslide) { hpos = (o.carouselwidth - setslidesize(p).width) / 2; } } } else { hpos = o.carouselwidth - horizonpos(n - p) - setslidesize(p).width; } } else { if (p == (n - 1)) { hpos = horizonpos(0) - (setslidesize(p).width - setslidesize(0).width) / 2 - hm; } else { hpos = horizonpos(p - 1) + (setslidesize(p - 1).width - setslidesize(p).width) / 2 + hm; } } } return hpos; }; var setopacity = function(p) { var o = settings, n = numberslides, opc = 1, hiddenslide = n - o.slidesperscroll; if (hiddenslide < 2) { hiddenslide = 2; } if (o.halign == 'center') { var s1 = (n - 1) / 2, hs2 = hiddenslide / 2, lastslide1 = (s1 + 1) - hs2, lastslide2 = s1 + hs2; if (p == 0) { opc = 1; } else { opc = o.backopacity; if (p >= lastslide1 && p <= lastslide2) { opc = 0; } } } else { if (p == 0) { opc = 1; } else { opc = o.backopacity; if (!(p < (n - hiddenslide))) { opc = 0; } } } return opc; }; var setslideposition = function(p) { var pos = new array(), o = settings, n = numberslides; for (var i = 0; i < n; i++) { var sz = setslidesize(i); if (o.halign == 'left') { pos[i] = { width: sz.width, height: sz.height, top: toppos(i), left: horizonpos(i), opacity: setopacity(i) }; if (o.valign == 'bottom') { pos[i] = { width: sz.width, height: sz.height, bottom: toppos(i), left: horizonpos(i), opacity: setopacity(i) }; } } else { pos[i] = { width: sz.width, height: sz.height, top: toppos(i), right: horizonpos(i), opacity: setopacity(i) }; if (o.valign == 'bottom') { pos[i] = { width: sz.width, height: sz.height, bottom: toppos(i), right: horizonpos(i), opacity: setopacity(i) }; } } } return pos[p]; }; var slidepos = function(i) { var cs = currentslide, pos = i - cs; if (i < cs) { pos += numberslides; } return pos; }; var zindex = function(i) { var z, n = numberslides, halign = settings.halign; if (halign == 'left' || halign == 'right') { if (i == (n - 1)) { z = n - 1; } else { z = n - (2 + i); } } else { if (i >= 0 && i <= ((n - 1) / 2)) { z = (n - 1) - i; } else { z = i - 1; } } return z; }; var slidesmouseover = function(event) { var o = settings; if (o.autoplay == true && o.pauseonhover == true) { stopautoplay(); } }; var slidesmouseout = function(event) { var o = settings; if (o.autoplay == true && o.pauseonhover == true) { if (pause == true) { runautoplay(); } } }; var initslides = function() { var o = settings, n = numberslides, images = slideimage; carousel.css({ 'width': o.carouselwidth + 'px', 'height': o.carouselheight + 'px' }).bind('mouseover', slidesmouseover).bind('mouseout', slidesmouseout); for (var i = 0; i < n; i++) { var item = slideitems.eq(i); item.css(setslideposition(slidepos(i))).bind('click', slideclick); slideitems.eq(slidepos(i)).css({ 'z-index': zindex(i) }).attr("id","side"+i);//dong images.eq(i).css(setimagesize(slidepos(i))); var op = item.css('opacity'); if (op == 0) { item.hide(); } else { item.show(); } } if (o.mouse == true) { carousel.mousewheel(function(event, delta) { if (delta > 0) { goto(currentslide - 1, true, false); return false; } else if (delta < 0) { goto(currentslide + 1, true, false); return false; } }); } }; var hideitem = function(slide) { var op = slide.css('opacity'); if (op == 0) { slide.hide(); } }; var goto = function(index, isstopautoplay, ispause) { if (isanimationrunning == true) { return; } var o = settings, n = numberslides; if (isstopautoplay == true) { stopautoplay(); } targetslide = index; if (targetslide == n) { targetslide = 0; } if (targetslide == -1) { targetslide = n - 1; } o.before(self); animateslide(); pause = ispause; }; var animateslide = function() { var o = settings, n = numberslides; if (isanimationrunning == true) { return; } if (currentslide == targetslide) { isanimationrunning = false; return; } isanimationrunning = true; hidedesc(currentslide); if (currentslide > targetslide) { var forward = n - currentslide + targetslide, backward = currentslide - targetslide; } else { var forward = targetslide - currentslide, backward = currentslide + n - targetslide; } if (forward > backward) { dir = -1; } else { dir = 1; } currentslide += dir; if (currentslide == n) { currentslide = 0; } if (currentslide == -1) { currentslide = n - 1; } hidevideooverlay(); buttonnavstate(); showdesc(currentslide); for (var i = 0; i < n; i++) { animateimage(i); } }; var animateimage = function(i) { var o = settings, item = slideitems.eq(i), pos = slidepos(i); item.show(); item.animate(setslideposition(pos), o.speed, 'linear', function() { hideitem($(this)); if (i == numberslides - 1) { isanimationrunning = false; if (currentslide != targetslide) { animateslide(); } else { self.current = currentslide; showvideooverlay(currentslide); o.after(self); } } }); item.css({ 'z-index': zindex(pos) }).attr("id","side"+pos);//dong slideimage.eq(i).animate(setimagesize(pos), o.speed, 'linear'); if (o.reflection == true) { animatereflection(o, item, i); } if (o.shadow == true) { animateshadow(o, item, i); } }; var slideclick = function(event) { var $this = $(this); if ($this.index() != currentslide) { goto($this.index(), true, false); return false; } }; var reflectionheight = function(p) { var h = 0, o = settings; if (o.reflection == true) { h = o.reflectionheight * setimagesize(p).height; } return h; }; var initreflection = function() { var o = settings, items = slideitems, images = slideimage, n = numberslides, opc = o.reflectionopacity, start = 'rgba(' + o.reflectioncolor + ',' + opc + ')', end = 'rgba(' + o.reflectioncolor + ',1)'; var style = ''; $(style).appendto('head'); for (var i = 0; i < n; i++) { var src = images.eq(i).attr('src'), sz = setimagesize(i); $('
').css({ 'position': 'absolute', 'margin': '0', 'padding': '0', 'border': 'none', 'overflow': 'hidden', 'left': '0', 'top': setimagesize(i).height + 'px', 'width': '100%', 'height': reflectionheight(i) }).appendto(items.eq(i)).append($('').css({ 'width': sz.width + 'px', 'height': sz.height + 'px', 'left': '0', 'margin': '0', 'padding': '0', 'border': 'none', '-moz-transform': 'rotate(180deg) scale(-1,1)', '-webkit-transform': 'rotate(180deg) scale(-1,1)', '-o-transform': 'rotate(180deg) scale(-1,1)', 'transform': 'rotate(180deg) scale(-1,1)', 'filter': 'progid:dximagetransform.microsoft.basicimage(rotation=2, mirror=1)', '-ms-filter': 'progid:dximagetransform.microsoft.basicimage(rotation=2, mirror=1)' })).append(''); } }; var animatereflection = function(option, item, i) { var ref = item.children('.reflection'), speed = option.speed, sz = setimagesize(slidepos(i)); ref.animate({ 'top': sz.height + 'px', 'height': reflectionheight(slidepos(i)) }, speed, 'linear'); ref.children('img').animate(sz, speed, 'linear'); }; var shadowheight = function(p) { var sh = 0; if (settings.shadow == true) { sh = 0.1 * setimagesize(p).height; } return sh; }; var shadowmiddlewidth = function(p) { var w, s = slideitems.eq(p).find('.shadow'), sl = s.children('.shadowleft'), sr = s.children('.shadowright'), sm = s.children('.shadowmiddle'); return w = setimagesize(p).width - (sl.width() + sr.width()); }; var initshadow = function() { var items = slideitems, n = numberslides, swidth = setimagesize(0).width, sinner = ''; if (settings.halign != 'center') { swidth = setimagesize(n - 1).width; } for (var i = 0; i < n; i++) { var item = items.eq(i); $('').css({ 'width': swidth + 'px', 'z-index': '-1', 'position': 'absolute', 'margin': '0', 'padding': '0', 'border': 'none', 'overflow': 'hidden', 'left': '0', 'bottom': '0' }).append(sinner).appendto(item).children('div').css({ 'position': 'relative', 'float': 'left' }); item.find('.shadow').children('.shadowmiddle').width(shadowmiddlewidth(i)); } }; var animateshadow = function(option, item, i) { item.find('.shadow').children('.shadowmiddle').animate({ 'width': shadowmiddlewidth(slidepos(i)) + 'px' }, option.speed, 'linear'); }; var initdirectionbutton = function() { var el = element; el.append(''); el.children('.nextbutton').bind('click', function(event) { goto(currentslide + 1, true, false); }); el.children('.prevbutton').bind('click', function(event) { goto(currentslide - 1, true, false); }); }; var initbuttonnav = function() { var el = element, n = numberslides, buttonname = 'bullet', activeclass = 'bulletactive'; if (settings.buttonnav == 'numbers') { buttonname = 'numbers'; activeclass = 'numberactive'; } el.append(''); var buttonnav = el.children('.buttonnav'); for (var i = 0; i < n; i++) { var number = ''; if (buttonname == 'numbers') { number = i + 1; } $(' ').css({ 'text-align': 'center' }).bind('click', function(event) { goto($(this).index(), true, false); }).appendto(buttonnav); } var b = buttonnav.children('.' + buttonname); b.eq(0).addclass(activeclass) buttonnav.css({ 'width': numberslides * b.outerwidth(true), 'height': b.outerheight(true) }); }; var buttonnavstate = function() { var o = settings, buttonnav = element.children('.buttonnav'); if (o.buttonnav == 'numbers') { var numbers = buttonnav.children('.numbers'); numbers.removeclass('numberactive'); numbers.eq(currentslide).addclass('numberactive'); } else { var bullet = buttonnav.children('.bullet'); bullet.removeclass('bulletactive'); bullet.eq(currentslide).addclass('bulletactive'); } }; var initdesc = function() { var desc = $(settings.descriptioncontainer), w = desc.width(), h = desc.height(), descitems = desc.children('div'), n = descitems.length; for (var i = 0; i < n; i++) { descitems.eq(i).hide().css({ 'position': 'absolute', 'top': '0', 'left': '0' }); } descitems.eq(0).show(); }; var hidedesc = function(index) { var o = settings; if (o.description == true) { var desc = $(o.descriptioncontainer); desc.children('div').eq(index).hide(); } }; var showdesc = function(index) { var o = settings; if (o.description == true) { var desc = $(o.descriptioncontainer); desc.children('div').eq(index).show(); } }; var initspinner = function() { var sz = setimagesize(0); $('').hide().css(setslideposition(0)).css({ 'width': sz.width + 'px', 'height': sz.height + 'px', 'z-index': numberslides + 3, 'position': 'absolute', 'cursor': 'pointer', 'overflow': 'hidden', 'padding': '0', 'margin': '0', 'border': 'none' }).appendto(carousel); }; var initvideo = function() { initspinner(); var sz = setimagesize(0); $('').hide().css(setslideposition(0)).css({ 'width': sz.width + 'px', 'height': sz.height + 'px', 'z-index': numberslides + 2, 'position': 'absolute', 'cursor': 'pointer', 'overflow': 'hidden', 'padding': '0', 'margin': '0', 'border': 'none' }).bind('click', videooverlayclick).appendto(carousel); showvideooverlay(currentslide); }; var showvideooverlay = function(index) { if (slideitems.eq(index).children('a').hasclass('video')) { carousel.children('.videooverlay').show(); } }; var hidevideooverlay = function() { var car = carousel; car.children('.videooverlay').hide().children().remove(); car.children('.spinner').hide(); }; var getvideo = function(url) { var types = videos, src; $.each(types, function(i, e) { if (url.match(e.reg)) { var id = url.split(e.split)[e.index].split('?')[0].split('&')[0]; src = e.url.replace("%id%", id); } }); return src; }; var addvideocontent = function() { var vo = carousel.children('.videooverlay'), url = slideitems.eq(currentslide).children('a').attr('href'), src = getvideo(url); $('').attr({ 'width': vo.width() + 'px', 'height': vo.height() + 'px', 'src': src, 'frameborder': '0' }).bind('load', videoload).appendto(vo); }; var videooverlayclick = function(event) { addvideocontent(); carousel.children('.spinner').show(); $(this).hide(); if (settings.autoplay == true) { stopautoplay(); pause = false; } }; var videoload = function(event) { var car = carousel; car.children('.videooverlay').show(); car.children('.spinner').hide(); }; var runautoplay = function() { intervalprocess = setinterval(function() { goto(currentslide + 1, false, true); }, settings.autoplayinterval); }; var stopautoplay = function() { if (settings.autoplay == true) { clearinterval(intervalprocess); return; } }; this.prev = function() { goto(currentslide - 1, true, false); }; this.next = function() { goto(currentslide + 1, true, false); }; this.goto = function(index) { goto(index, true, false); }; this.pause = function() { stopautoplay(); pause = false; }; this.resume = function() { if (settings.autoplay == true) { runautoplay(); } }; }; $.fn.carousel = function(options) { var returnarr = []; for (var i = 0; i < this.length; i++) { if (!this[i].carousel) { this[i].carousel = new carouselevo(this[i], options); this[i].carousel.init(); } returnarr.push(this[i].carousel); } return returnarr.length > 1 ? returnarr : returnarr[0]; }; $.fn.carousel.defaults = { halign: 'center', valign: 'center', hmargin: 0.5, vmargin: 0.2, frontwidth: 400, frontheight: 300, carouselwidth: 1000, carouselheight: 360, left: 0, right: 0, top: 0, bottom: 0, backzoom: 0.8, slidesperscroll: 5, speed: 500, buttonnav: 'none', directionnav: false, autoplay: true, autoplayinterval: 5000, pauseonhover: true, mouse: true, shadow: false, reflection: false, reflectionheight: 0.2, reflectionopacity: 0.5, reflectioncolor: '255,255,255', description: false, descriptioncontainer: '.description', backopacity: 1, before: function(carousel) {}, after: function(carousel) {} }; })(jquery);