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)
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.HTML Code:<!-- 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 -->



Reply With Quote
Bookmarks