PDA

View Full Version : I want to use same picture cube slide show in multiple locations on same page HELP!

kindred2
08-31-2003, 04:04 AM
Hello

I'm wanting to use this script from Javascript Kit on my site in multiple locations on the same page.... how would I do this so that it works?

<script language="JavaScript1.1">

//Picture Cube slideshow - By Tony Foster III
//Modifications by JK
//Visit JavaScript Kit (http://javascriptkit.com) for script

var specifyimage=new Array() //Your images
specifyimage[0]="test-1.gif"
specifyimage[1]="test-2.gif"
specifyimage[2]="test-3.gif"

var delay=3000 //3 seconds

//Counter for array
var count =1;

var cubeimage=new Array()
for (i=0;i<specifyimage.length;i++){
cubeimage=new Image()
cubeimage[i].src=specifyimage[i]
}

function movecube(){
if (window.createPopup)
cube.filters[0].apply()
document.images.cube.src=cubeimage[count].src;
if (window.createPopup)
cube.filters[0].play()
count++;
if (count==cubeimage.length)
count=0;
setTimeout("movecube()",delay)
}

window.onload=new Function("setTimeout('movecube()',delay)")
</script>

<img src="http://amongkindredhearts.com/test-1.gif" name="cube" border=0 style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">



I read about not being able to use scripts that use the same onload event without changing something, but I guess I'm not understanding [I]exactly what that something is.

TIA

Christy
beetle
08-31-2003, 09:13 AM
Unbelievable. The same problem with the same script (http://www.codingforums.com/showthread.php?s=&threadid=25510), twice in one day.

I won't razz you too hard 'cause your new, but in the future, try doing a search first. Thanks.
kindred2
08-31-2003, 03:51 PM
Well I guess I'm an idiot too, because yes I did read the other past, but as I said in my first post,

I read about not being able to use scripts that use the same onload event without changing something, but I guess I'm not understanding [I]exactly what that something is

This is what I read at Javascript Kit...

The way to go about solving this conflict is simple, though not quite the same to explain. Essentially, what you want is to end up with only ONE delta for both scripts, with that delta calling the two scripts. Let's list some possible scenarios now, and their resolutions:

EXAMPLE #1:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: <body onload="dothat()">
RESOLUTION: <body onload="dothis();dothat()">

EXAMPLE #2:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: window.onload=dothat()
RESOLUTION: <body onload="dothis();dothat()">

EXAMPLE #3:
SCRIPT 1: window.onload=dothis
SCRIPT 2: window.onload=dothat
RESOLUTION: <body onload="dothis();dothat()">



But I guess I'm still not understanding it.... I guess what I need is a nice picture of exactly what I need to put for 3 of these scripts on one page and where to put it.

Thanks Beetle for trying to help me.... I'm just a slow learner... sometimes takes a few to get the light bulb to come on and say ohhhh now I see!! LOL


TIA

Christy
MotherNatrsSon
08-31-2003, 04:44 PM
If you would have read the link beetle posted you would have seen this solution to yu question:

posted by beetle

Here's an object version of the same script. Although the names of the functions & variables really don't make sense, I left them as they were so you could see what was done.

<script type="text/javascript">
function init()
{
var a = new CubeImage( cube1, ['partyplan1.jpg','partyplan2.jpg'], 3000 );
var b = new CubeImage( cube2, ['entertainment1.jpg','entertainment2.jpg'], 3000 );
var c = new CubeImage( cube3, ['mvps1.jpg','mvps2.jpg'], 3000 );
}

function CubeImage( imgId, specifyimage, delay )
{
if ( typeof document.getElementById == 'undefined' ) return;

var cube = document.getElementById( imgId ),
cubeimage = new Array(),
count = 0,
filters = Boolean( typeof cube.filters != 'undefined' );

for ( var i = 0; i < specifyimage.length ; )
{
cubeimage[i] = new Image();
cubeimage[i].src = specifyimage[i];
}

var movecube = function()
{
if ( filters ) cube.filters[0].apply();
cube.src = cubeimage[count++].src;
if ( filters ) cube.filters[0].play();
if ( count == cubeimage.length )
{
count = 0;
}
setTimeout( movecube, delay );
}

movecube();
}

window.onload = init;
</script>

<img src="mvps1.jpg" id="cube1" border="0" style="filterrogidXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">
<img src="mvps1.jpg" id="cube2" border="0" style="filterrogidXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">
<img src="mvps1.jpg" id="cube3" border="0" style="filterrogidXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">


MNS
kindred2
08-31-2003, 04:57 PM
Okay.... I guess I will just try to put that in my page and hope it works. As I said.... the light bulb hasn't come on yet, but maybe when I see the code in the page I will get it.

Couple more questions....

In using the script provided here, how do I go about page placement of each of the images? Do I use this script along with the other in the places I want them? If so, is there anything in the original script I need to modify?

TIA

Christy

P.S.

If you would have read the link beetle posted you would have seen this solution to yu question


If you had read.... I did say I looked at it, but did not understand it thank you.
MotherNatrsSon
08-31-2003, 09:28 PM
When using this script with either function I get this error:

cube 1 is not defined

posted by beetle

Here's an object version of the same script. Although the names of the functions & variables really don't make sense, I left them as they were so you could see what was done.

:<script type="text/javascript">
function init()
{
var a = new CubeImage( cube1, ['partyplan1.jpg','partyplan2.jpg'], 3000 );
var b = new CubeImage( cube2, ['entertainment1.jpg','entertainment2.jpg'], 3000 );
var c = new CubeImage( cube3, ['mvps1.jpg','mvps2.jpg'], 3000 );
}

function CubeImage( imgId, specifyimage, delay )
{
if ( typeof document.getElementById == 'undefined' ) return;

var cube = document.getElementById( imgId ),
cubeimage = new Array(),
count = 0,
filters = Boolean( typeof cube.filters != 'undefined' );

for ( var i = 0; i < specifyimage.length ; )
{
cubeimage[i] = new Image();
cubeimage[i].src = specifyimage[i];
}

var movecube = function()
{
if ( filters ) cube.filters[0].apply();
cube.src = cubeimage[count++].src;
if ( filters ) cube.filters[0].play();
if ( count == cubeimage.length )
{
count = 0;
}
setTimeout( movecube, delay );
}

movecube();
}

window.onload = init;
</script>

<img src="mvps1.jpg" id="cube1" border="0" style="filterrogidXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">
<img src="mvps1.jpg" id="cube2" border="0" style="filterrogidXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">
<img src="mvps1.jpg" id="cube3" border="0" style="filterrogidXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">

Here is a version of the CubeImage function that makes MUCH more sense, semantically.

:function CubeImage( imgId, sources, delay )
{
if ( typeof document.getElementById == 'undefined' ) return;

var img = document.getElementById( imgId ),
imgs = new Array(),
count = 0,
filters = Boolean( typeof img.filters != 'undefined' );

for ( var i = 0; i < sources.length ; )
{
imgs[i] = new Image();
imgs[i].src = sources[i];
}

var next = function()
{
if ( filters ) img.filters[0].apply();
img.src = imgs[count++].src;
if ( filters ) img.filters[0].play();
if ( count == imgs.length )
{
count = 0;
}
setTimeout( next, delay );
}

next();
}

All that being said, I didn't test this, but it should work.

Would someone be willing to take a look and see why??? Thanks!!

MNS
MotherNatrsSon
08-31-2003, 10:33 PM
In IE 5.1.7 I get thie error:

null is not an object on this line:

filters = Boolean( typeof img.filters != 'undefined' );


MNS
Graeme Hackston
09-01-2003, 01:36 AM
Hi kindred2

To use this change the image urls to match your images and add or remove images and arrays as needed. I used 2 images for testing but you can add as many as you wish. If you want to use the same filter on all your images you can do so by applying the filter to each array. I've added further instructions in the comments.

Please note, I can't stop this post from putting a space in the 2nd image of the first array. It also wraps that array to a new line and adds a space in front of and wraps the Checkerboard transition in the comments further down. You'll need to correct these things. I can't see any other posting changes but there may be. Please let me know if it doesn't work.

As far as I know it works in IE6, Moz 1.4 and Opera 6 and 7 all on win98. Obviously the transitions only work in IE. It could be altered to work in NN4 but I don't see the point in using depreciated code to appease an almost extinct browser. What I do is put this type of thing in a separate external js file and only serve it to browsers that can handle it. If you need to know how let me know.

P.S. I just wrote this and may add to or correct it. I'll post if I make any changes.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Slide Show</title>
<script type="text/javascript">

//Picture Cube slideshow - By Tony Foster III
//Modifications by JK
//Visit JavaScript Kit (http://javascriptkit.com) for script

//Modified for multiple images by Graeme Hackston


var show1 = new Array('test.jpg','test2.jpg','Slide(slidestyle=HIDE,Bands=1)','img1',1000,3000)

var show2 = new Array('test2.jpg','test.jpg','Fade(Overlap=1.00)','img2',2000,2000)

var show3 = new Array('test.jpg','test2.jpg','Stretch(stretchStyle="PUSH")','img3',3000,1500)

/*
IMAGE ARRAYS

Enter image urls at the beginning of the arrays in the order that you want them to appear.
The forth from last array entry is the transition to use, see info below for details.
The third from last array entry is the image id.
The second last array entry is the delay before running the slide show after the page loads.
The last array entry is the delay between image changes.

NOTE: add or remove array names as required in the function call below:
*/

setArrays(show1, show2, show3)

/*
TRANSITIONS

Most are adjustable, see the url below for working examples.

'Blinds(Bands=10,direction=up)'
'Barn(motion=out,orientation=vertical)'
'Checkerboard(Direction=right,SquaresX=2,SquaresY=2)'
'Fade(Overlap=1.00)'
'GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward)'
'Inset()'
'Iris(irisstyle=PLUS,motion=out)'
'Pixelate(MaxSquare=50)'
'RadialWipe(wipestyle=CLOCK)'
'RandomBars()'
'RandomDissolve()'
'Slide(slidestyle=HIDE,Bands=1)'
'Spiral(GridSizeX=16,GridSizeY=16)'
'Stretch(stretchStyle="PUSH")'
'Strips(motion=leftup)'
'Wheel(spokes=4)'
'Zigzag(GridSizeX=16,GridSizeY=16)'

Choose "Effect Type: Transitions" for examples:
http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm

No changes required beyond this point.
*/


function setArrays() {
allArrays = new Array()
var i, l = setArrays.arguments.length, a, len, z, temp
for (i = 0; i < l; i++) {
a = arguments[i]
len = a.length-4
z = 0
while (z < len) {
temp = a[z]
a[z] = new Image()
a[z].src = temp
z++
}
a[a.length] = 1
allArrays[allArrays.length] = a
}
}


onload = function() {
for (var i = 0, l = allArrays.length, el, a; i < l; i++) {
a = allArrays[i]
el = e(a[a.length-4])
stageShow(a, el.id)
}
doTrans = typeof el.filters != 'undefined' ? 1 : 0
allArrays = null
}


function stageShow(a, el_id) {
window['timer' + el_id] = setTimeout(function(){startShow(a, el_id)}, a[a.length-3])
}


function startShow(a, el_id) {
clearTimeout(window['timer' + el_id])
if (doTrans) {
e(el_id).style.filter = 'progid:DXImageTransform.Microsoft.' + a[a.length-5]
}
playShow(a)
}


function playShow(a) {
var el = e(a[a.length-4])
clearTimeout(window['timer' + el.id])
if (doTrans) {
with (el.filters[0]) {apply(); play()}
}
el.src = a[a[a.length-1]].src
a[a.length-1]++
if (a[a.length-1] == a.length-5) {
a[a.length-1] = 0
}
window['timer' + el.id] = setTimeout(function(){playShow(a)}, a[a.length-2])
}


function e(el_id) {
return document.getElementById(el_id)
}

</script>
</head>
<body>
<img src="test.jpg" id="img1" width="124" height="64">
<img src="test2.jpg" id="img2" width="124" height="64">
<img src="test.jpg" id="img3" width="124" height="64">
</body>
</html>
MotherNatrsSon
09-01-2003, 02:08 AM
Thanks for fixing it Graeme. I appreciate it very much.


:thumbsup:

MNS