Results 1 to 8 of 8

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

  1. #1
    Join Date
    Nov 2004
    Location
    Scotland
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:
    Code:
    <img id="btnPrev" src="previous.gif" onclick="Prev();">
    could replace:
    Code:
    <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':
    Code:
    <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:
    Code:
    <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:
    Code:
    <style type="text/css">
    .desc {
    font-family:tahoma;
    }
    </style>
    You can put whatever style declarations you like in there.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2004
    Location
    Scotland
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Nov 2004
    Location
    Scotland
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Nov 2004
    Location
    Scotland
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!)

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:
    HTML Code:
    <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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Nov 2004
    Location
    Scotland
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •