Crossbrowser DHTML slideshow 1

dynamicwebguy · Feb 9, 2001

Hi --

I am working on a DHTML slideshow for my gallery... I would like to take the script from

http://www.dynamicdrive.com/dynamicindex14/dhtmlslide.htm

and add the ability to include a DIV that includes text and html describing each current image.

Example:

[IMAGE 1]

|This is image 1|
|It's a pic of a|
|cool lookin car|

<-Prev Next->

Please see what you can do...

-- Dave, dynamicnet

unicorn11 · Feb 9, 2001

Check bartta.com Unicorn11
abhishek@tripmedia.com

[red]Luck is not chance, it's toil; fortune's expensive
smile is earned.[red]

unicorn11 · Feb 9, 2001

sorry it is bratta.com

Regards Unicorn11
abhishek@tripmedia.com

[red]Luck is not chance, it's toil; fortune's expensive
smile is earned.[red]

dynamicwebguy · Feb 10, 2001

Hi -

Thanks for the tip, some cool stuff there... though I was unable to find what I was looking for there. I searched the forum there as well, where I found a number of slideshow scripts, but none that

1) work in all major browsers: NS4, NS6, IE4, IE5
2) allow the inclusion of additional html/text (via div or other method)... i.e. a table beneath the image with info about that specific image, changes to new data with new image etc.

Please let me know if you can help make this, or point me to a finished script...
Also, any programmers-for-hire, if you can do this for me let me know and we can work something out.

Thanks,
Dave

Rydel · Feb 10, 2001

dynamicnet, if you already posses a dhtml script for slide shows, you can easily update it to display the captions as well. what's the problem? or you don't understand javascript? ---

http://www.geocities.com/rydel23/

---

dynamicwebguy · Feb 10, 2001

Thats exactly the problem hehe.... I'm very much not an expert with Javascript - good enough to edit some things on premade scripts, but when it comes to adding in new things I fall short there. Also, I have no idea how to update a script that works in IE4+ and NS4 to also work in NS6 (which is the main problem with most of the slideshows I have found).
I'm sure this can be done in Flash also, but I'm not too good at that either hehe (mostly I work with layout and design).

So that said, pleeease help hehe. If you can take "any" slideshow script and make it do all of the following I would be most grateful:

1) Works equally in IE4, IE5, NS4, and NS6
2) Allows inclusion of extra "html" content along with each consecutive image (see ascii diagram in first post)
3) Has Previous and Next buttons or text links

Thanks in advance for your help. I've worked all day for days on end trying on my own and I give up.

-- Dave, dynamicnet

GIGN · Feb 10, 2001

Well, aparently that one you want - has most of that stuff - the next/prev buttons - and is compliant with all versions of both Browsers.

So the message thing involves having a div, or span which you write new text to using the innerHTML property in IE, and in NN4 apparently this works:

document.layers.divName.document.write()

but I have yet to get that to work! Then you set up the function to change the content - depending in the photo - a good way is to put the strings all in an array -where the indices match those of the relevant photo.

"Alright whatever man, I'll hook up the hair, but I aint touchin the ring...Cause I'm still a pla--yer"

dynamicwebguy · Feb 10, 2001

Thanks for far

Keep the info comin... and maybe a finished script hehe

-- Dave, dynamicnet

GIGN · Feb 11, 2001

Try this out - I modified that script to inlude a caption.
The only worry is getting NS4 to write, I can't get document.write to work. But the rest does, this just gives you the idea anyway.
I have used a table cell to write the captions to - and highlighted in green the NS problem...
The captions are written using innerHTML - so you can use any HTML tags to format them individually if you wish.

<html>

<head>
<script language="JavaScript1.1">

/*
DHTML slideshow script-
© Dynamic Drive (

http://www.dynamicdrive.com)

For full source code, usage terms, and 100's more DHTML scripts, visit

http://dynamicdrive.com

*/
var captions = new Array();
var photos=new Array();
var photoslink=new Array();
var which=0;
//define the captions here, keeping them with matching array index
captions[0] = "This is my first image.";
captions[1] = "This is my second image.";
captions[2] = "my hat here";
captions[3] = "a lightbulb.";
captions[4] = "This is the man in the moon.";
//define images. You can have as many as you want. Images MUST be of the same dimensions (for NS's sake)
photos[0]="../Graphics/objects/bltsandwich1b.gif"
photos[1]="../Graphics/objects/book1b.gif"
photos[2]="../Graphics/objects/hatw.gif"
photos[3]="../Graphics/objects/lightbulb1b.gif"
photos[4]="../Graphics/objects/maninthemoon1b.gif"

//Specify whether images should be linked or not (1=linked)
var linkornot=0

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]=""
photoslink[1]=""
photoslink[2]=""
photoslink[3]=""
photoslink[4]=""

//do NOT edit pass this line

var preloadedimages= new Array()
for (var j=0;j<photos.length;j++){
preloadedimages[j]=new Image()
preloadedimages[j].src=photos[j]
}

function applyeffect(){
if (document.all){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}

function playeffect(){
if (document.all)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}

function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
if(document.all){document.all['captionWindow'].innerHTML = captions[which];}
else if(document.getElementById){var caption = document.getElementById('captionWindow');
caption.innerHTML = captions[which];
}
else if(document.layers){document.layers['captionWindow'].document.write(captions[which])}
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which];
if(document.all){document.all['captionWindow'].innerHTML = captions[which];}

else if(document.getElementById){var caption = document.getElementById('captionWindow');
caption.innerHTML = captions[which];
}
else if(document.layers){document.layers.captionWindow.document.write(captions[which])}
playeffect()
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}

</script>

<title>DHTML slide show with captions</title>
</head>
<body style='font-family:Tahoma;background-color:gray;color:white'>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" colspan="2" height="22"><center>
<script>

if (linkornot==1)document.write('<a href="javascript:transport()">')

document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')

if (linkornot==1) document.write('</a>')
</script>
</center></td>
</tr>
<tr>

<td width="100%" height="21" colspan=2 id='captionWindow'>This is picture one</td>

</tr>
<tr>
<td width="50%" height="21"><p align="left"><a href="javascript:void(0)" onClick="backward();return false">Previous Slide</a></td>
<td width="50%" height="21"><p align="right"><a href="javascript:void(0)" onClick="forward();return false">Next Slide</a></td>
</tr>
</table>

<p align="center"></p>
</body>
</html>

Like it says, make sure the images are the same size, or NS4 will stretch/shrink them.
You just need to fill in the captions, and put in your images, and find out how to write to a table cell in NS4.

b² - benbiddington@surf4nix.com
"Alright whatever man, I'll hook up the hair, but I aint touchin the ring...Cause I'm still a pla--yer"

dynamicwebguy · Feb 11, 2001

Cool! looks good so far...
Well I gave it a spin, and I see what you mean about NS4.
Let me know if you or anyone figures that part out (like I said I'm pretty "green" at this and probably won't get it right on my own in a million years hehehe - I get the basics, but when it gets hairy, lets just say I need more practice lol).

I changed the table to:


<td width="100%" height="21" colspan=2 id='captionWindow'><script>document.write(''+captions[0]+'')</script></td>


Now it prints captions[0] first instead of that placeholder text.

Thanks for the HTML formatting abilities for the captions (in IE and NS6 of course hehe)... can't tell you how much hair I must have pulled out trying to figure that out hehe
If we can get NS4 working we'll have a masterpiece hehe.

Keep up the awesome work, I really appreciate the help

-- Dave, dynamicnet

GIGN · Feb 11, 2001

Well this comes down to that we can only seem to write to something which is either absolutely or relatively positioned, and we must close the output stream to the document afterwards - something like:

function changeText(){
if(document.layers){
document.layers['name'].document.write('new text or HTML');
document.close();
}
}

You will just have to fiddle around with the positioning to get it to look right - but it works.So it becomes now:
...
else if(document.layers){document.layers.captionWindow.document.write(captions[which]);
document.close()}
...

and
...

<td width="100%" height="21" colspan=2 id='captionWindow' style="position:absolute"><script>document.write(''+captions[0]+'')</script></td>

...

another thing to try if you don't want to have to position, is perhaps writing some actual <layer> tags, if Netscape, and see if that works.

b² "Alright whatever man, I'll hook up the hair, but I aint touchin the ring...Cause I'm still a pla--yer"

dynamicwebguy · Feb 11, 2001

Thanks for the help bangers

I've got it "just about" perfect.
Take a look at

http://www.crossdesign.net/portfolio.htm

One thing I was curious about... can you modify the transport() function to make the image links (photoslink) open in a new window rather than the current one? I tried target="_blank" in the anchor tag, but obviously that didn't work.

Thanks!

-- Dave, dynamicnet

GIGN · Feb 12, 2001

This is the idea for new windows.

function transport(){
var newWin = open(photoslink[which],'nameForTarget','attributes')

}

You may have to tweak it if the photoslink[which] isn't being passed. see faq216-329 for window attributes.
b² - benbiddington@surf4nix.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Crossbrowser DHTML slideshow 1

dynamicwebguy

Programmer

unicorn11

Programmer

unicorn11

Programmer

dynamicwebguy

Programmer

Rydel

Programmer

dynamicwebguy

Programmer

GIGN

Programmer

dynamicwebguy

Programmer

GIGN

Programmer

dynamicwebguy

Programmer

GIGN

Programmer

dynamicwebguy

Programmer

GIGN

Programmer

Similar threads

Part and Inventory Search

Sponsor