1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

JavaScript Slideshow with zoom-in-zoom-out-animation

Discussion in 'Web Development' started by JavaScriptBank, May 25, 2010.

  1. JavaScriptBank

    JavaScriptBank Banned

    Slideshow with great transitoon effect. Each image has a JavaScript link of its own. Netscape-users will see a simple image-rotation-ef... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

    [​IMG]
    Demo:​
    javascriptbank.com/slideshow-with-zoom-in-zoom-out-animation.html/en/
    How to setup

    Step 1: Place HTML below in your BODY section
    HTML
    Code:
    <BODY onload=initiate()>
<SCRIPT>
<!-- Beginning of JavaScript -
// Slideshow with zoom-in-zoom-out-animation

// CONFIGURATION:
// 1.    Create your images (gif or jpg). They should have the same width. 
//         Put those images in the same directory as the HTML-file. 
//        You can add as many images as you like.
// 2.    Copy the script-block and paste it into head-section of your HTML-file..
// 3.     Copy the span-blocks with the id "imgcontainer" into the body-section 
//      of your HTML-file.
// 4.    Insert 'onLoad="initiate()"' into the body tag.
// 5.    Configure the varibales below.
        
// The width of your images (pixels). All pictures should have the same width.
var imgwidth=256

// The horizontal and vertical position of the images (pixels). 
var pos_left=10
var pos_top=10

// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="photo3.jpg"
imgname[2]="photo4.jpg"

// Where should those images be linked to? 
// Add an URL for each image.
// If you don't want to add an URL just write '#' instead of the URL.
var imgurl=new Array()
imgurl[0]="http://javascriptbank.com"
imgurl[1]="http://javascriptbank.com"
imgurl[2]="http://javascriptbank.com"

// This block will preload your images. Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
    imgpreload[i]=new Image()
    imgpreload[i].src=imgname[i]
}

// Standstill-time between the images (microseconds).
var pause=2000

// Speed of the stretching and shrinking effect. More means slower.
var speed=20

// This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster.
var step=10

// Do not edit the variables below
var i_loop=0
var i_image=0

function stretchimage() {
    if (i_loop<=imgwidth) {
        if (document.all) {
            imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"

        }
        i_loop=i_loop+step
        var timer=setTimeout("stretchimage()",speed)
      }
    else {
        clearTimeout(timer)
        var timer=setTimeout("shrinkimage()",pause)
    }
}

function shrinkimage() {
    if (i_loop>-step) {
        if (document.all) {
            imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"

        }
        i_loop=i_loop-step
        var timer=setTimeout("shrinkimage()",speed)
      }
    else {
        clearTimeout(timer)
        changeimage()
    }
}

function changeimage() {
    i_loop=0
    i_image++
    if (i_image>imgname.length-1) {i_image=0}
       var timer=setTimeout("stretchimage()",pause)
}

function initiate() {
    if (document.all) {
        document.all.imgcontainer.style.posLeft=pos_left
        document.all.imgcontainer.style.posTop=pos_top
        changeimage()
    }
    if (document.layers) {
        document.imgcontainer.left=pos_left
        document.imgcontainer.top=pos_top
        rotatenetscape()
    }
}

function rotatenetscape() {
    document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")    
    document.imgcontainer.document.close()    
    i_image++
    if (i_image>imgname.length-1) {i_image=0}
       var timer=setTimeout("rotatenetscape()",pause*2)
}

document.write("<div id=\"roof\" style=\"position:relative\">")

document.write("<div id=\"imgcontainer\" style=\"position:absolute;top:0px;left:0px\"></div>")
document.write("</div>")

// - End of JavaScript - -->

</SCRIPT>
</BODY>
    <!--
        This script downloaded from www.JavaScriptBank.com
        Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    -->

    Javascript Music Player - Random Text Generator - Floating Image Script​
     
    JavaScriptBank, May 25, 2010
    #1