https://cp-la-fauvarge.fr/inc/jshead/dropinslideshow.js

1// -------------------------------------------------------------------
2// Drop-in Slideshow Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
3// Last updated: March 9th, 2007
4// -------------------------------------------------------------------
5
6var _dropinslideshowcount=0
7
8function dropinslideshow(imgarray, w, h, delay, path, alt){
9	this.id="_dropslide"+(++_dropinslideshowcount) //Generate unique ID for this slideshow instance (automated)
10	this.createcontainer(parseInt(w), parseInt(h))
11	this.delay=delay
12	this.imgarray=imgarray
13	var preloadimages=[]
14	for (var i=0; i<imgarray.length; i++){
15		preloadimages[i]=new Image()
16		preloadimages[i].src=imgarray[i][0]
17	}
18	this.animatestartpos=parseInt(h)*(-1) //Starting "top" position of an image before it drops in
19	this.slidedegree=10 //Slide degree (> is faster)
20	this.slidedelay=30 //Delay between slide animation (< is faster)
21	this.activecanvasindex=0 //Current "active" canvas- Two canvas DIVs in total
22	this.curimageindex=0
23	this.zindex=100
24	this.isMouseover=0
25    this.width=parseInt(w);
26    this.trans=path+'inc/img/general/trans.gif'
27    this.alt=alt
28	this.init()
29}
30
31
32dropinslideshow.prototype.createcontainer=function(w, h){

33    document.write('<div id="'+this.id+'" style="position:relative; width:'+w+'px; height:'+h+'px; overflow:hidden">')
34	document.write('<div style="position:absolute; width:'+w+'px; height:'+h+'px; top:0;"></div>')
35	document.write('<div style="position:absolute; width:'+w+'px; height:'+h+'px; top:-'+h+'px;"></div>')
36	document.write('</div>')
37	this.slideshowref=document.getElementById(this.id)
38	this.canvases=[]
39	this.canvases[0]=this.slideshowref.childNodes[0]
40	this.canvases[1]=this.slideshowref.childNodes[1]
41}
42
43dropinslideshow.prototype.populatecanvas=function(canvas, imageindex){
44    alt=this.alt
45    ratio=this.imgarray[imageindex][3]
46    if (ratio > 1) {
47        w=parseInt(this.width/ratio)
48        h=this.width
49        m='<img src="'+this.trans+'" style="border-style:none; width:'+parseInt((this.width - w)/2)+'px; height:'+h+'px;" title="" alt="" />'
50    } else {
51        w=this.width
52        h=this.width*ratio
53        m=''
54    }
55	var imageHTML=m+'<img src="'+this.imgarray[imageindex][0]+'" style="border-style:none; width:'+w+'px; height:'+h+'px;" title="'+alt+'" alt="'+alt+'" />'
56	if (this.imgarray[imageindex][1]!="")
57		imageHTML='<a href="'+this.imgarray[imageindex][1]+'" target="'+this.imgarray[imageindex][2]+'" title="">'+imageHTML+'</a>'
58	canvas.innerHTML=imageHTML
59}
60
61
62dropinslideshow.prototype.animateslide=function(){
63	if (this.curimagepos<0){ //if image hasn't fully dropped in yet
64		this.curimagepos=this.curimagepos+this.slidedegree
65		this.activecanvas.style.top=this.curimagepos+"px"
66	}
67	else{
68		clearInterval(this.animatetimer)
69		this.activecanvas.style.top=0
70		this.setupnextslide()
71		var slideshow=this
72		setTimeout(function(){slideshow.rotateslide()}, this.delay)
73	}
74}
75
76
77dropinslideshow.prototype.setupnextslide=function(){
78	this.activecanvasindex=(this.activecanvasindex==0)? 1 : 0
79	this.activecanvas=this.canvases[this.activecanvasindex]
80	this.activecanvas.style.top=this.animatestartpos+"px"
81	this.curimagepos=this.animatestartpos
82	this.activecanvas.style.zIndex=(++this.zindex)
83	this.curimageindex=(this.curimageindex<this.imgarray.length-1)? this.curimageindex+1 : 0
84	this.populatecanvas(this.activecanvas, this.curimageindex)
85}
86
87dropinslideshow.prototype.rotateslide=function(){
88	var slideshow=this
89	if (this.isMouseover)
90		setTimeout(function(){slideshow.rotateslide()}, 50)
91	else
92		this.animatetimer=setInterval(function(){slideshow.animateslide()}, this.slidedelay)
93}
94
95dropinslideshow.prototype.init=function(){
96	var slideshow=this

97	this.populatecanvas(this.canvases[this.activecanvasindex], 0)
98	this.setupnextslide()
99	this.slideshowref.onmouseover=function(){slideshow.isMouseover=1}
100	this.slideshowref.onmouseout=function(){slideshow.isMouseover=0}
101	setTimeout(function(){slideshow.rotateslide()}, this.delay)
102}
103
104/*******************************************************************************
105<script type="text/javascript">
106
107//Define Image Array. Syntax: ["image_path", "url_destination", "url_target"]
108var myimages=new Array()
109myimages[0]=["photo1.jpg", "", ""]
110myimages[1]=["photo2.jpg", "http://www.dynamicdrive.com", ""]
111myimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"]
112
113//Create new drop-in slideshow
114//Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation)
115new dropinslideshow(myimages, 200, 250, 3000)
116
117</script>
118*******************************************************************************/