Nice pic rotator script

[rumphrey]

I know this probably should be the contribution section, but with all of the cries for help for adding pictures, I placed it here. Please relocate if necessary.

 

I finally found a nice little way to add more than one picture in the product description area, without a lot of trouble. It does a fade-in and fade-put of the pictures while rotating them. I borrowed this little javascript code, and adapted to my images. Very easy to use. All you have to do is write out the entire image code, and put in your image sizes. I am still working on my website, but here is the test page: http://ancienttimesonline.com/catalog/prod...f364f145278cf53

 

Just copy the code into your product description section. Warning after you preview it, and you need to back up for some reason, be sure to correct the image url address. Oscommerce as a slash before and and after the url, making the script inoperative. Always check this.

 

I hope this helps everyone!

 

 

 

<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

***********************************************/

 

var slideshow_width='140px' //SET IMAGE WIDTH

var slideshow_height='225px' //SET IMAGE HEIGHT

var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

 

var fadeimages=new Array()

//SET IMAGE PATHS. Extend or contract array as needed

fadeimages[0]="http://www.ancienttimesonline.com/images/firefront.jpg"

fadeimages[1]="http://www.ancienttimesonline.com/images/fireback.jpg"

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

 

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+=10

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)

tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'

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)

crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'

rotateimage()

}

 

if (ie4||dom)

window.onload=startit

else

setInterval("rotateimage()",pause)

 

</script>

[Kjolebutikken]

I know this probably should be the contribution section, but with all of the cries for help for adding pictures, I placed it here. Please relocate if necessary.

 

I finally found a nice little way to add more than one picture in the product description area, without a lot of trouble. It does a fade-in and fade-put of the pictures while rotating them. I borrowed this little javascript code, and adapted to my images. Very easy to use. All you have to do is write out the entire image code, and put in your image sizes. I am still working on my website, but here is the test page: http://ancienttimesonline.com/catalog/prod...f364f145278cf53

 

Just copy the code into your product description section. Warning after you preview it, and you need to back up for some reason, be sure to correct the image url address. Oscommerce as a slash before and and after the url, making the script inoperative. Always check this.

 

I hope this helps everyone!

<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

***********************************************/

 

var slideshow_width='140px' //SET IMAGE WIDTH

var slideshow_height='225px' //SET IMAGE HEIGHT

var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

 

var fadeimages=new Array()

//SET IMAGE PATHS. Extend or contract array as needed

fadeimages[0]="http://www.ancienttimesonline.com/images/firefront.jpg"

fadeimages[1]="http://www.ancienttimesonline.com/images/fireback.jpg"

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

 

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+=10

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)

tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'

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)

crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'

rotateimage()

}

 

if (ie4||dom)

window.onload=startit

else

setInterval("rotateimage()",pause)

 

</script>

 

 

Hi,

 

Does anyone know if it is possible to use this code in a way to show only several pictures of same product when in product info page for one product and when in info product page for another product, only show a slideshow of pictures for this product???

 

Thanks

Kjolebutikken:-)