From 1755e175e5fb6826d954b4c5771c2acc77a5616c Mon Sep 17 00:00:00 2001 From: Mark McDonnell Date: Wed, 23 Nov 2011 16:15:21 +0000 Subject: [PATCH] Add jQuery Plugin examples --- Assets/Images/1.jpg | Bin 0 -> 557 bytes Assets/Images/2.jpg | Bin 0 -> 544 bytes Assets/Images/3.jpg | Bin 0 -> 545 bytes Assets/Images/4.jpg | Bin 0 -> 545 bytes Assets/Images/5.jpg | Bin 0 -> 545 bytes Assets/Images/6.jpg | Bin 0 -> 544 bytes Assets/Images/7.jpg | Bin 0 -> 544 bytes Assets/Images/8.jpg | Bin 0 -> 544 bytes Assets/Scripts/Utils/jquery.carousel.js | 232 +++++++++++++++++++++++ Assets/Scripts/example-jquery-plugins.js | 30 +++ JSON-P.php | 17 ++ example-jquery-plugins.html | 29 +++ 12 files changed, 308 insertions(+) create mode 100644 Assets/Images/1.jpg create mode 100644 Assets/Images/2.jpg create mode 100644 Assets/Images/3.jpg create mode 100644 Assets/Images/4.jpg create mode 100644 Assets/Images/5.jpg create mode 100644 Assets/Images/6.jpg create mode 100644 Assets/Images/7.jpg create mode 100644 Assets/Images/8.jpg create mode 100644 Assets/Scripts/Utils/jquery.carousel.js create mode 100644 Assets/Scripts/example-jquery-plugins.js create mode 100644 JSON-P.php create mode 100644 example-jquery-plugins.html diff --git a/Assets/Images/1.jpg b/Assets/Images/1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..49ec0018b8529de9516ccb4162a5ce5b75f36862 GIT binary patch literal 557 zcma)1TW-QI5S)!;J0u3yN`esK1A2`9q*5i+_7pt|2jLi;0C5N&KitG!Kn)^N($31# zYCW?v8xG+D{#t#mKt%YELOA0cCXQnr8?DX2$jcIAlFX%PmZpx~4eUl^9*@CjZ~D|$iXNqGu;loA!sFfyLV0j;^V;RL4$ z5i160HDEmIU7-Nn{b}=xSE@HsS3?P((G^9zxU*IxS3nx9B8Ly`j5 SbX0#*{wwL7&=Z6y9De{Y3Q_g| literal 0 HcmV?d00001 diff --git a/Assets/Images/2.jpg b/Assets/Images/2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e9bbde7db2d0f54dd35be2158a899757c0c9c428 GIT binary patch literal 544 zcma)1L2kk@5S)!2CnN^eN+Lx`q_#W*Aq5GE7GBY3_S%X&SK40s2OeN-qDFv3+Ob!% zyfZtq_F#X&+x2D*BEpM1u-{lgNhw3A!cdKrt29~=|pE)o@ZH8 z*LCyQ!w;b-ipF|eGM80himGq^_hCO^V$9JBnjtVG4A~tD7Zul#{@X8b4Q0Qe1tDO; z0KGlGU-TcGCg)qptCPfT5QTyF%FQidc_s*=mZAYd&=c-jsJ64XOQ80Nem8({(fPPv T^moAAr{llUb%X(PCi{5;c&<(B literal 0 HcmV?d00001 diff --git a/Assets/Images/3.jpg b/Assets/Images/3.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d658c193d7498c0c721b1f0295b4e47eba8362d3 GIT binary patch literal 545 zcma)1TW-QI5S)!2+f59tm83$158wp-?oW`A5O504(*ItehpBpqK7M)=cLQorBZV^d zO4fR2XEwgaZ}4He--3v+lY{t$4UE=0)h12Nosr6&F)sI6mS>q~e**jQgePNP6lGZy z^SZ9*iw^A&veu6LXv#dDRiT=7pSM2ZD}uu#8bvE4fmERQhDxI1FRZlhWr1E_+xQ8u z2nj0&=;e9!a1kmImE4oyC=w@wC{0?kGV}@S6G0I*)Y=Xal8!KFVVbkWAc2}C{cZpy X$=NNQx_iaEO~?PGI}@&$GsTY|@U2Kj literal 0 HcmV?d00001 diff --git a/Assets/Images/4.jpg b/Assets/Images/4.jpg new file mode 100644 index 0000000000000000000000000000000000000000..8cb6928118e6fdbd9bb5d4552ca15843a2dc9bf7 GIT binary patch literal 545 zcma)1TW-QI5S)!2J53C%l>{Ne2lN>INu^2%I0XmlA$pXm>LGaia1*lu5k#cWj%CSO z&+N>ET{wX^%k>gOgq0kGBR*iX*0DBmY+j7qEHNg@T$*NS>eyYtZaCu6(B*kip3Po||Wr|su|AK?c+!5eBtuZTP;PvIA(M8zYljK@--GuJj8;1nTZ z#Q=SM9=`8FC8B~m5^P11$RdiP#;ovN!uy4wh-zwV`v_4>=(RBQ)uNX`^@45T!cpF literal 0 HcmV?d00001 diff --git a/Assets/Images/5.jpg b/Assets/Images/5.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ee1ad1b6082a291a8f5499f6cf5d61a0a8474b8d GIT binary patch literal 545 zcma)1TW-QI5S)$U2Z@2Tk|0F*pj@GU{RvVf)ba zUDwN1hjs{AYsY>(XPz&rP%XO8|32a;g2NLUMQbF1RG|2UN}}QxM%pu3px4(n9^n-s zVZ{J_%pP~YLM5V-dlKwK;$#r%q%|u;pRhR-6j4KVfRJ>AyB4OoSllI0^FY@Ppd>lF U)q8gb%-eMQSGo&fz?>-_PPAo66aWAK literal 0 HcmV?d00001 diff --git a/Assets/Images/6.jpg b/Assets/Images/6.jpg new file mode 100644 index 0000000000000000000000000000000000000000..23e7c8c5c1e22f4f813f41968b3ad976e7d9250e GIT binary patch literal 544 zcma)%Z;HY&5XIj#X>eh@1dX6E0z<-(J)m$=@ha(`{Q|F2_6#iu0Sg9b zx8CfYz?bXE`MqW9T4Fbd!oYjw<{g;c0YTJI)Byx7@XPx# literal 0 HcmV?d00001 diff --git a/Assets/Images/7.jpg b/Assets/Images/7.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5ce88f7c470d6389da6d2c84603225d5d1b40521 GIT binary patch literal 544 zcma)1U2cLv5dMaR0b$YE04Wh4YLC$uOq!VLvj^~Cp2m0xtuNkWyI@Migwk)b$!6#K z8+*1l$acM1gNX3y4(t^lVBhxxpM!uW>~0b1P8dSKTe~i;;FR N*6vRDBV5Q{z5yp&MI-g4biJA%|0^hb| z*>C3maR>JU-mW$)5E0gX!F}T$Dvo0rD=F23@+VJ~N^_lMd6sF`omfu`E~dIHtEwy) zP17tM2Zbh-B*{ciX3VpBZR+{(dGE!2!lZbE74(eAkTB%-sC`tNONQq#z`2w=K?_2} zf&uz?d2RoJ!q-%MS+esbsc%Fw3SO1D1lkS|M3#~fAR2(H7RvS(R{^q5^fv*7PtJPz THS7`dkdAMq>wyt-CU^V=COS!I literal 0 HcmV?d00001 diff --git a/Assets/Scripts/Utils/jquery.carousel.js b/Assets/Scripts/Utils/jquery.carousel.js new file mode 100644 index 0000000..adf7838 --- /dev/null +++ b/Assets/Scripts/Utils/jquery.carousel.js @@ -0,0 +1,232 @@ +/** + * jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget. + * @requires jQuery v1.2 or above + * + * http://gmarwaha.com/jquery/jcarousellite/ + * + * Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com) + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * Version: 1.0.1 + * Note: Requires jquery 1.2 or above from version 1.0.1 + */ +define(['jquery'], function($){ + + $.fn.jCarouselLite = function(o) { + + // Configuration Options + o = $.extend({ + afterEnd: null, + auto: null, + beforeStart: null, + btnPrev: null, + btnNext: null, + btnGo: null, + circular: true, + easing: null, + mouseWheel: false, + moveForward: true, // @MarkMcDonnell extended code base to allow forward & backward motion (forward by default), set to false to move backwards + scroll: 1, + speed: 200, + start: 0, + vertical: false, + visible: 3 + }, o || {}); + + // Returns the element collection (chainable) + return this.each(function(){ + + // Cache variables for quicker scope lookups + var running = false, + animCss = o.vertical ? "top" : "left", + sizeCss = o.vertical ? "height" : "width", + div = $(this), + ul = $("ul", div), + tLi = $("li", ul), + tl = tLi.size(), + v = o.visible, + li, itemLength, curr; + + if (o.circular) { + ul.prepend(tLi.slice(tl - v - 1 + 1).clone()).append(tLi.slice(0, v).clone()); + o.start += v; + } + + // These variables are defined at the top of the function but not set a value immediately + // This is because we need to first check if the carousel is to be 'circular' + li = $("li", ul); + itemLength = li.size(); + curr = o.start; + + // div.css("visibility", "visible"); // NOT SURE WHY WE NEED THIS? THE DIV SHOULD BE VISIBLE ANYWAY!? + + li.css({ + overflow: "hidden", + float: o.vertical ? "none" : "left" + }); + + ul.css({ + margin: "0", + padding: "0", + position: "relative", + "list-style-type": "none", + "z-index": "1" + }); + + div.css({ + overflow: "hidden", + position: "relative", + "z-index": "2", + left: "0px" + }); + + // Full li size(incl margin)-Used for animation + var liSize = o.vertical ? height(li) : width(li); + + // size of full ul(total length, not just for the visible items) + var ulSize = liSize * itemLength; + + // size of entire div(total length for just the visible items) + var divSize = liSize * v; + + li.css({ + overflow: "hidden", + float: o.vertical ? "none" : "left", + width: li.width(), + height: li.height() + }); + + ul.css(sizeCss, ulSize + "px").css(animCss, -(curr * liSize)); + + // Width of the DIV. length of visible images + div.css(sizeCss, divSize + "px"); + + if (o.btnPrev) { + $(o.btnPrev).click(function() { + o.moveForward = false; + return go(curr - o.scroll); + }); + } + + if (o.btnNext) { + $(o.btnNext).click(function() { + o.moveForward = true; + return go(curr + o.scroll); + }); + } + + if (o.btnGo) { + $.each(o.btnGo, function(i, val) { + $(val).click(function() { + return go(o.circular ? o.visible + i : i); + }); + }); + } + + if (o.mouseWheel && div.mousewheel) { + div.mousewheel(function(e, d) { + return d > 0 ? go(curr - o.scroll) : go(curr + o.scroll); + }); + } + + if (o.auto) { + setInterval(function() { + // check if we need to be moving forward or backwards + (o.moveForward) ? go(curr + o.scroll) : go(curr - o.scroll); + }, o.auto + o.speed); + } + + function vis() { + return li.slice(curr).slice(0, v); + } + + function go(to) { + + if (!running) { + + if (o.beforeStart) { + o.beforeStart.call(this, vis()); + } + + // If circular we are in first or last, then goto the other end + if (o.circular) { + + // If first, then goto last + if (to <= o.start - v - 1) { + + ul.css(animCss, -((itemLength - (v * 2)) * liSize) + "px"); + + // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements. + curr = to == o.start - v - 1 ? itemLength - (v * 2) - 1 : itemLength - (v * 2) - o.scroll; + + } + + // If last, then goto first + else if (to >= itemLength - v + 1) { + + ul.css(animCss, -((v) * liSize) + "px"); + + // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements. + curr = to == itemLength - v + 1 ? v + 1 : v + o.scroll; + + } else { + curr = to; + } + + } + + // If non-circular and to points to first or last, we just return + // If neither overrides it, the curr will still be "to" and we can proceed + else { + if (to < 0 || to > itemLength - v) { + return; + } else { + curr = to; + } + } + + running = true; + + ul.animate( + (animCss == "left") ? { + left: -(curr * liSize) + } : { + top: -(curr * liSize) + }, o.speed, o.easing, function() { + if (o.afterEnd) { + o.afterEnd.call(this, vis()); + } + running = false; + } + ); + + // Disable buttons when the carousel reaches the last/first, and enable when not + if (!o.circular) { + $(o.btnPrev + "," + o.btnNext).removeClass("disabled"); + $((curr - o.scroll < 0 && o.btnPrev) || (curr + o.scroll > itemLength - v && o.btnNext) || []).addClass("disabled"); + } + + } + + return false; + } + + }); + + }; + + function css(el, prop) { + return parseInt($.css(el[0], prop)) || 0; + } + + function width(el) { + return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight'); + } + + function height(el) { + return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom'); + } + +}); \ No newline at end of file diff --git a/Assets/Scripts/example-jquery-plugins.js b/Assets/Scripts/example-jquery-plugins.js new file mode 100644 index 0000000..8e310c8 --- /dev/null +++ b/Assets/Scripts/example-jquery-plugins.js @@ -0,0 +1,30 @@ +// For details see: +// http://groups.google.com/group/requirejs/browse_thread/thread/e7532b7e3013bc62/1e5ca8a89b276de6?show_docid=1e5ca8a89b276de6 +require.config({ + paths: { + jquery: 'Utils/jquery' + } +}); + +/* + Instead of using define() to wrap our code, in this (our 'main' file) we use require(). + + The require() function is similar, in that you pass it an optional array of dependencies, + and a function which will be executed when those dependencies are resolved. + However this code is not stored as a named module, as its purpose is to be run immediately. +*/ +require(['Utils/jquery.carousel'], function(){ + + $('#carousel').jCarouselLite({ + auto: 2000, // move every two seconds + speed: 1000, // complete the animation in one second + visible: 5, // there are eight items in total but only display five + beforeStart: function(item) { + console.log('beforeStart', item); + }, + afterEnd: function(item) { + console.log('afterEnd', item); + } + }); + +}); \ No newline at end of file diff --git a/JSON-P.php b/JSON-P.php new file mode 100644 index 0000000..61e2623 --- /dev/null +++ b/JSON-P.php @@ -0,0 +1,17 @@ + \ No newline at end of file diff --git a/example-jquery-plugins.html b/example-jquery-plugins.html new file mode 100644 index 0000000..69f929a --- /dev/null +++ b/example-jquery-plugins.html @@ -0,0 +1,29 @@ + + + + + Require Js + + +

RequireJs and jQuery Plugins

+ + + + + + +