PDA

View Full Version : drop in Slide Show



lasa2
08-27-2010, 01:59 PM
This place is the best bar none!

1) Script Title: Drop in SlideShow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/dropitslide.htm

3) Describe problem:
The script works perfect right out of the box.. I'm trying to see if there is a way stop it from looping thru the images..drop down once thru the rotation and stop.

Thanks,

Lasa2

vwphillips
08-28-2010, 01:34 PM
changes are in RED


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

// -------------------------------------------------------------------
// Drop-in Slideshow Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: March 9th, 2007
// -------------------------------------------------------------------

var _dropinslideshowcount=0

function dropinslideshow(imgarray, w, h, delay){
this.id="_dropslide"+(++_dropinslideshowcount) //Generate unique ID for this slideshow instance (automated)
this.createcontainer(parseInt(w), parseInt(h))
this.delay=delay
this.imgarray=imgarray
var preloadimages=[]
for (var i=0; i<imgarray.length; i++){
preloadimages[i]=new Image()
preloadimages[i].src=imgarray[i][0]
}
this.animatestartpos=parseInt(h)*(-1) //Starting "top" position of an image before it drops in
this.slidedegree=10 //Slide degree (> is faster)
this.slidedelay=30 //Delay between slide animation (< is faster)
this.activecanvasindex=0 //Current "active" canvas- Two canvas DIVs in total
this.curimageindex=0
this.zindex=100
this.isMouseover=0
this.init()
}


dropinslideshow.prototype.createcontainer=function(w, h){
document.write('<div id="'+this.id+'" style="position:relative; width:'+w+'px; height:'+h+'px; overflow:hidden">')
document.write('<div style="position:absolute; width:'+w+'px; height:'+h+'px; top:0;"></div>')
document.write('<div style="position:absolute; width:'+w+'px; height:'+h+'px; top:-'+h+'px;"></div>')
document.write('</div>')
this.slideshowref=document.getElementById(this.id)
this.canvases=[]
this.canvases[0]=this.slideshowref.childNodes[0]
this.canvases[1]=this.slideshowref.childNodes[1]
}

dropinslideshow.prototype.populatecanvas=function(canvas, imageindex){
var imageHTML='<img src="'+this.imgarray[imageindex][0]+'" style="border: 0" />'
if (this.imgarray[imageindex][1]!="")
imageHTML='<a href="'+this.imgarray[imageindex][1]+'" target="'+this.imgarray[imageindex][2]+'">'+imageHTML+'</a>'
canvas.innerHTML=imageHTML
}


dropinslideshow.prototype.animateslide=function(){
if (this.curimagepos<0){ //if image hasn't fully dropped in yet
this.curimagepos=this.curimagepos+this.slidedegree
this.activecanvas.style.top=this.curimagepos+"px"
}
else{
clearInterval(this.animatetimer)
this.activecanvas.style.top=0
this.setupnextslide()
var slideshow=this
setTimeout(function(){slideshow.rotateslide()}, this.delay)
}
}


dropinslideshow.prototype.setupnextslide=function(){
this.activecanvasindex=(this.activecanvasindex==0)? 1 : 0
this.activecanvas=this.canvases[this.activecanvasindex]
this.activecanvas.style.top=this.animatestartpos+"px"
this.curimagepos=this.animatestartpos
this.activecanvas.style.zIndex=(++this.zindex)
this.curimageindex++;
if (this.curimageindex<this.imgarray.length){
this.populatecanvas(this.activecanvas, this.curimageindex)
}
}

dropinslideshow.prototype.rotateslide=function(){
if (this.curimageindex<this.imgarray.length){
var slideshow=this
if (this.isMouseover)
setTimeout(function(){slideshow.rotateslide()}, 50)
else
this.animatetimer=setInterval(function(){slideshow.animateslide()}, this.slidedelay)
}
}

dropinslideshow.prototype.init=function(){
var slideshow=this
this.populatecanvas(this.canvases[this.activecanvasindex], 0)
this.setupnextslide()
this.slideshowref.onmouseover=function(){slideshow.isMouseover=1}
this.slideshowref.onmouseout=function(){slideshow.isMouseover=0}
setTimeout(function(){ slideshow.rotateslide(); }, this.delay)
}

/*]]>*/
</script></head>

<body>
<script type="text/javascript">

//Define Image Array. Syntax: ["image_path", "url_destination", "url_target"]
var myimages=new Array()
myimages[0]=["http://www.dynamicdrive.com/dynamicindex14/castle.jpg", "", ""]
myimages[1]=["http://www.dynamicdrive.com/dynamicindex14/duck.jpg", "http://www.dynamicdrive.com", ""]
myimages[2]=["http://www.dynamicdrive.com/dynamicindex14/dog.jpg", "http://www.javascriptkit.com", "_new"]

//Create new drop-in slideshow
//Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation)
new dropinslideshow(myimages, 200, 250, 3000)

</script>
</body>

</html>

lasa2
08-28-2010, 02:08 PM
Masterful!!!
Thank you very much Vic

pgeo
01-13-2012, 04:50 PM
hi everyone
I would like to make my slideshow look and work like windows 8 tils (new home screen)
see the video here and notice how the tiles are moving in different timings and also the images
of slideshow when they are moving up another image is coming along with the one that is about to disappear. video:
http://www.youtube.com/watch?v=k_jCh2PkY0g&feature=player_embedded