Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 239
  • Last Modified:

Using the same scripts for different images

I am having a problem using some java script twice on the same page, i have this script built into a usercontrol so i can place it anywhere on my page, the problem i get, is when i want to use it in one place to display some images, then in another place i want it to display different images.  The block of script is used for fading in and out multiple images, when i try to use it twice on the same page nothing works.  Here is script below, how can i make it work to cycle through the ten images i have it set to, then in a different spot make it cycle through 6 different images?

//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var slideshow_width='400px' //SET IMAGE WIDTH
var slideshow_height='150px' //SET IMAGE HEIGHT
var pause=8000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="images/tool1.gif"
fadeimages[1]="images/tool2.gif"
fadeimages[2]="images/tool3.gif"
fadeimages[3]="images/tool4.gif"
fadeimages[4]="images/tool5.gif"
fadeimages[5]="images/tool6.gif"
fadeimages[6]="images/tool7.gif"
fadeimages[7]="images/tool8.gif"
fadeimages[8]="images/tool9.gif"
fadeimages[9]="images/tool10.gif"

////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"></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/100
}
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
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
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/100
}

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)
0
tentavarious
Asked:
tentavarious
  • 4
  • 3
1 Solution
 
tentavariousAuthor Commented:
What i tried doing is making two usercontrols with the same script i just changed the images that they will display and this doesnt work. any ideas?
0
 
xp_commanderCommented:
Yes it wont work, because if you see the script its CANVAAS specific.  And also it does not accept Image Array or Canvaas as an input parameter to all the function calls.
In order to make the same script work in both canvaases you will need to change all those functions to accept input parameters for which canvaas to rotate.

If you dont care or want to spend re-writing above code using the cleaner solution , what you can do is in your second script , change all the names for :-
Image Array
All function calls
Canvaas
Function parameters, etc , etc.

For example :-
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="images/tool1.gif"
fadeimages[1]="images/tool2.gif"
......

WILL get changed to :-
var fadeimages_another=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages_another[0]="different_images/tool1.gif"
fadeimages_another[1]="different_images/tool2.gif"
......

And in the code references :-
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

WILL get changed to :-
var preloadedimages=new Array()
for (p=0;p<fadeimages_another.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages_another[p]
}

AND all references to Canvaas = Canvaas_another, img name = another , etc etc..
if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas_another" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas_another" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide_another" src="'+fadeimages_another[0]+'">')


And So on keep changing all till you have created an exact same logic script but with different parameter names and function names.

The first method , I suggested using same script with different parameters to control is a better , clean and efficient one.
The second one is quick dirty and more messy when comes to maintainence in future and most least recommended one.

Hope this helps.



0
 
tentavariousAuthor Commented:
quick question should i change just the canvas0 to canvas_another or change the curcanvas variable to canvas_another, i'm not to familiar with javascript so i am not sure on which one to change. In your example i would change id=canvas0 to id=canvas_another, would this be the only change necessary when dealing with the canvas variable?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
tentavariousAuthor Commented:
i did something different then what you said, because your way didnt work i changed all the canvas0 to canvas_another and all the canvas1 to canvas_another1.  It worked for the second script now my first script is not working, what am i missing?
0
 
xp_commanderCommented:
What you are missing is the script you have paste above is not having any parameters passed in to decide to act on which canvaas. By just changing canvas0 to canvas1 won't work for both. you just replacing your data array and canvas to a new one.

As both of the scripts are on same page , loaded at same time , you need different names of it. Ok give me few minutes , I will paste you the code to be used in second usercontrol or for second canvas. First you let it be as you have already , just change the second one.

0
 
xp_commanderCommented:
Ok here is the exact same script but without any references to any variables , function calls , or any things that your first script is referring to.  I still strongly urge if someone wants to volunteer and take this code to make it such a way where you can pass canvas and pic array as parametersfor multiple image arrays.

Here is your code for second usercontrol :-

//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var slideshow_width='400px' //SET IMAGE WIDTH
var slideshow_height='150px' //SET IMAGE HEIGHT
var pause=8000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages_another=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages_another[0]="images_another/pic1.gif"
fadeimages_another[1]="images_another/pic2.gif"
fadeimages_another[2]="images_another/pic3.gif"
fadeimages_another[3]="images_another/pic4.gif"


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

var preloadedimages_another=new Array()
for (p=0;p<fadeimages_another.length;p++){
preloadedimages_another[p]=new Image()
preloadedimages_another[p].src=fadeimages_another[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="canvas1" 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"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages_another[0]+'">')

var curpos_another_another=10
var degree_another=10
var curcanvas_another="canvas1"
var curimageindex_another=0
var nextimageindex_another=1


function fadepic_another(){
if (curpos_another<100){
curpos_another+=10
if (tempobj_another.filters)
tempobj_another.filters.alpha.opacity=curpos_another
else if (tempobj_another.style.MozOpacity)
tempobj_another.style.MozOpacity=curpos_another/100
}
else{
clearInterval(dropslide)
nextcanvas_another=(curcanvas_another=="canvas1")? "canvas1" : "canvas1"
tempobj_another=ie4? eval("document.all."+nextcanvas_another) : document.getElementById(nextcanvas_another)
tempobj_another.innerHTML='<img src="'+fadeimages_another[nextimageindex_another]+'">'
nextimageindex_another=(nextimageindex_another<fadeimages_another.length-1)? nextimageindex_another+1 : 0
setTimeout("rotateimage_another()",pause)
}
}

function rotateimage_another(){
if (ie4||dom){
resetit_another(curcanvas_another)
var crossobj_another=tempobj_another=ie4? eval("document.all."+curcanvas_another) : document.getElementById(curcanvas_another)
crossobj_another.style.zIndex++
var temp='setInterval("fadepic_another()",50)'
dropslide=eval(temp)
curcanvas_another=(curcanvas_another=="canvas1")? "canvas1" : "canvas1"
}
else
document.images.defaultslide.src=fadeimages_another[curimageindex_another]
curimageindex_another=(curimageindex_another<fadeimages_another.length-1)? curimageindex_another+1 : 0
}

function resetit_another(what){
curpos_another=10
var crossobj_another=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj_another.filters)
crossobj_another.filters.alpha.opacity=curpos_another
else if (crossobj_another.style.MozOpacity)
crossobj_another.style.MozOpacity=curpos_another/100
}

function startit_another(){
var crossobj_another=ie4? eval("document.all."+curcanvas_another) : document.getElementById(curcanvas_another)
crossobj_another.innerHTML='<img src="'+fadeimages_another[curimageindex_another]+'">'
rotateimage_another()
}

if (ie4||dom)
window.onload=startit_another
else
setInterval("rotateimage_another()",pause)
0
 
tentavariousAuthor Commented:
Thanks a lot got it working.
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now