Guest hardnut33 Posted May 15, 2007 Share Posted May 15, 2007 I have located some code that i think possibly will enable a java slideshow with images and clickable links to go into a box.. Is there anyone out there that can help me edit it for use on my site? I was hoping for some help with image paths and also i am unsure of what is actual code and what is instruction for entering the code!! 1. initially i have 3 images i wish to use... ebay, ebuyer and computeractive logos..these are stored in my styleimages/icons folder.....below is the instruction and script instructions, Step 1: Insert the following script to the HEAD section of your page: <script type="text/javascript"> var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed. //SET IMAGE PATHS. Extend or contract array as needed fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax var fadebgcolor="white" ////NO need to edit beyond here///////////// var fadearray=new Array() //array to cache fadeshow instances var fadeclear=new Array() //array to cache corresponding clearinterval pointers var dom=(document.getElementById) //modern dom browsers var iebrowser=document.all function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){ this.pausecheck=pause this.mouseovercheck=0 this.delay=delay this.degree=10 //initial opacity degree (10%) this.curimageindex=0 this.nextimageindex=1 fadearray[fadearray.length]=this this.slideshowid=fadearray.length-1 this.canvasbase="canvas"+this.slideshowid this.curcanvas=this.canvasbase+"_0" if (typeof displayorder!="undefined") theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) this.theimages=theimages this.imageborder=parseInt(borderwidth) this.postimages=new Array() //preload images for (p=0;p<theimages.length;p++){ this.postimages[p]=new Image() this.postimages[p].src=theimages[p][0] } var fadewidth=fadewidth+this.imageborder*2 var fadeheight=fadeheight+this.imageborder*2 if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox) document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>') else document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>') if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox this.startit() else{ this.curimageindex++ setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay) } } function fadepic(obj){ if (obj.degree<100){ obj.degree+=10 if (obj.tempobj.filters&&obj.tempobj.filters[0]){ if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+ obj.tempobj.filters[0].opacity=obj.degree else //else if IE5.5- obj.tempobj.style.filter="alpha(opacity="+obj.degree+")" } else if (obj.tempobj.style.MozOpacity) obj.tempobj.style.MozOpacity=obj.degree/101 else if (obj.tempobj.style.KhtmlOpacity) obj.tempobj.style.KhtmlOpacity=obj.degree/100 } else{ clearInterval(fadeclear[obj.slideshowid]) obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1" obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas) obj.populateslide(obj.tempobj, obj.nextimageindex) obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0 setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay) } } fadeshow.prototype.populateslide=function(picobj, picindex){ var slideHTML="" if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">' slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">' if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML+='</a>' picobj.innerHTML=slideHTML } fadeshow.prototype.rotateimage=function(){ if (this.pausecheck==1) //if pause onMouseover enabled, cache object var cacheobj=this if (this.mouseovercheck==1) setTimeout(function(){cacheobj.rotateimage()}, 100) else if (iebrowser&&dom||dom){ this.resetit() var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) crossobj.style.zIndex++ fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50) this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0" } else{ var ns4imgobj=document.images['defaultslide'+this.slideshowid] ns4imgobj.src=this.postimages[this.curimageindex].src } this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0 } fadeshow.prototype.resetit=function(){ this.degree=10 var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) if (crossobj.filters&&crossobj.filters[0]){ if (typeof crossobj.filters[0].opacity=="number") //if IE6+ crossobj.filters(0).opacity=this.degree else //else if IE5.5- crossobj.style.filter="alpha(opacity="+this.degree+")" } else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=this.degree/101 else if (crossobj.style.KhtmlOpacity) crossobj.style.KhtmlOpacity=obj.degree/100 } fadeshow.prototype.startit=function(){ var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) this.populateslide(crossobj, this.curimageindex) if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER var cacheobj=this var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid) crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1} crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0} } this.rotateimage() } </script> Configure the array "fadeimages[]" to reference the images you want to be displayed. Step 2: All that's left now is to insert the below code into the BODY of your page where you want the slideshow(s) to be displayed. <script type="text/javascript"> //new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder) new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R") new fadeshow(fadeimages2, 140, 225, 0, 3000, 0) </script> as you can see, it's only the small section that needs editing...the references to the images to be displayed.. Quote Link to comment Share on other sites More sharing options...
Guest hardnut33 Posted May 15, 2007 Share Posted May 15, 2007 i have managed to plough, hack, cut, copy and paste my way through this code and got it working..my image paths are all correct and it is functioninf exactly as planned.. ONE PROB.. The side box the logos are being rotated in is a lot larger than the logo's themselves...i only need the box to be about the same size as the mailing list box or information box...is there a way of reducing the box size.. my rotating images are all 150x70Px so i dont think its their size causing the probs... any help is appreciated Quote Link to comment Share on other sites More sharing options...
Guest hardnut33 Posted May 15, 2007 Share Posted May 15, 2007 ALL DONE AND WORKING NOW.. Quote Link to comment Share on other sites More sharing options...
markscarts Posted May 15, 2007 Share Posted May 15, 2007 :) Way to go, dude! :( Quote Link to comment Share on other sites More sharing options...
Guest hardnut33 Posted May 15, 2007 Share Posted May 15, 2007 i know mark..i havent put it into my modded skin yet...i was testing it in Classic to get it working and looking OK the code above was BEFORE the ploughing and cutting to get it sorted and looking spaced right.. I think i smoke way too much cos i do something then forget immediately how i have done it!! :( Quote Link to comment Share on other sites More sharing options...
markscarts Posted May 15, 2007 Share Posted May 15, 2007 A minor point, not to be nit-picky . . . Java and javascript are two different things . . . call it js for short from now on just to keep confusion to a minimum in the forums. I stay totally confused at all times anyway LOL And I no longer smoke anything at all. I'm hanging on with one brain cell left. <really missing my cigarettes most, but my lungs are thanking me> Quote Link to comment Share on other sites More sharing options...
Guest hardnut33 Posted May 15, 2007 Share Posted May 15, 2007 no probs..thanks for the tip Quote Link to comment Share on other sites More sharing options...
Guest lordbarron Posted May 15, 2007 Share Posted May 15, 2007 haha mark was a wild boy back in the day! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.