PDA

View Full Version : image slideshow

crazypdm
06-29-2008, 02:47 PM
how to customize image size in the following script. I also wanna to add description to the image and display it just below the image. I got this code from http://javascriptkit.com/script/script2/indexit.shtml


<head>
<style type="text/css">

#slideshowContainer{
width: 500px;
height: auto;
}

#numberDiv a{
font: bold 14px Arial;
text-decoration: none;
}

#backforthbuttons{
margin-top: 6px;
}

</style>

<script type="text/javascript">

// Index It Image Slideshow script- By JavaScriptKit.com
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

//Specify images for slideshow:
//["Image Path", "Optional Image link"]

var numberslide=new Array()
numberslide[0]=["gallery/khusi/1.jpg", "http://www.google.com"]
numberslide[1]=["gallery/khusi/2.jpg", "Khusi Ram"]
numberslide[2]=["gallery/khusi/3.jpg", ""]
numberslide[3]=["gallery/khusi/4.jpg", ""]
numberslide[4]=["gallery/khusi/5.jpg", ""]

var mylinktarget="" //specify optional link target
var mylinkcolor="navy" //specify default color of number links
var mylinkcolorSelected="red" //specify color of selected links

var imgborderwidth=0 //specify border of image slideshow


/////Stop customizing here////////////////

var preloadit=new Array()
for (i=0;i<numberslide.length;i++){
preloadit[i]=new Image()
preloadit[i].src=numberslide[i][0]
}

var currentindex=""

function changeslides(which){
var imghtml=""
currentindex=(which=="initial")? 0 : parseInt(which)
var mode=(which=="initial")? "initial" : ""
var which=(mode=="initial")? numberslide[0] : numberslide[which]
if (which[1]!="")
imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">'
imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">'
if (which[1]!="")
imghtml+='</a>'

if (mode=="initial")
document.write('<div>'+imghtml+'</div>')
else{
document.getElementById("imagecontainer").innerHTML=imghtml
changecolors()
}
}

function createnumbers(){
document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">0</a> ')
for (i=1; i< numberslide.length; i++)
document.write('<a href="javascript:changeslides(\''+i+'\')">'+i+'</a> ')
}

function changecolors(){
var numberobj=document.getElementById("numberDiv")
numberlinks=numberobj.getElementsByTagName("A")
for (i=0; i<=currentindex; i++)
numberlinks[i].style.color=mylinkcolorSelected
for (i=currentindex+1; i<numberslide.length; i++)
numberlinks[i].style.color=mylinkcolor
}

function goforward(){
if (currentindex<numberslide.length-1)
changeslides(currentindex+1)
}

function goback(){
if (currentindex!=0)
changeslides(currentindex-1)
}

</script>
</head>

<body>
<div id="slideshowContainer">


<div id="imagecontainer">
<script type="text/javascript">
changeslides("initial") //This call displays the first image
</script>
</div>

<div id="numberDiv" align="center">
<script type="text/javascript">
createnumbers() //This call writes out the numbers
</script>
</div>

<div id="backforthbuttons" >
<a href="javascript:goforward()" style="float: right"><img src="gallery/blueright.gif" border="0"></a>
<a href="javascript:goback()"><img src="gallery/blueleft.gif" border="0"></a>
</div>

</div>
</body>
mjlorbet
06-29-2008, 07:08 PM
that's a healthy code block there, please, from now on, enclose your code blocks within code tags, they're the # sign in the editor.

imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">'

could be changed to

imghtml+='<img src="' + which[0] + '" border="' + imgborderwidth+'" + width="500" height = "500" />';


or you could use

<style type="text/css">
img{
width:500px;
height:500px;
}
</style>

if you wanted it to be a global setting for all images on the page