https://www.sportsschool.edu.sg/skin/qql/happenings/slider/scripts.src.js

1$(function(){
2 slider.init();
3});
4
5var slider={
6 num:-1,
7 current:0,
8 //cr:[]
9 autoLoop:null,
10 sliderWidth:685,
11 thumbWidth:80+4+10,//imgwidth+border+marginright
12 animSpeed:0.5*1000,
13 pauseTime:5*1000,
14 autoRepeat:true,
15 navType:'thumb', //thumb, nothumb
16 navEach:3,
17 navCurrent:1,
18 effect:"slide",
19 pauseOnOver:false,
20
21 //init function
22 init:function(){
23  if(!$('#slide-runner').children())
24   return false;
25
26  slider.num=$('#slide-runner').children().length;
27
28  //disable nav next button
29  if(slider.num<=slider.navEach){
30    $('#slide-nav-next').addClass("off");
31  }
32  //set navigation bar width
33  var navWidth = slider.thumbWidth*slider.navEach-5;
34  var navCount = Math.ceil(slider.num/slider.navEach);
35  if(slider.navType=="thumb"){
36		$('#slide-nav').width(navWidth);
37  }
38  
39  for(var i=0;i<slider.num;i++){   
40	 if (slider.effect=='slide') {
41	 	$('#slide-runner img#slide-img-'+(i+1)).css({left:((i)*slider.sliderWidth)});
42   }
43
44	 if(slider.navType=="thumb"){
45		var thumbnail = '<img id="slide-thumb-'+i+'" class="thumb" src="'+$('#slide-runner img#slide-img-'+(i+1)).attr("src")+'">';
46   }else { var thumbnail = '&nbsp;'; } 
47
48   $('#slide-nav').append('<a aria-label="'+(i+1)+'" ref="'+(i+1)+'" id="slide-link-'+(i+1)+'" href="#">' + thumbnail + '</a>');
49    if(slider.navType=="thumb") {
50      $('#slide-thumb-'+i).css({left:((i)*slider.thumbWidth)});
51    }
52  }
53  
54	$("#slide-nav > A").on("mouseover",function(){
55		slider.slide($(this).attr("ref"));
56	}).on("focus",function(){
57		$(this).blur();
58	});
59	
60	if (slider.pauseOnOver) {
61	  $("#slide-runner").hover(function() {
62				$(this).addClass("paused");
63			}, function() {
64				$(this).removeClass("paused");
65			});
66	}
67  
68	$('#slide-nav-prev').click(function(){slider.navPrev();});
69  $('#slide-nav-next').click(function(){slider.navNext();});
70  
71  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
72  
73  if (slider.effect!='slide') {
74    $('#slide-runner IMG').hide();
75    $('#slide-runner IMG:first').show();
76    $('#slide-runner IMG:first').addClass("active");
77  }
78  
79  // slider.text(1);
80  slider.on(1);
81  slider.current=1;
82  slider.autoLoop=window.setTimeout(function(){ slider.auto(); },slider.pauseTime);
83 },
84 
85 //auto loop
86 auto:function(){
87  if(!slider.autoRepeat)
88   return false;
89
90  var next=slider.current+1;
91  if(next>slider.num) next=1;
92  slider.slide(next);
93 },
94 
95 //main function
96 slide:function(pos){
97	if(pos<1 || pos>slider.num || pos==slider.current)
98   return;
99
100  if (!$("#slide-runner").hasClass("paused")) {
101  if (slider.effect=="slide") {
102    var navWidth = slider.thumbWidth*slider.navEach-5;
103    var navCount = Math.ceil(slider.num/slider.navEach);
104    
105    for(var i=0;i<slider.num;i++)
106     $('#slide-runner img#slide-img-'+(i+1)).stop().animate({left:((i-pos+1)*slider.sliderWidth)},slider.animSpeed);
107    
108    if(pos==1)
109    {  slider.navReset(navWidth); }
110    else {
111      if(((pos)%slider.navEach)==1 || slider.navEach==1)
112      {
113        for(var i=0;i<slider.num;i++){
114          $('#slide-nav img#slide-thumb-'+(i+1)).stop().animate({left:-slider.navCurrent*(navWidth+5)+i*slider.thumbWidth},slider.animSpeed);
115        }
116        
117        slider.navCurrent+=1;
118        
119        if(slider.navCurrent==navCount)
120          $('#slide-nav-next').addClass("off");              
121      }
122    }
123	} else {
124    var $active = $('#slide-runner IMG.active');
125    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
126
127    var $next =  $("#slide-img-"+pos);
128    $active.addClass("last-active");
129
130    $next.css("opacity",0).css("display","block")
131      .addClass('active')
132      .animate({"opacity": 1.0}, slider.animSpeed, function() {
133        $active.removeClass('active last-active');
134      });    
135  }
136  
137  slider.on(pos);
138  // slider.text(pos);
139  slider.contentSwitch(pos);
140  slider.current=pos;
141  }
142
143  window.clearTimeout(slider.autoLoop);
144  slider.autoLoop=window.setTimeout(function(){ slider.auto(); },slider.pauseTime);   
145 },
146 
147 //highlight thumbnail in navigation
148 on:function(pos){
149  $('#slide-nav a').removeClass('on');
150  $('#slide-nav a#slide-link-'+pos).addClass('on');
151  if(slider.navType=="thumb"){
152  $('#slide-nav img.thumb').removeClass('on');
153  $('#slide-nav img#slide-thumb-'+pos).addClass('on');
154  }
155 },
156 
157 //choose text
158 text:function(pos){
159  var title = $('#slide-content-holder #slide-content-'+(pos)+' .slide-content-title').text();
160
161  //if title has ":" , break to two lines
162  if(title.search(":")!='-1'){
163	  breakpoint = title.search(":");
164
165	  firstLine = title.slice(0,breakpoint+1);
166	  secondLine = title.slice(breakpoint+1);
167
168	  //add class to existing span, create second span
169	  $('#slide-client').html("<div class='first'></div><div class='second'></div>");
170
171	  slider.ticker('#slide-client div.first',firstLine,0);
172	  //slider.ticker('#slide-client div.second',secondLine,0);
173	  window.setTimeout(function(){ slider.ticker("#slide-client div.second",secondLine, 0); },(breakpoint+5)*30);
174  }
175  else {
176	  $('#slide-client').html("<span></span>");
177	  slider.ticker('#slide-client span',title,0);
178  }
179 },
180 
181 //ticker effect for title
182 ticker:function(el,text,pos,unique){
183
184  ctext=text.substring(0,pos)+(pos%2?'-':'_');
185  $(el).html(ctext);
186
187  if(pos==text.length)
188   $(el).html(text);
189  else
190   window.setTimeout(function(){ slider.ticker(el,text,pos); },30);
191 },
192 
193 //slide description fade in effect
194 contentSwitch:function(pos){
195	var $all = $('#slide-content-holder .slide-content');
196	var $active = $('#slide-content-holder #slide-content-'+(pos));
197
198	$all.removeClass("active").hide();	
199	$active.fadeIn(slider.animSpeed).addClass("active");  
200 },
201 
202 //navigation bar reset
203 navReset:function(navWidth){
204	if(slider.navCurrent==1)
205	return false;

206	
207	for(var i=0;i<slider.num;i++){
208		$('#slide-nav img#slide-thumb-'+(i+1)).stop().animate({left:i*slider.thumbWidth},slider.animSpeed);
209	}
210    if(slider.num>slider.navEach)
211		$('#slide-nav-next').removeClass("off");
212	
213	slider.navCurrent=1;
214	$('#slide-nav-prev').addClass("off");
215 },
216 
217 //navigation bar prev buttion click
218 navPrev:function(){
219   var prev=slider.current-1;
220   if(prev<1) prev=slider.num;
221   slider.slide(prev);
222 },
223 
224 //navigation bar next buttion click
225 navNext:function(){
226   var next=slider.current+1;
227 	 if(next>slider.num) next=1;
228	 slider.slide(next); 
229 }
230 
231};
232// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
233
234/*
235if(!window.SI){var SI={};};
236SI.Files={
237 htmlClass:'SI-FILES-STYLIZED',
238 fileClass:'file',
239 wrapClass:'cabinet',
240 
241 fini:false,
242 able:false,
243 init:function(){
244  this.fini=true;
245 },
246 stylize:function(elem){
247  if(!this.fini){this.init();};
248  if(!this.able){return;};
249  
250  elem.parentNode.file=elem;
251  elem.parentNode.onmousemove=function(e){
252   if(typeof e=='undefined') e=window.event;
253   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
254    e.pageX=e.clientX+document.documentElement.scrollLeft;
255    e.pageY=e.clientY+document.documentElement.scrollTop;
256   };
257   var ox=oy=0;
258   var elem=this;
259   if(elem.offsetParent){
260    ox=elem.offsetLeft;
261    oy=elem.offsetTop;
262    while(elem=elem.offsetParent){
263     ox+=elem.offsetLeft;
264     oy+=elem.offsetTop;
265    };
266   };
267  };
268 },
269 stylizeAll:function(){
270  if(!this.fini){this.init();};
271  if(!this.able){return;};
272 }
273};*/