SHOW:
|
|
- or go back to the newest paste.
1 | (function ($) { | |
2 | $.fn.liquidcarousel = function (options) { | |
3 | ||
4 | var defaults = { | |
5 | duration: 10000 | |
6 | }; | |
7 | var options = $.extend(defaults, options); | |
8 | ||
9 | return this.each(function () { | |
10 | var divobj = $(this); | |
11 | ||
12 | $(divobj).css('overflow', 'hidden'); | |
13 | ||
14 | $('> .wrapper', divobj).css('overflow', 'hidden'); | |
15 | $('> .wrapper', divobj).css('float', 'left'); | |
16 | ||
17 | $('> .wrapper > ul', divobj).css('float', 'left'); | |
18 | $('> .wrapper > ul', divobj).css('margin', '0'); | |
19 | $('> .wrapper > ul', divobj).css('padding', '0'); | |
20 | $('> .wrapper > ul', divobj).css('display', 'block'); | |
21 | ||
22 | $('> .wrapper > ul > li', divobj).css('display', 'block'); | |
23 | $('> .wrapper > ul > li', divobj).css('float', 'left'); | |
24 | ||
25 | var visiblelis = 0; | |
26 | var totallis = $('> .wrapper > ul > li', this).length; | |
27 | var currentposition = 0; | |
28 | var additionalmargin = 0; | |
29 | var totalwidth = 0; | |
30 | ||
31 | $(window).resize(function (e) { | |
32 | var divwidth = $(divobj).width(); | |
33 | var availablewidth = divwidth; | |
34 | ||
35 | var heighest = 0; | |
36 | $('> .wrapper > ul > li', divobj).css("height", "auto"); | |
37 | $('> .wrapper > ul > li', divobj).each(function () { | |
38 | if ($(this).outerHeight() > heighest) { | |
39 | heighest = $(this).outerHeight(); | |
40 | } | |
41 | }); | |
42 | ||
43 | $(divobj).height(heighest); | |
44 | $('> .wrapper', divobj).height(heighest); | |
45 | $('> .wrapper > ul', divobj).height(heighest); | |
46 | $('> .wrapper > ul > li', divobj).height(heighest); | |
47 | ||
48 | var liwidth = $('> .wrapper > ul > li:first', divobj).outerWidth(true); | |
49 | var originalmarginright = parseInt($('> .wrapper > ul > li', divobj).css('marginRight')); | |
50 | var originalmarginleft = parseInt($('> .wrapper > ul > li', divobj).css('marginLeft')); | |
51 | totalwidth = liwidth + additionalmargin; | |
52 | ||
53 | previousvisiblelis = visiblelis; | |
54 | visiblelis = Math.floor((availablewidth / liwidth)); | |
55 | ||
56 | if (visiblelis < totallis) { | |
57 | additionalmargin = Math.floor((availablewidth - (visiblelis * liwidth)) / visiblelis); | |
58 | } else { | |
59 | additionalmargin = Math.floor((availablewidth - (totallis * liwidth)) / totallis); | |
60 | } | |
61 | halfadditionalmargin = Math.floor(additionalmargin / 2); | |
62 | totalwidth = liwidth + additionalmargin; | |
63 | ||
64 | if (visiblelis > previousvisiblelis || totallis <= visiblelis) { | |
65 | currentposition -= (visiblelis - previousvisiblelis); | |
66 | if (currentposition < 0 || totallis <= visiblelis) { | |
67 | currentposition = 0; | |
68 | } | |
69 | } | |
70 | $('> .wrapper > ul', divobj).css('marginLeft', -(currentposition * totalwidth)); | |
71 | ||
72 | if (visiblelis >= totallis || ((divwidth >= (totallis * liwidth)) && options.hidearrows)) { | |
73 | if (options.hidearrows) { | |
74 | $('> .prev', $(divobj).parents(".widget")).hide(); | |
75 | $('> .next', $(divobj).parents(".widget")).hide(); | |
76 | ||
77 | additionalmargin = Math.floor((divwidth - (totallis * liwidth)) / totallis); | |
78 | halfadditionalmargin = Math.floor(additionalmargin / 2); | |
79 | totalwidth = liwidth + additionalmargin; | |
80 | $('> .wrapper > ul > li', divobj).css('marginRight', originalmarginright + halfadditionalmargin); | |
81 | $('> .wrapper > ul > li', divobj).css('marginLeft', originalmarginleft + halfadditionalmargin); | |
82 | } | |
83 | $('> .wrapper', divobj).width(totallis * totalwidth); | |
84 | $('> ul', divobj).width(totallis * totalwidth); | |
85 | $('> .wrapper', divobj).css('marginLeft', 0); | |
86 | currentposition = 0; | |
87 | } else { | |
88 | $('.prev', $(divobj).parents(".widget")).show(); | |
89 | $('.next', $(divobj).parents(".widget")).show(); | |
90 | $('> .wrapper', divobj).width(visiblelis * totalwidth); | |
91 | $('> ul', divobj).width(visiblelis * totalwidth); | |
92 | } | |
93 | }); | |
94 | ||
95 | $('.next', $(divobj).parents(".widget")).click(function () { | |
96 | if (totallis <= visiblelis) { | |
97 | currentposition = 0; | |
98 | } else if ((currentposition + (visiblelis * 2)) < totallis) { | |
99 | currentposition += visiblelis; | |
100 | } else if ((currentposition + (visiblelis * 2)) >= totallis - 1) { | |
101 | currentposition = totallis - visiblelis; | |
102 | } | |
103 | $('> .wrapper > ul', divobj).stop(); | |
104 | $('> .wrapper > ul', divobj).animate({ | |
105 | 'marginLeft': -(currentposition * totalwidth) | |
106 | }, options.duration); | |
107 | }); | |
108 | ||
109 | // Begin looping simulated click on .next | |
110 | (function (obj, waitFor) { // wrap to catch variables | |
111 | var repeatAction = function repeatAction() { // function to be given timeout (stored in variable | |
112 | obj.each(function (idx, elm) { // and named so it can reference itself; makes life easier); | |
113 | var ev = document.createEvent("MouseEvents"); | |
114 | ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null); | |
115 | elm.dispatchEvent(ev); | |
116 | }); | |
117 | window.setTimeout(repeatAction, waitFor); // re-invocation of itself | |
118 | }; | |
119 | window.setTimeout(repeatAction, waitFor); // initial invocation | |
120 | - | }($('.next', $(divobj).parents(".widget")), 3000); |
120 | + | }($('.next', $(divobj).parents(".widget")), 3000)); |
121 | // End simulated click on .next | |
122 | ||
123 | $('.prev', $(divobj).parents(".widget")).click(function () { | |
124 | if ((currentposition - visiblelis) > 0) { | |
125 | currentposition -= visiblelis; | |
126 | } else if ((currentposition - (visiblelis * 2)) <= 0) { | |
127 | currentposition = 0; | |
128 | } | |
129 | $('> .wrapper > ul', divobj).stop(); | |
130 | $('> .wrapper > ul', divobj).animate({ | |
131 | 'marginLeft': -(currentposition * totalwidth) | |
132 | }, options.duration); | |
133 | }); | |
134 | ||
135 | $('.next', $(divobj).parents(".widget")).dblclick(function (e) { | |
136 | e.preventDefault(); | |
137 | clearSelection(); | |
138 | }); | |
139 | ||
140 | $('.prev', $(divobj).parents(".widget")).dblclick(function (e) { | |
141 | e.preventDefault(); | |
142 | clearSelection(); | |
143 | }); | |
144 | ||
145 | function clearSelection() { | |
146 | if (document.selection && document.selection.empty) { | |
147 | document.selection.empty(); | |
148 | } else if (window.getSelection) { | |
149 | var sel = window.getSelection(); | |
150 | sel.removeAllRanges(); | |
151 | } | |
152 | } | |
153 | ||
154 | $(window).resize(); | |
155 | }); | |
156 | }; | |
157 | }(jQuery)); |