How to customise '..i/a Slideshow with Text Description'?

[atomic-blonde]

I am using 'Interactive Image Slideshow with Text Description' By Christian Carlessi Salvadó and all is well so far.
However, I'd like to customise it slightly to fit in better with my site.
I've managed to stop the actual slideshow so it can only be used manually, now I'd like to find out the following:-

a) Is it possible to replace the grey <<previous & next>> buttons with some of my own graphics (maybe even have rollover effects also?)

b) How do I change the colour and font of the 'Description' etc text?

The original script can be found here:-
http://www.dynamicdrive.com/dynamici...interslide.htm

Hopefully these changes can be easily resolved, with your help of course!
Many thanks folks!

[jscheuer1]

a) Yes, the key thing is that these graphics or whatever you use to replace the gray buttons with, must have the same onclick event and the same id as the button that they are replacing, for example:

<img id="btnPrev" src="previous.gif" onclick="Prev();">

could replace:

<input type="button" id="btnPrev" value="<< Previous" onclick="Prev();">

You can add any rollover effects you like.

b) Yes, here is where the description 'lives':

<p align="center"><b>Description:</b> <SPAN id="_Ath_FileName"> </SPAN> <br>
<b>Number of Pictures: <SPAN id="_Ath_Img_X"></SPAN> of <SPAN id="_Ath_Img_N"></SPAN></b></p>

I just gave it a class:

<p class="desc" align="center"><b>Description:</b> <SPAN id="_Ath_FileName"> </SPAN> <br>
<b>Number of Pictures: <SPAN id="_Ath_Img_X"></SPAN> of <SPAN id="_Ath_Img_N"></SPAN></b></p>

and then added this style section to the head:

<style type="text/css">
.desc {
font-family:tahoma;
}
</style>

You can put whatever style declarations you like in there.

[atomic-blonde]

Sorry for taking so long to get back to you, jscheuer1...had some cable repair work going on in our area and couldn't get online! All's well now, thank goodness.

I haven't tried your js advice yet but will do tonight so here's hoping! I'll let you know how it goes.

And thanks sooo much for your prompt help.

[atomic-blonde]

Thank you sooo much js..
Your advice was really good and I have things looking a bit more the way I'd like!

However (sorry to bug you again) there's just one more little thing...

I've made the viewer display the images in the middle with the arrow buttons (previous and next) above and text description below.
To view my image show in the best way (the centre of the window) I have to scroll to position it.
That's ok until I hit the 'next' or 'previous' buttons - then the page jumps back to the top and I'm left with half an image at the bottom of the screen and text description nowhere to be seen! I have to scroll back and go through this for every image which is a bit of a pain.

Do you know how I can keep my image viewer in full view?

[jscheuer1]

The demo doesn't do that so, if you could post a link to a test page, I'll see what is causing that.

[atomic-blonde]

http://www.c-c-p-c.net/photos_june2005.htm

Above is a link to the page. For some the pics havent appeared yet!
Anyhoo...there's enough there to show you the problem.
I won't be able to get back to you til tomorrow coz it's 1.45am now - bedtime for me!
See what you think (and many many thanks yet again!)

[jscheuer1]

The problem is as I suspected but couldn't be sure without seeing it. In addition to the change I recommended, you made the button/images links. Using href="#" for those links causes the page to reload from the top. Either get rid of the link and apply the rollover effects directly to the image/buttons or add 'return false;' to the onclick event. Also, if you add a title to the images, they will give the tool tip in other browsers (alt only behaves that way in IE). So, I'd suggest this:

<p align="center">
<a href="#" OnMouseOut="na_restore_img_src('image2', 'document')" 
OnMouseOver="na_change_img_src('image2', 'document', 'grfx/arrow-prev-blu.gif', true);">
<img id="btnPrev" src="grfx/arrow-prev-red.gif" onclick="Prev();return false;" 
title="Previous" alt="Previous Button" name="image2" border="0" width="37" height="35">
</a>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a OnMouseOut="na_restore_img_src('image3', 'document')" 
OnMouseOver="na_change_img_src('image3', 'document', 'grfx/arrow-mid-blu.gif', true)" 
href="photos_main.htm"><img src="grfx/arrow-mid-red.gif" border="0" alt="Back to Photo Menu" 
name="image3" width="37" height="35">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" OnMouseOut="na_restore_img_src('image1', 'document')" 
OnMouseOver="na_change_img_src('image1', 'document', 'grfx/arrow-next-blu.gif', true);">
<img id="btnNext" src="grfx/arrow-next-red.gif" onclick="Next();return false;" title="Next" 
alt="Next Button" name="image1" border="0" width="37" height="35"></a></p>

as a drop in replacement for your existing controls. Now, your images are not showing up because they are not in the:

http://www.c-c-p-c.net/../gary/pics/

directory (as indicated by your code) but in the:

http://www.c-c-p-c.net/pics/

directory. So (for your demo page's location on the server) you could use this type of path for the images:

g_ImageTable[g_imax++] = new Array ("pics/logo_deadpets.gif", "Dead Pets");
g_ImageTable[g_imax++] = new Array ("pics/pics_deadpets-01.jpg", "");
g_ImageTable[g_imax++] = new Array ("pics/pics_deadpets-02.jpg", "");
g_ImageTable[g_imax++] = new Array ("pics/pics_deadpets-03.jpg", "");
g_ImageTable[g_imax++] = new Array ("pics/pics_deadpets-04.jpg", "");
g_ImageTable[g_imax++] = new Array ("pics/pics_deadpets-05.jpg", "");
g_ImageTable[g_imax++] = new Array ("pics/pics_deadpets-06_crowd.jpg", "");

etc . . .

except for the very last image, '_blank.jpg', which appears to be missing altogether.

[atomic-blonde]

You've done it yet again John!
That's what I wanted!

Re- missing images, it wasn't til I switched the pc off last night that I realised what the problem was (path name) so I got onto that first thing today (without your help believe it or not!)

Now I can get on with the other galleries.
You have been amazing, really you have - well appreciated.
Thanks again and again!