www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to link images in slide show?

  1. #1
    Join Date
    Mar 2003
    Location
    Florida
    Posts
    2

    Question How to link images in slide show?

    I have used the slide show HTML on my site but I can't get the images to link to it. All I get is a square with a x in it.
    Can somebody help me if they have used the slide show HTML?Do I have to make a webpage with just my pictures I am going to use for the slide show?
    http://hometown.aol.com/langcnn/myhomepage/index.html

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    All I get is a square with a x in it.
    That means the browser cannot find the images where you told it to look. Make sure that the images are in the directory that is in the HTML (or fix the HTML to point to the images).

  3. #3
    Join Date
    Mar 2003
    Location
    Florida
    Posts
    2

    link pictures?

    Ok I have the images but the pictures are the size of my whole screen, I am new to all this HTML, Now I can't figure out how to change the size, I don't see size anywhere in the code.I got the code for the slide show off of this website, so if you can look at the slide show code here and tell me how to change the size of the images, I would greatly appreciate , THANKS

    Here is the link to the slide show
    http://javascript.internet.com/misce...slideshow.html
    Last edited by kevin32024; 03-27-2003 at 03:45 PM.
    http://hometown.aol.com/langcnn/myhomepage/index.html

  4. #4
    Join Date
    May 2003
    Posts
    257

    Slide Show Image Link

    1. The following is a COMPLETE HTML document which contains a slideshow with user selectable timing delay, and a pause feature, for use with 640x480 .jpg files. Easily modifiable!
    Use NotePad to create a file that contains the following:

    <html xmlns:t ="urn:schemas-microsoft-com:time" >

    <HEAD>
    <style>.time { behavior: url(#default#time2) }
    </style>
    <?IMPORT namespace="t" implementation="#default#time2">
    <TITLE>Photo Album</TITLE>

    </head>

    <script language="javascript">

    var setDefaultErrImg="BlankMsg.jpg";
    var setDefaultErrTxt="Blank";
    var empty = 0;
    var Nx = 0;
    nextimage = new Image();
    nextimage.src = " ";
    var userdelay = "";
    var tick = ""
    var msg = " ";
    var count = 0;
    var savecount = 0;
    var imgcount = 0;


    function haltshow(){
    if (savecount == 0){savecount = count;
    count = imgcount};
    }


    function displayit(){
    window.open(nextimage.src,"SlideShow","toolbar=0,status=1,width=640,height= 480,top=0,left=0").status = "This is " + count + " of " +imgcount;

    }

    function getnextimage() {
    if (count < imgcount){++count};
    nextimage.src = document.images[count-1].src;
    displayit();
    if (count < imgcount){countdown()};
    }

    function countdown(){
    if (tick > 0){msg = tick} else{msg = "Fetching Next Image..."};
    if (tick >= 0){tick = tick -1
    window.status = msg;
    if (savecount > 0){tick = userdelay -1;runshow()}
    else{setTimeout("countdown()", 1000)}; }
    else{tick = userdelay -1;
    runshow(); }

    }

    function runshow() {
    if (count < imgcount){getnextimage()};
    if (savecount > 0){window.status="The Slideshow Is Paused at Image "
    +savecount + " of " +imgcount + "."}
    if (count == imgcount){convert();
    if (savecount > 0){count=savecount-1;
    savecount=0
    window.open("pausemsg.html",
    "SlideShow");}
    else{count=0
    window.status="The Slideshow Is Complete."};
    }

    }

    function initShow(ImgCnt,Blank,Dn){
    imgcount = ImgCnt-Blank;
    userdelay = Dn;
    tick = userdelay-1;
    convert();
    runshow();
    }





    function convert() {
    var inputColl = document.all.tags("INPUT");
    if (inputColl!=null && inputColl.length>0) {
    var range = inputColl[0].createTextRange();
    if (savecount > 0){range.text = "Resume"}
    else{range.text ="Start Slideshow"};
    }
    }


    function FillBlank(n){
    document.images[n].src = setDefaultErrImg;
    document.images[n].setAttribute("alt",setDefaultErrTxt);
    ++empty
    }

    function statusmsg(){
    window.status="Done"
    }


    function getInterval(){
    if (document.IGroup.interval[0].checked=="1"){Nx = document.IGroup.interval[0].value};
    if (document.IGroup.interval[1].checked=="1"){Nx = document.IGroup.interval[1].value};
    if (document.IGroup.interval[2].checked=="1"){Nx = document.IGroup.interval[2].value};
    if (document.IGroup.interval[3].checked=="1"){Nx = document.IGroup.interval[3].value};
    if (document.IGroup.interval[4].checked=="1"){Nx = document.IGroup.interval[4].value};
    if (document.IGroup.interval[5].checked=="1"){Nx = document.IGroup.interval[5].value};
    if (document.IGroup.interval[6].checked=="1"){Nx = document.IGroup.interval[6].value};
    if (document.IGroup.interval[7].checked=="1"){Nx = document.IGroup.interval[7].value};
    if (document.IGroup.interval[8].checked=="1"){Nx = document.IGroup.interval[8].value};
    }

    function startShow(){
    getInterval()
    initShow(PixCount,empty,Nx);
    }

    </script>

    </head>

    <BODY onLoad="statusmsg()" vlink="Gray" alink="Lime" BGColor="lightyellow">
    <center>
    <name ="top"><font face="arial,helvetica" color="Blue" size="5">Click On An Image To Enlarge It</font>
    <br>

    <t:seq repeatCount="indefinite">
    <tar>
    <div class="time" begin="0" dur="3" timeAction="display">Doing This Will RESET The Slideshow</div>
    </tar>
    <div class="time" dur="3" timeAction="display">- ! -</div>
    </tar>
    </t:seq>

    <hr>
    </center>

    <Table width="650" Border="0" Align="center" Cellspacing="0" Cellpadding="0" >
    <TR>
    <TD align="center" BGCOLOR="orange">
    <h3>Use The <font color="Red">BACK</font> Button To Return<br>
    From The Full View</h3>
    </TD>
    <TD align="center" BGColor="tan">
    <input type="button" name="null" value="Start Slideshow" onClick="startShow()"/>
    </TD>
    <TD width="3%" align="right" BGColor="yellow">
    <input type="image" name="pausebtn" src="pausebtn.gif"
    onclick="haltshow()" border="0" />
    </TD>
    </TR>
    </Table>

    <form name="IGroup">
    <Table Width="500" align="center" Border="0" BGColor="LightBlue" Border="1">
    <TR>
    <TD>
    Slideshow Interval:
    <TD>
    <input type="radio" name="interval" value="2">2
    </TD>
    <TD>
    <input type="radio" name="interval" value="3">3
    </TD>
    <TD>
    <input type="radio" name="interval" value="4" >4
    </TD>
    <TD>
    <input type="radio" name="interval" value="5" checked>5
    </TD>
    <TD>
    <input type="radio" name="interval" value="6">6
    </TD>
    <TD>
    <input type="radio" name="interval" value="7">7
    </TD>
    <TD>
    <input type="radio" name="interval" value="8">8
    </TD>
    <TD>
    <input type="radio" name="interval" value="9">9
    </TD>
    <TD>
    <input type="radio" name="interval" value="10">10
    </TD>
    </TR>
    </Table>
    </form>


    <TABLE WIDTH="650" BORDER="2" ALIGN="center" CELLSPACING="2" CELLPADDING="1"
    HEIGHT="113">
    <!-- Row 1 -->
    <TR>
    <TD WIDTH="20%">
    <a href="1.jpg" Name="Viewer1"><img src="1.jpg" onError="FillBlank(0)" width="120" height="90" alt ="Click to enlarge"
    /></a></TD>
    <TD WIDTH="20%">
    <a href="2.jpg" Name="Viewer1"><img src="2.jpg" onError="FillBlank(1)" width="120" height="90" alt ="Click to enlarge" />
    </a></TD>
    <TD WIDTH="20%">
    <a href="3.jpg" Name="Viewer1"><img src="3.jpg" onError="FillBlank(2)" width="120" height="90" alt ="Click to enlarge" />
    </a></TD>
    <TD WIDTH="20%">
    <a href="4.jpg" Name="Viewer1"><img src="4.jpg" onError="FillBlank(3)" width="120" height="90" alt ="Click to enlarge" />
    </a> </TD>
    <TD WIDTH="20%">
    <a href="5.jpg" Name="Viewer1"><img src="5.jpg" onError="FillBlank(4)" width="120" height="90" alt ="Click to enlarge"
    /></a> </TD>
    </TR>

    <!-- Row 2 -->
    <TR>
    <TD WIDTH="20%">
    <a href="6.jpg" Name="Viewer1"><img src="6.jpg" onError="FillBlank(5)" width="120" height="90" alt ="Click to enlarge"
    /></a> </TD>
    <TD WIDTH="20%">
    <a href="7.jpg" Name="Viewer1"><img src="7.jpg" onError="FillBlank(6)" width="120" height="90" alt ="Click to enlarge" />
    </a></TD>
    <TD WIDTH="20%">
    <a href="8.jpg" Name="Viewer1"><img src="8.jpg" onError="FillBlank(7)" width="120" height="90" alt ="Click to enlarge" />
    </a></TD>
    <TD WIDTH="20%">
    <a href="9.jpg" Name="Viewer1"><img src="9.jpg" onError="FillBlank(8)" width="120" height="90" alt ="Click to enlarge" />
    </a> </TD>
    <TD WIDTH="20%">
    <a href="10.jpg"Name="Viewer1"><img src="10.jpg" onError="FillBlank(9)" width="120" height="90" alt ="Click to enlarge"
    /></a> </TD>
    </TR>

    <!-- Row 3 -->
    <TR>
    <TD WIDTH="20%">
    <a href="11.jpg"Name="Viewer1"><img src="11.jpg" onError="FillBlank(10)" width="120" height="90" alt ="Click to enlarge"
    /></a> </TD>
    <TD WIDTH="20%">
    <a href="12.jpg"Name="Viewer1"><img src="12.jpg" onError="FillBlank(11)" width="120" height="90" alt ="Click to enlarge" />
    </a></TD>
    <TD WIDTH="20%">
    <a href="13.jpg"Name="Viewer1"><img src="13.jpg" onError="FillBlank(12)" width="120" height="90" alt ="Click to enlarge" />
    </a></TD>
    <TD WIDTH="20%">
    <a href="14.jpg"Name="Viewer1"><img src="14.jpg" onError="FillBlank(13)" width="120" height="90" alt ="Click to enlarge" />
    </a> </TD>
    <TD WIDTH="20%">
    <a href="15.jpg"Name="Viewer1"><img src="15.jpg" onError="FillBlank(14)" width="120" height="90" alt ="Click to enlarge"
    /></a> </TD>
    </TR>
    </TABLE>

    <Script language="JavaScript">
    var PixCount = document.images.length;
    </Script>

    </Body>
    </HTML>

    2. Save the file with a name of your choosing, making sure to give it the .html extension.

    3. Use NotePad to create an HTML file which contains the following:

    <HTML>
    <BODY onLoad="ToFront()">
    <Img SRC = "pausemsg.gif">
    <script language="javascript">
    function ToFront(){
    window.focus();
    }
    </script>

    </Body>
    </HTML>

    4. Save this file as PauseMsg.html.

    5. There are three files attached:

    1. 640x480 image named PauseMsg.gif
    2. PauseBtn.gif
    3. BlankMsg.jpg

    All of these are required for the SlideShow to function properly.

    6. Copy your photos to the same folder that contains the above files, and giving them consecutive names, e.g. 1.jpg, 2.jpg, etc. You must not skip any number, and you must not use a leading zero.

    7. Use it!

    mjh.lkwd@highstream.net

    Sorry, no files attached, but you get the idea.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles