Forum Moderators: open

Message Too Old, No Replies

I need help on a javascript slideshow

Multi-Topic - Multiple Images - Varied Slide size

         

Micario

6:43 pm on Aug 18, 2004 (gmt 0)



I would like to have multiple slideshows on my page, that view in a table on the same page. I will list the following requirements.

A. Very limited budget - on SSI
B. Multiple Topics (shown with Links that starts the Slideshow.) I will have a list of slideshows to view.
C. Multiple Images that come from web sites. They will be of various sizes and configurations
D. Ability to set the max-width and max-height so as to align in a table. Must autosize the slide to fit within the table. The table would probably be set to about a 900 width by a 400-500 height.
E. Centering of slides in the table regardless of image size.
F. Configurable borders around the slide
G. Accompanying Text Description above or below each slide, also centered.

I don't want much do I?

I've found several scripts but none that do everything. I can email or private message my web page so that you can see what I'm trying to do. The page is also listed in my profile. The script I'm using there references configurable player and I've centered it, however it's tied to one size image or won't center.

What little I know of javascript is I am learning from modifying scripts to see what they do.

Hope Someone can help - Thanks

Travelin Mac

Peb0

6:46 pm on Aug 18, 2004 (gmt 0)

10+ Year Member



No promises, but let me take a look.

Peb0

Cochrane

12:20 pm on Sep 3, 2004 (gmt 0)

10+ Year Member



Micario:
Here's something you might try:
<HTML>
<Head>
<Script Language=JavaScript>

var slideShowSpeed1 = 5000;
var slideShowSpeed2 = 5000;
var slideShowSpeed3 = 5000;
var crossFadeDuration1 = 3;
var crossFadeDuration2 = 3;
var crossFadeDuration3 = 3;

var currIMG1 = 0;
var currIMG2 = 0;
var currIMG3 = 0;

var Pic1 = new Array()
Pic1[0] = 'slideshow1_1.jpg'
Pic1[1] = 'slideshow1_2.jpg'
Pic1[2] = 'slideshow1_3.jpg'

var Caption1 = new Array()
Caption1[0] = "Some Text";
Caption1[1] = "Some Text";
Caption1[2] = "Some Text";

var nPix1 = Pic1.length-1;
var preLoad1 = new Array()
for (i=0; i<nPix1+1; i++)
{
preLoad1[i] = new Image()
preLoad1[i].src = Pic1[i]
}

var Pic2 = new Array()
Pic2[0] = 'slideshow2_1.jpg'
Pic2[1] = 'slideshow2_2.jpg'
Pic2[2] = 'slideshow2_3.jpg'

var Caption2 = new Array()
Caption2[0] = "Some Text";
Caption2[1] = "Some Text";
Caption2[2] = "Some Text";

var nPix2 = Pic2.length-1;
var preLoad2 = new Array()
for (n=0; n< nPix2+1; n++)
{
preLoad2[n] = new Image()
preLoad2[n].src = Pic2[n]
}

var Pic3 = new Array()
Pic3[0] = 'slideshow3_1.jpg'
Pic3[1] = 'slideshow3_2.jpg'
Pic3[2] = 'slideshow3_3.jpg'

var Caption3 = new Array()
Caption3[0] = "Some Text";
Caption3[1] = "Some Text";
Caption3[2] = "Some Text";

var nPix3 = Pic3.length-1;
var preLoad3 = new Array()
for (t=0; t<nPix3+1; t++)
{
preLoad3[t] = new Image()
preLoad3[t].src = Pic3[t]
}

function runSlideShow1(){
Cap1.innerHTML = Caption1[currIMG1];
SlideShow1.style.filter="blendTrans(duration=2)";
SlideShow1.style.filter="blendTrans(duration=crossFadeDuration1)";
SlideShow1.filters.blendTrans.Apply();
SlideShow1.src = preLoad1[currIMG1].src;
SlideShow1.filters.blendTrans.Play();
currIMG1++
if (currIMG1 > (nPix1)){currIMG1=0}
setTimeout('runSlideShow1()',slideShowSpeed1);
}

function runSlideShow2(){
Cap2.innerHTML = Caption2[currIMG2];
SlideShow2.style.filter="blendTrans(duration=2)";
SlideShow2.style.filter="blendTrans(duration=crossFadeDuration2)";
SlideShow2.filters.blendTrans.Apply();
SlideShow2.src = preLoad2[currIMG2].src;
SlideShow2.filters.blendTrans.Play();
currIMG2++
if (currIMG2 > (nPix2)){currIMG2=0}
setTimeout('runSlideShow2()',slideShowSpeed2);
}

function runSlideShow3(){
Cap3.innerHTML = Caption3[currIMG3];
SlideShow3.style.filter="blendTrans(duration=2)";
SlideShow3.style.filter="blendTrans(duration=crossFadeDuration3)";
SlideShow3.filters.blendTrans.Apply();
SlideShow3.src = preLoad3[currIMG3].src;
SlideShow3.filters.blendTrans.Play();
currIMG3++
if (currIMG3 > (nPix3)){currIMG3=0}
setTimeout('runSlideShow3()',slideShowSpeed3);
}

</Script>

</Head>
<Body>
<Table>
<TR>
<TD align=center>
<img src="slideshow1_1.jpg" id='SlideShow1' width=150 height=150><br>
<Span id=Cap1></Span>
</TD>
</TR>
<TR>
<TD align=center>
<img src="slideshow2_1.jpg" id='SlideShow2' width=150 height=150><br>
<Span id=Cap2></Span>
</TD>
</TR>
<TR>
<TD align=center>
<img src="slideshow3_1.jpg" id='SlideShow3' width=150 height=150><br>
<Span id=Cap3></Span>
</TD>
</TR>
</Table>
<Script>
runSlideShow1();
runSlideShow2();
runSlideShow3();
</Script>
</Body>
</HTML>