Random gallery tool or script

Discussion in 'HTML & Website Design' started by fallenone, May 3, 2008.

  1. #1
    Random gallery for landing page for my site

    Im looking for a tool or script that can show images of my products, a gallery of images, and have the images change, either while you are on the page or perhaps change each visit, I don't want the same static images on my front page, I want them to change, not just have static images, I also want the images to be 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.
    Can anyone recommend something that enables me to do this.
    I have a script that looks like it can do the job, 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, 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.
    Perhaps you know of a tool that is better than this script, or better scripts than this one

    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 -->
    HTML:
     
    fallenone, May 3, 2008 IP