Solved

Using the same scripts for different images

Posted on 2004-03-22
7
221 Views
Last Modified: 2012-06-21
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
Comment
Question by:tentavarious
  • 4
  • 3
7 Comments
 

Author Comment

by:tentavarious
ID: 10649790
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
 
LVL 3

Expert Comment

by:xp_commander
ID: 10650245
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
 

Author Comment

by:tentavarious
ID: 10650758
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:tentavarious
ID: 10651626
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
 
LVL 3

Expert Comment

by:xp_commander
ID: 10654587
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
 
LVL 3

Accepted Solution

by:
xp_commander earned 250 total points
ID: 10654666
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
 

Author Comment

by:tentavarious
ID: 10657595
Thanks a lot got it working.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now