Results 1 to 3 of 3

Thread: Interactive image slideshow w/ text

  1. #1
    Join Date
    Jan 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Interactive image slideshow w/ text

    I am using the Interactive Image Slideshow with Text Description script http://www.dynamicdrive.com/dynamici...interslide.htm, and I was hoping I could get some help with a few minor modifications.

    I would like to have 3 lines for the description, such as:

    Steamboat Relief Carving
    Basswood
    by Joe Blow

    with the italicized bolded font on the title. I have monkeyed around, but cannot figure out how to add extra info on extra lines instead of just inline separated by a comma, or how to add text effects.

    Thanks in advance for any tips!

    Script:
    <p align="center"><input type="button" id="btnPrev" value="<< Previous" onclick="Prev();"> <input type="button" id="bntPlay" value="Play - Stop" onclick="Play()"> <input type="button" id="btnNext" value=" Next >> " onclick="Next();"></p>

    <p align="center"><img id="_Ath_Slide" onload="OnImgLoad()"> </p>

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

    <p align="center">

    <script language="JavaScript1.2">

    /*
    Interactive Image slideshow with text description
    By Christian Carlessi Salvadó (cocolinks@c.net.gt). Keep this notice intact.
    Visit http://www.dynamicdrive.com for script
    */


    g_fPlayMode = 0;
    g_iimg = -1;
    g_imax = 0;
    g_ImageTable = new Array();

    function ChangeImage(fFwd)
    {
    if (fFwd)
    {
    if (++g_iimg==g_imax)
    g_iimg=0;
    }
    else
    {
    if (g_iimg==0)
    g_iimg=g_imax;
    g_iimg--;
    }
    Update();
    }

    function getobject(obj){
    if (document.getElementById)
    return document.getElementById(obj)
    else if (document.all)
    return document.all[obj]
    }

    function Update(){
    getobject("_Ath_Slide").src = g_ImageTable[g_iimg][0];
    getobject("_Ath_FileName").innerHTML = g_ImageTable[g_iimg][1];
    getobject("_Ath_Img_X").innerHTML = g_iimg + 1;
    getobject("_Ath_Img_N").innerHTML = g_imax;
    }


    function Play()
    {
    g_fPlayMode = !g_fPlayMode;
    if (g_fPlayMode)
    {
    getobject("btnPrev").disabled = getobject("btnNext").disabled = true;
    Next();
    }
    else
    {
    getobject("btnPrev").disabled = getobject("btnNext").disabled = false;

    }
    }
    function OnImgLoad()
    {
    if (g_fPlayMode)
    window.setTimeout("Tick()", g_dwTimeOutSec*1000);
    }
    function Tick()
    {
    if (g_fPlayMode)
    Next();
    }
    function Prev()
    {
    ChangeImage(false);
    }
    function Next()
    {
    ChangeImage(true);
    }


    ////configure below variables/////////////////////////////

    //configure the below images and description to your own.
    g_ImageTable[g_imax++] = new Array ("cake.gif", "It's a cake!");
    g_ImageTable[g_imax++] = new Array ("bike.gif", "Bike Rider.");
    g_ImageTable[g_imax++] = new Array ("player.gif", "Soccer Player.");
    g_ImageTable[g_imax++] = new Array ("watch.gif", "Watch Out!!");
    g_ImageTable[g_imax++] = new Array ("hurry.gif", "Hurry Up!");
    //extend the above list as desired
    g_dwTimeOutSec=2

    ////End configuration/////////////////////////////

    if (document.getElementById||document.all)
    window.onload=Play

    </script>
    </p>

    <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
    <a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>

  2. #2
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Normally you can just add the necessary HTML to the text fields like so...
    Code:
    g_ImageTable[g_imax++] = new Array ("hurry.gif", "<B><I>Hurry Up!</I></B><BR />A guy running<BR />with a briefcase");

  3. #3
    Join Date
    Jan 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    After fiddling around some more, I finally discovered exactly what you suggested, Chinchilla2! I had tried putting the HTML tags in before & it didn't work because I was separating stuff with " ". As soon as I took them out - bingo!

    Thanks for the help, though!

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
  •