PDA

View Full Version : Random gallery for webpage



Amen-Ra
05-03-2008, 08:57 PM
Random gallery for landing page for my site

I have a script I found that can show images of my products, a gallery of images, and have the images change, either while you are on the page or if needed change each visit to the page, the images are able to link to the product, so say the web visitor sees that image in the gallery so they click on it and it takes them to the product.

I think this is a great way to showcase your designs on your front page.
So its a good script, it works, but I need a change to it, I need a border and also it has a "click to view" at the bottom of the image, I dont want that part, I dont know JavaScript, Im a beginner, so its hard for me to edit, the script need some editing, some to delete the click to view, and some adding to give a border with a colour.

Here is the script for you to see.
direct link here (http://www.cafewish.com/scripts/rotateimage.txt)


<!-- ROTATING IMAGE SCRIPT -->
<img src="http://i22.photobucket.com/albums/b331/teesed/popitems.gif" width="152" height="22" alt="Popular Items" /><br />

<center><script language="JavaScript1.2" type="text/javascript">

/***********************************************
* Fade-in image slideshow script- � Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Modified in DD Help Forums to optionally add Links and control over slide behavior
* Modifications marked with * � John Davenport Scheuer - jscheuer1REMOVETHISFIRST@comcast.net
***********************************************/

var slideshow_width='150px' //SET IMAGE WIDTH
var slideshow_height='150px' //SET IMAGE HEIGHT
var pause=4000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var repeat='yes' //SET to yes for repeating slideshow SET to no *
//for slideshow that cycles once and ends at the beginning
var links='yes' //SET to yes to use optional links, no for no links *

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="http://storetn.cafepress.com/nocache/4/26071324_F_store.jpg"
fadeimages[1]="http://storetn.cafepress.com/nocache/9/15187979_F_store.jpg"
fadeimages[2]="http://storetn.cafepress.com/nocache/5/24930535_F_store.jpg"
fadeimages[3]="http://storetn.cafepress.com/nocache/6/26338206_F_store.jpg"
fadeimages[4]="http://storetn.cafepress.com/nocache/4/26109694_F_store.jpg"

if (links=='yes'){
var linkimages=new Array()
//SET IMAGE LINKS. Extend or contract array as needed *
linkimages[0]='<a href="http://www.cafepress.com/teesed/706348">'
linkimages[1]='<a href="http://www.cafepress.com/teesed/444994">'
linkimages[2]='<a href="http://www.cafepress.com/teesed/680802">'
linkimages[3]='<a href="http://www.cafepress.com/teesed/717722">'
linkimages[4]='<a href="http://www.cafepress.com/teesed/711706">'
}

////NO need to edit beyond here/////////////

var a //*
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=3
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
if (links=='yes') //*
tempobj.innerHTML=linkimages[nextimageindex]+'<img border=0 src="'+fadeimages[nextimageindex]+'"></a>' //*
else //*
tempobj.innerHTML='<img border=1 src="'+fadeimages[nextimageindex]+'">'
if (repeat=='no'){ //*
if ((nextimageindex==1)&&(a==1)) //*
return; //*
if (nextimageindex==0) //*
a=1; //*
} //*
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
if (links=='yes') //*
crossobj.innerHTML=linkimages[curimageindex]+'<img border=0 src="'+fadeimages[curimageindex]+'"></a>' //*
else //*
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>(click to view)</center>

<br />
<!-- END ROTATING IMAGE SCRIPT -->

Perhaps there are better scripts Im not sure, would be nice to have images as a gallery, rather than just one image, but one can always put many of these scripts in the page for a gallery effect.