https://www.hangeul.go.kr/js/user/jquery.ulslide.js

1/**
2 * When I noticed the growing popularity of JS-Slide and JS-Fade effects I have
3 * decide to develop a plugin for jQuery. This plugin will help you to add thise
4 * effects to the site in more simple way.
5 * Note: If the mousewheel plugin has been included on the page then the slider will
6 * also respond to the mouse wheel.
7 *
8 * @name jQuery ulSlide plugin
9 * @license GPL
10 * @version 1.39
11 * @date September 17, 2010
12 * @category jQuery plugin
13 * @author Kotelnitskiy Evgeniy ([email protected])
14 * @copyright (c) 2010 Kotelnitskiy Evgeniy (http://4coder.info/en/)
15 * @example Visit http://4coder.info/en/jquery-ulslide-2/ for more informations about this jQuery plugin
16 */
17ulslide_last_id = 0;
18(function($) {
19    jQuery.fn.ulslide = function(settings) {
20        var thisObj = this;
21        if (thisObj.length == 0) return false;
22        var thisEl = thisObj[0];
23        if (! jQuery(thisEl).attr('id')) {
24            ulslide_last_id ++;
25            jQuery(thisEl).attr('id', 'ulslide-' + ulslide_last_id);
26        }
27        var id = jQuery(thisEl).attr('id');
28
29        // Settings
30        settings = jQuery.extend({
31            axis: 'x', // x, y
32            direction: 'f', // f, b
33            affect: 'slide', // slide, fade
34            duration: 600,
35            width: thisObj.width(),
36            height: 'auto', // auto
37            statusbar: false,
38            padding: 20,
39            lionpage: 1,
40            autoslide: false,
41            current: 0,
42            bnext: false,
43            bprev: false,
44            navigator: false,
45            print_current: false,
46            mousewheel: false,
47            onAnimate: function(settings, thisEl){}
48        },settings);
49
50
51        settings['prev'] = settings['current'];
52        settings['count'] = jQuery('> li', thisObj).length;
53        jQuery('> li', thisObj).each(function(i){
54            var liel = jQuery(this);
55            liel.addClass('slide-node slide-node-'+i);
56            liel.css("position", 'absolute');
57            liel.css("margin", '0');
58            liel.css("padding", '0');
59            liel.css("width", settings['width']);
60            liel.css("overflow", "hidden");
61            if (i == settings['current']){
62                liel.css("top", '0');
63                liel.css("left", '0');
64            }
65            else{
66                liel.css("top", '0');
67                liel.css("left", -(settings['width'] + settings['padding']));
68            }
69        });
70
71        thisObj.css("list-style", "none");
72        thisObj.css("padding", "0");
73        thisObj.css("position", "relative");
74        thisObj.css("overflow", "hidden");
75        thisObj.css("width", settings['width']);
76        if (settings['height'] == 'auto'){
77            thisObj.css("height", jQuery('> li:eq('+settings['current']+')', thisObj).height());
78        }
79        else thisObj.css("height", settings['height']);
80        settings['prevHeight'] = settings['height'];
81
82        // statusbar
83        if (settings['statusbar']){
84            settings['img_count'] = this.find('img').length;
85            if (settings['img_count']){
86                thisObj.append('<li class="ulslide-statusbar" id="'+id+'-statusbar" style="position: absolute; padding:0; margin:0; width:'+settings['width']+'px; height:'+thisObj.css("height")+'; "><span>Loading...</span></li>');
87            }
88            settings['img_loaded'] = 0;
89            this.find('img').each(function(){
90                if (this.complete) {
91                    settings['img_loaded'] ++;
92                }
93                else {
94                    jQuery(this).load(function(){
95                        settings['img_loaded'] ++;
96                        //alert(settings['img_loaded'] + ' of ' + settings['img_count']);
97                        //jQuery('#'+id+'-statusbar').html('Loading... (' + settings['img_loaded'] + ' of ' + settings['img_count'] + ')');
98                        jQuery('#'+id+'-statusbar').html('Loading...');
99                        if (settings['img_loaded'] == settings['img_count']){
100                            jQuery('#'+id+'-statusbar').remove();
101                            thisEl.ready = true;
102                        }
103                    });
104                }
105                //alert(settings['img_loaded'] + ' of ' + settings['img_count']);
106                //jQuery('#'+id+'-statusbar').html('Loading... (' + settings['img_loaded'] + ' of ' + settings['img_count'] + ')');
107                jQuery('#'+id+'-statusbar').html('Loading...');
108                if (settings['img_loaded'] == settings['img_count']){
109                    jQuery('#'+id+'-statusbar').remove();
110                    thisEl.ready = true;
111                }
112            });
113        }
114
115
116        function getSlide(num) {
117            return jQuery('> li:eq('+num+')', thisObj);
118        }
119		
120        function next() {
121            settings['direction'] = 'f';
122            var c = thisEl.uslCurrent();
123            if (c + 1 < settings['count']) {
124                thisEl.uslCurrent(c + 1);
125            } else {
126                thisEl.uslCurrent(0);
127            }
128            thisEl.uslRefresh();

129        }
130		
131        function prev() {
132            settings['direction'] = 'b';
133            var c = thisEl.uslCurrent();
134            if (c > 0) {
135                thisEl.uslCurrent(c - 1);
136            } else {
137                thisEl.uslCurrent(settings['count'] - 1);
138            }
139            thisEl.uslRefresh();
140        }
141
142        if (settings['height'] == 'auto')
143            thisEl.currentHeight = getSlide(settings['current']).height();
144        else thisEl.currentHeight = settings['height'];
145
146        thisEl.uslCurrent = function(new_value){
147            if (new_value == undefined){
148                return settings['current'];
149            }
150            else{
151                settings['current'] = new_value;
152                return new_value;
153            }
154        }
155
156        thisEl.autoslideNext = function(){
157            if (settings['current'] < settings['count'] - 1) settings['current'] ++;
158            else settings['current'] = 0;
159            this.uslRefresh();
160        };
161
162        thisEl.initAutoslide = function(){
163            if (settings['TimeoutID']) clearTimeout(settings['TimeoutID']);
164            settings['TimeoutID'] = setTimeout("jQuery('#"+jQuery(thisEl).attr('id')+"')[0].autoslideNext()", settings['autoslide']);
165        };
166
167        thisEl.clearAutoslide = function(){
168            if (settings['TimeoutID']) {
169                clearTimeout(settings['TimeoutID']);
170            }
171        };
172
173        thisEl.uslRefresh = function(){
174            if (! thisEl.ready) {
175                setTimeout("jQuery('#"+jQuery(thisEl).attr('id')+"')[0].uslRefresh()", 200);
176                return;
177            }
178            thisEl.ready = false;
179
180            thisEl.clearAutoslide();
181            var prev = getSlide(settings['prev']);
182            var current = getSlide(settings['current']);
183
184            if (settings['height'] == 'auto') {
185                thisEl.currentHeight = getSlide(settings['current']).height();
186                settings['prevHeight'] = getSlide(settings['prev']).height();
187            }
188
189            if (settings['affect'] == 'slide'){
190                if (settings['axis'] == 'x'){
191                    if (settings['prev'] != settings['current']){
192                        if (settings['direction'] == 'f'){
193                            prev.animate({
194                                'left': -(settings['width'] + settings['padding'])
195                                }, settings['duration']);
196                            current.css('left', settings['width'] + settings['padding']);
197                        }
198                        else{
199                            prev.animate({
200                                'left': settings['width'] + settings['padding']
201                                }, settings['duration']);
202                            current.css('left', -(settings['width'] + settings['padding']));
203                        }
204                    }
205                    current.animate({
206                        'left': 0
207                    }, settings['duration'], function(){
208                        thisEl.ready = true;
209                    });
210                }
211                else {
212                    if (settings['prev'] != settings['current']){
213                        if (settings['direction'] == 'f'){
214                            prev.animate({
215                                'top': thisEl.currentHeight + settings['padding']
216                                }, settings['duration'], function(){
217                                prev.css('left', -(settings['width'] + settings['padding']));
218                            });
219                            current.css('top', -(settings['prevHeight'] + settings['padding']));
220                        }
221                        else{
222                            prev.animate({
223                                'top': -(thisEl.currentHeight + settings['padding'])
224                                }, settings['duration'], function(){
225                                prev.css('left', -(settings['width'] + settings['padding']));
226                            });
227                            current.css('top', settings['prevHeight'] + settings['padding']);
228                        }
229                    }
230                    current.css('left', 0);
231                    current.animate({
232                        'top': 0
233                    }, settings['duration'], function(){
234                        thisEl.ready = true;
235                    });
236                }
237            }
238            else if (settings['affect'] == 'fade'){
239                if (settings['prev'] != settings['current']){
240                    current.css('display', 'none');
241                    current.css('z-index', 2);
242                    current.css('left', 0);
243                    current.css('top', 0);
244                    prev.css('z-index', 1);
245                    prev.fadeOut(settings['duration'], function(){
246                        prev.css('display', 'none');
247                        current.fadeIn(settings['duration'], function(){
248                            thisEl.ready = true;
249                        });
250                    });
251                }
252                else thisEl.ready = true;
253            }
254
255            if (settings['height'] == 'auto') {
256                thisObj.animate({
257                    'height': thisEl.currentHeight
258                    }, settings['duration']);
259            }
260
261            if (settings['print_current']) {

262                jQuery(settings['print_current']).html(settings['current'] + 1);
263            }
264
265            settings['prev'] = settings['current'];
266            if (settings['autoslide']) thisEl.initAutoslide();
267            settings['onAnimate'](settings, thisEl);
268            thisEl.uslRefreshClasses();
269            //settings['affect'] = (settings['affect'] == 'slide') ? 'fade' : 'slide'; // slide, fade
270        };
271
272        thisEl.uslRefreshClasses = function(){
273            if (settings['count'] > 1){
274                if (settings['bnext']) jQuery(settings['bnext']).addClass('active');
275                if (settings['bprev']) jQuery(settings['bprev']).addClass('active');
276            }
277            if (settings['navigator']){
278                jQuery(settings['navigator']).removeClass('usl-current');
279                jQuery(settings['navigator'] + '.usl-navigator-'+thisEl.uslCurrent()).addClass('usl-current');
280                jQuery(settings['navigator']).parent().removeClass('usl-current-parent');
281                jQuery(settings['navigator'] + '.usl-navigator-'+thisEl.uslCurrent()).parent().addClass('usl-current-parent');
282            }
283        };
284
285        if (settings['bnext']){
286            $(settings['bnext']).click(function(){
287                next();
288                return false;
289            });
290        }
291		
292        if (settings['bprev']){
293            $(settings['bprev']).click(function(){
294                prev();
295                return false;
296            });
297        }
298
299        if (settings['navigator']){
300            var navigator = jQuery(settings['navigator']);
301            navigator.each(function(index){
302                this.usl_navigator_index = index;
303                jQuery(this).addClass('usl-navigator-' + index);
304            });
305			
306            navigator.click(function(){
307                var c = this.usl_navigator_index;
308                if ((c < settings['count']) && (c != thisEl.uslCurrent())) {
309                    if (c > thisEl.uslCurrent()) settings['direction'] = 'f';
310                    else settings['direction'] = 'b';
311                    thisEl.uslCurrent(c);
312                    thisEl.uslRefresh();
313                }
314                return false;
315            });
316        }
317
318        /*
319         * If the mousewheel plugin has been included on the page then
320         * the slider will also respond to the mouse wheel.
321         */
322        if (settings['mousewheel']) {
323            thisObj.bind(
324                'mousewheel',
325                function (event, delta) {
326                    if (thisEl.ready) {
327                        if (delta < 0) {
328                            next();
329                        }
330                        else {
331                            prev();
332                        }
333                    }
334                    return false;
335                }
336                );
337        }
338
339        if (! settings['statusbar']) thisEl.ready = true;
340        thisEl.uslRefresh();
341
342    };
343})(jQuery);