jQuery.fn.margin = function () { var marginTop = this.outerHeight(true) - this.outerHeight(); var marginLeft = this.outerWidth(true) - this.outerWidth(); return { top: marginTop, left: marginLeft} }; function detectiPhone() { var deviceAgent = navigator.userAgent.toLowerCase(); var agentID = deviceAgent.match(/(iphone|ipod|ipad)/); return agentID; } (function ($) { $.fn.easySlider = function (options) { var defaults = { prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next', controlsShow: true, controlsBefore: '', controlsAfter: '', controlsFade: true, firstId: 'firstBtn', firstText: 'First', firstShow: false, lastId: 'lastBtn', lastText: 'Last', lastShow: false, vertical: false, speed: 800, auto: false, pause: 2000, continuous: false, numeric: false, numericId: 'controls', swiping: true }; var options = $.extend(defaults, options); this.each(function () { var obj = $(this); var s = $("li", obj).length; var w = $("li", obj).width(); var h = $("li", obj).height(); var clickable = true; obj.width(w); obj.height(h); obj.css("overflow", "hidden"); var ts = s - 1; var t = 0; $("ul", obj).css('width', s * w); if (options.swiping && detectiPhone()) { var startX, startMargin; var swipeX; var endX; var isSwping = false; var clickTimeout = null; $("li", obj).each(function () { var url = $("a", this).first().attr("href"); url = url.substr(0, url.indexOf('#')); $(this).find("a").remove(); $(this).bind("touchstart", function () { clickTimeout = setTimeout(function () { window.location = url; }, 300); }); }); obj.bind("touchstart", function (e) { e.preventDefault(); startX = event.touches[0].pageX; clearTimeout(timeout); isSwping = true; }); obj.bind("touchmove", function (e) { e.preventDefault(); if (isSwping) { swipeX = event.touches[0].pageX; var delta = Math.abs(startX - swipeX); if (delta > 50) clearTimeout(clickTimeout); } }); obj.bind("touchend", function (e) { e.preventDefault(); clearTimeout(clickTimeout); var delta = startX - swipeX; if (delta > 50) animate('next', false); if (delta < -50 && t > 0) animate('prev', false); isSwping = false; }); } if (options.continuous) { $("ul", obj).append($("ul li:nth-child(1)", obj).clone()); $("ul", obj).css('width', (s + 1) * w); }; if (!options.vertical) $("li", obj).css('float', 'left'); if (options.controlsShow) { var html = options.controlsBefore; if (options.numeric) { html += '<ol id="' + options.numericId + '"></ol>'; } else { if (options.firstShow) html += '<span id="' + options.firstId + '"><a href=\"javascript:void(0);\">' + options.firstText + '</a></span>'; html += '<span id="' + options.prevId + '"><a href=\"javascript:void(0);\">' + options.prevText + '</a></span>'; html += '<span id="' + options.nextId + '"><a href=\"javascript:void(0);\">' + options.nextText + '</a></span>'; if (options.lastShow) html += '<span id="' + options.lastId + '"><a href=\"javascript:void(0);\">' + options.lastText + '</a></span>'; }; html += options.controlsAfter; $(obj).after(html); }; if (options.numeric) { for (var i = 0; i < s; i++) { $(document.createElement("li")).attr('id', options.numericId + (i + 1)).html('<a rel=' + i + ' href=\"javascript:void(0);\">' + (i + 1) + '</a>').appendTo($("#" + options.numericId)).click(function () { animate($("a", $(this)).attr('rel'), true); }); }; } else { $("a", "#" + options.nextId).click(function () { animate("next", true); }); $("a", "#" + options.prevId).click(function () { animate("prev", true); }); $("a", "#" + options.firstId).click(function () { animate("first", true); }); $("a", "#" + options.lastId).click(function () { animate("last", true); }); }; function setCurrent(i) { i = parseInt(i) + 1; $("li", "#" + options.numericId).removeClass("current"); $("li#" + options.numericId + i).addClass("current"); }; function adjust() { if (t > ts) t = 0; if (t < 0) t = ts; options.onChange(t); if (!options.vertical) { $("ul", obj).css("margin-left", (t * w * -1)); } else { $("ul", obj).css("margin-left", (t * h * -1)); } clickable = true; if (options.numeric) setCurrent(t); }; function animate(dir, clicked) { options.onAnimate(t); if (clickable) { clickable = false; var ot = t; switch (dir) { case "next": t = (ot >= ts) ? (options.continuous ? t + 1 : ts) : t + 1; break; case "prev": t = (t <= 0) ? (options.continuous ? t - 1 : 0) : t - 1; break; case "first": t = 0; break; case "last": t = ts; break; default: t = dir; break; }; var diff = Math.abs(ot - t); var speed = diff * options.speed; if (!options.vertical) { p = (t * w * -1); $("ul", obj).animate({ marginLeft: p }, { queue: false, duration: speed, complete: adjust }); } else { p = (t * h * -1); $("ul", obj).animate({ marginTop: p }, { queue: false, duration: speed, complete: adjust }); }; if (!options.continuous && options.controlsFade) { if (t == ts) { $("a", "#" + options.nextId).hide(); $("a", "#" + options.lastId).hide(); } else { $("a", "#" + options.nextId).show(); $("a", "#" + options.lastId).show(); }; if (t == 0) { $("a", "#" + options.prevId).hide(); $("a", "#" + options.firstId).hide(); } else { $("a", "#" + options.prevId).show(); $("a", "#" + options.firstId).show(); }; }; if (clicked) clearTimeout(timeout); if (options.auto && dir == "next" && !clicked) { ; timeout = setTimeout(function () { animate("next", false); }, diff * options.speed + options.pause); }; }; }; var timeout; if (options.auto) { ; timeout = setTimeout(function () { animate("next", false); }, options.pause); }; if (options.numeric) setCurrent(0); if (!options.continuous && options.controlsFade) { $("a", "#" + options.prevId).hide(); $("a", "#" + options.firstId).hide(); }; }); }; })(jQuery);