http://hairsalon.com.tw/new/scripts/banner-slider/js/sangarSlider/sangarSetupNavigation.js

1var sangarSetupNavigation;
2
3;(function($) {
4
5    sangarSetupNavigation = function(base, opt) {
6
7        var btnTop;
8
9    	/**
10         * Function: setupDirectionalNav
11         */
12        this.setupDirectionalNav = function()
13        {
14            if (opt.directionalNav != 'none') 
15            {
16                if (opt.directionalNav == "false") {
17                    return false;
18                }
19                
20                if(opt.animation == "vertical-slide")
21                {
22                    var arrow_right = 'down';
23                    var arrow_left = 'up';                    
24                }
25                else
26                {
27                    var arrow_right = 'right';
28                    var arrow_left = 'left';                    
29                }
30
31                var directionalNavHTML = '<div class="sangar-slider-nav"><span class="sangar-arrow-' + arrow_right + '"></span><span class="sangar-arrow-' + arrow_left + '"></span></div>';
32                base.$sangarWrapper.append(directionalNavHTML);
33                var leftBtn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span.sangar-arrow-' + arrow_left),
34                    rightBtn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span.sangar-arrow-' + arrow_right);
35                leftBtn.click(function () {
36                    base.stopSliderLock();
37                    base.shift("prev", true);
38                });
39                rightBtn.click(function () {
40                    base.stopSliderLock();
41                    base.shift("next", true)
42                });
43
44                /** 
45                 * autohide behaviour
46                 */
47                if(opt.directionalNav == 'autohide')
48                {
49                    var btn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span');
50                    var btnAnimateSpeed = 300;
51
52                    btn.css("opacity", opt.directionalNavHideOpacity);
53
54                    base.$sangarWrapper.mouseenter(function(){
55                        btn.animate({
56                            "opacity": opt.directionalNavShowOpacity
57                        }, btnAnimateSpeed);
58                    });
59                    base.$sangarWrapper.mouseleave(function(){
60                        btn.animate({
61                            "opacity": opt.directionalNavHideOpacity
62                        }, btnAnimateSpeed);
63                    });
64                }
65            }
66        }
67
68        /**
69         * Function: showAllSlideNav
70         */
71        this.showAllSlideNav = function()
72        {
73            var btn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span');
74            var wrapperWidth = base.$sangarWrapper.width();
75            var navWidth = (wrapperWidth - base.sangarWidth) / 2;
76
77            var slideWidth = base.sangarWidth;
78            var containerWidth = base.$el.outerWidth(true);
79            var diffWidth = containerWidth - slideWidth;
80            
81            if(diffWidth > 100)
82            {
83                btn.css({
84                    'top': '0px',
85                    'margin-top': '0px',
86                    'background': 'none',
87                    'width': navWidth + 'px',
88                    'height': base.sangarHeight + 'px'
89                });
90            }
91            else
92            {
93                btn.css({
94                    'top': btnTop,
95                    'margin-top': '',
96                    'background': '',
97                    'width': '',
98                    'height': ''
99                });
100            }
101        }
102
103        /**
104         * Function: setNavPosition
105         */
106        this.setNavPosition = function()
107        {
108            var btn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span');
109
110            if(opt.animation == "vertical-slide")
111            {
112                var downBtn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span.sangar-arrow-down');
113                var downBtnBottom = downBtn.css('bottom').slice(0,-2);
114
115                if(opt.pagination == 'bullet')
116                {                    
117                    var bullet = base.$pagination.parent();
118                    var bulletBottom = bullet.css('bottom').slice(0,-2);
119                    var bottom = parseInt(bullet.outerHeight()) + parseInt(bulletBottom) + parseInt(downBtnBottom);
120                }
121                else if(opt.pagination == 'content-horizontal')
122                {
123                    var pagination = base.$pagination
124                    var bottom = parseInt(pagination.outerHeight()) + parseInt(downBtnBottom);
125                }                
126
127                // down nav arrow
128                downBtn.css('bottom', bottom + 'px');
129                btn.css('left', ((base.sangarWidth / 2) - (btn.width() / 2)) + 'px');
130            }
131            else
132            {
133                var downRight = base.$sangarWrapper.children('div.sangar-slider-nav').children('span.sangar-arrow-right');
134
135                // pagination content-vertical
136                if(opt.pagination == 'content-vertical')
137                {
138                    downRight.css({
139                        'right': opt.paginationContentWidth + 'px'
140                    })
141                }
142
143                btnTop = ((base.origHeight / 2) - (btn.height() / 2)) + 'px';
144
145                btn.css({
146                    'top': btnTop
147                })
148            }
149        }
150    }
151
152})(jQuery);