Results 1 to 4 of 4

Thread: drop in Slide Show

  1. #1
    Join Date
    Aug 2010
    Posts
    45
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default drop in Slide Show

    This place is the best bar none!

    1) Script Title: Drop in SlideShow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ropitslide.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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    changes are in RED

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    lasa2 (08-28-2010)

  4. #3
    Join Date
    Aug 2010
    Posts
    45
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default

    Masterful!!!
    Thank you very much Vic

  5. #4
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:
    Code:
    http://www.youtube.com/watch?v=k_jCh2PkY0g&feature=player_embedded

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •