http://sharkia.gov.eg/JS_2017/hot/reelslideshow.js

1/* Continuous Reel Slideshow
2* Created: Aug 18th, 2010 by DynamicDrive.com. This notice must stay intact for usage 
3* Author: Dynamic Drive at http://www.dynamicdrive.com/
4* Visit http://www.dynamicdrive.com/ for full source code
5*/
6// June 7th, 14: Updated to v1.1, which adds swipe navigation in mobile devices. Uses the TouchSwipe plugin (jquery.touchSwipe.min.js).
7
8jQuery.noConflict()
9
10function reelslideshow(options){
11	var $=jQuery
12	this.setting={displaymode:{type:'auto', pause:2000, cycles:2, pauseonmouseover:true}, orientation:'h', persist:true, slideduration:500} //default settings
13	jQuery.extend(this.setting, options) //merge default settings with options
14	var curslide=(this.setting.persist)? reelslideshow.routines.getCookie("slider-"+this.setting.wrapperid) : 0
15	this.curslide=(curslide==null || curslide>this.setting.imagearray.length-1)? 0 : parseInt(curslide) //make sure curslide index is within bounds
16	this.curstep=0
17	this.zIndex=1
18	this.animation_isrunning=false //variable to indicate whether an image is currently being slided in
19	this.posprop=(this.setting.orientation=="h")? "left" : "top"
20	options=null
21	var slideshow=this, setting=this.setting, preloadimages=[], slidesHTML=''
22	for (var i=0; i<setting.imagearray.length; i++){ //preload images
23		preloadimages[i]=new Image()
24		preloadimages[i].src=setting.imagearray[i][0]
25		slidesHTML+=reelslideshow.routines.getSlideHTML(setting.imagearray[i], setting.dimensions[0]+'px', setting.dimensions[1]+'px', this.posprop)+'\n'
26	}
27	jQuery(function($){ //on document.ready
28		slideshow.init($, slidesHTML)
29	})
30	$(window).bind('unload', function(){ //on window onload
31		if (slideshow.setting.persist) //remember last shown slide's index?
32			reelslideshow.routines.setCookie("slider-"+setting.wrapperid, slideshow.curslide)
33	})
34}
35
36reelslideshow.prototype={
37
38	slide:function(nextslide, dir){ //possible values for dir: "left", "right", "top", or "down"
39		if (this.curslide==nextslide)
40			return
41		var slider=this
42		var nextslide_initialpos=this.setting.dimensions[(dir=="right"||dir=="left")? 0 : 1] * ((dir=="right"||dir=="down")? -1 : 1)
43		var curslide_finalpos=-nextslide_initialpos
44		var posprop=this.posprop
45		if (this.animation_isrunning!=null)
46			this.animation_isrunning=true //indicate animation is running
47		this.$imageslides.eq(dir=="left"||dir=="top"? nextslide : this.curslide).css("zIndex", ++this.zIndex) //increase zIndex of upcoming slide so it overlaps outgoing
48		this.$imageslides.eq(nextslide).css(reelslideshow.routines.createobj(['visibility', 'visible'], [posprop, nextslide_initialpos])) //show upcoming slide
49			.animate(reelslideshow.routines.createobj([posprop, 0]), this.setting.slideduration, function(){slider.animation_isrunning=false})
50		this.$imageslides.eq(this.curslide).animate(reelslideshow.routines.createobj([posprop, curslide_finalpos]), this.setting.slideduration, function(){jQuery(this).css("visibility", "hidden")}) //hide outgoing slide
51		this.curslide=nextslide
52	},
53
54	navigate:function(keyword){ //keyword: "back" or "forth"
55		clearTimeout(this.rotatetimer)
56		var dir=(keyword=="back")? (this.setting.orientation=="h"? "right" : "down") : (this.setting.orientation=="h"? "left" : "up")
57		var targetslide=(keyword=="back")? this.curslide-1 : this.curslide+1
58		targetslide=(targetslide<0)? this.$imageslides.length-1 : (targetslide>this.$imageslides.length-1)? 0 : targetslide //wrap around
59		if (this.animation_isrunning==false)
60			this.slide(targetslide, dir)
61	},
62
63	rotate:function(){
64		var slideshow=this
65		if (this.ismouseover){ //pause slideshow onmouseover
66			this.rotatetimer=setTimeout(function(){slideshow.rotate()}, this.setting.displaymode.pause)
67			return
68		}
69		var nextslide=(this.curslide<this.$imageslides.length-1)? this.curslide+1 : 0
70		this.slide(nextslide, this.posprop) //go to next slide, either to the left or upwards depending on setting.orientation setting
71		if (this.setting.displaymode.cycles==0 || this.curstep<this.maxsteps-1){
72			this.rotatetimer=setTimeout(function(){slideshow.rotate()}, this.setting.displaymode.pause)
73			this.curstep++
74		}
75	},
76
77	init:function($, slidesHTML){
78		var slideshow=this, setting=this.setting
79
80		var swipeOptions={ // swipe object variables
81			triggerOnTouchEnd : true,
82			triggerOnTouchLeave : true,
83			allowPageScroll: setting.orientation == 'h'? "vertical" : "horizontal",
84			swipethreshold: setting.swipethreshold,
85			excludedElements:[]
86		}
87
88		this.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}) //main DIV

89		if (this.$wrapperdiv.length==0){ //if no wrapper DIV found
90			alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
91			return
92		}
93		this.$wrapperdiv.html(slidesHTML)
94		this.$imageslides=this.$wrapperdiv.find('div.slide')
95		this.$imageslides.eq(this.curslide).css(reelslideshow.routines.createobj([this.posprop, 0])) //set current slide's CSS position (either "left" or "top") to 0
96		if (this.setting.displaymode.type=="auto"){ //auto slide mode?
97			this.setting.displaymode.pause+=this.setting.slideduration
98			this.maxsteps=this.setting.displaymode.cycles * this.$imageslides.length
99			if (this.setting.displaymode.pauseonmouseover){
100				this.$wrapperdiv.mouseenter(function(){slideshow.ismouseover=true})
101				this.$wrapperdiv.mouseleave(function(){slideshow.ismouseover=false})
102			}
103			this.rotatetimer=setTimeout(function(){slideshow.rotate()}, this.setting.displaymode.pause)
104		}
105
106		swipeOptions.swipeStatus = function(event, phase, direction, distance){
107			var evtparent = event.target.parentNode
108			if (phase == 'start' && evtparent.tagName == 'A'){ // cancel A action when finger makes contact with element
109				evtparent.onclick = function(){
110					return false
111				}
112			}
113			if (phase == 'cancel' && evtparent.tagName == 'A'){ // if swipe action canceled (so no proper swipe), enable A action
114				evtparent.onclick = function(){
115					return true
116				}
117			}
118			if (phase == 'end'){
119				var navkeyword = /(right)|(down)/i.test(direction)? 'back' : 'forth'
120				if ( (setting.orientation == 'h' && /(left)|(right)/i.test(direction)) || (setting.orientation == 'v' && /(up)|(down)/i.test(direction)) )
121				slideshow.navigate(navkeyword)
122			}
123		}
124
125		if (this.$wrapperdiv.swipe){
126			this.$wrapperdiv.swipe(swipeOptions)
127		}
128
129	}
130
131}
132
133reelslideshow.routines={
134
135	getSlideHTML:function(imgref, w, h, posprop){

136		var posstr=posprop+":"+((posprop=="left")? w : h)
137		var layerHTML=(imgref[1])? '<a href="'+imgref[1]+'" target="'+imgref[2]+'">' : '' //hyperlink slide?
138		layerHTML+='<img src="'+imgref[0]+'" style="border-width:0;" />'
139		layerHTML+=(imgref[1])? '</a>' : ''
140		return '<div class="slide" style="position:absolute;'+posstr+';width:'+w+';height:'+h+';text-align:center;">'
141			+'<div style="width:'+w+';height:'+h+';display:table-cell;vertical-align:middle;">'
142			+layerHTML
143			+'</div></div>' //return HTML for this layer
144	},
145
146
147	getCookie:function(Name){ 
148		var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
149		if (document.cookie.match(re)) //if cookie found
150			return document.cookie.match(re)[0].split("=")[1] //return its value
151		return null
152	},
153
154	setCookie:function(name, value){
155		document.cookie = name+"=" + value + ";path=/"
156	},
157
158	createobj:function(){
159		var obj={}
160		for (var i=0; i<arguments.length; i++){
161			obj[arguments[i][0]]=arguments[i][1]
162		}
163		return obj
164	}
165}