Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Help hiding a link in a slideshow?

    Hey - I'm pretty much a Javascript n00b, but I know enough to cut and pasted and do minor edits. I wanted some help with this problem I'm having or really just wanted to know if what I want is possible.

    I would like to have the 'Previous' link hidden on the first image and then the 'Next' link hidden on the last. I wondered if there was some way I could do that based on the number, which I guess would be the ImgNum variable? Here's the code (pulled of Google):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title> </title>
    	<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <style> #content2 {position:absolute; top:110px; left:610px; width:250px; margin-top:0px;} </style>
        <SCRIPT LANGUAGE="JavaScript">
    NewImg = new Array (
    "images/sketch02/1.jpg",
    "images/sketch02/2.jpg",
    "images/sketch02/3.jpg",
    "images/sketch02/4.jpg",
    "images/sketch02/5.jpg",
    "images/sketch02/6.jpg",
    "images/sketch02/7.jpg",
    "images/sketch02/8.jpg",
    "images/sketch02/9.jpg",
    "images/sketch02/10.jpg",
    "images/sketch02/11.jpg",
    "images/sketch02/12.jpg",
    "images/sketch02/13.jpg",
    "images/sketch02/14.jpg",
    "images/sketch02/15.jpg",
    "images/sketch02/16.jpg",
    "images/sketch02/17.jpg",
    "images/sketch02/18.jpg",
    "images/sketch02/19.jpg"
    );
    var ImgNum = 0;
    var ImgLength = NewImg.length - 1;
    
    //Time delay between Slides in milliseconds
    var delay = 3000;
    
    var lock = false;
    var run;
    function chgImg(direction) {
    if (document.images) {
    ImgNum = ImgNum + direction;
    if (ImgNum > ImgLength) {
    ImgNum = 0;
    }
    if (ImgNum < 0) {
    ImgNum = ImgLength;
    }
    document.sketchbook02.src = NewImg[ImgNum];
       }
    }
    function auto() {
    if (lock == true) {
    lock = false;
    window.clearInterval(run);
    }
    else if (lock == false) {
    lock = true;
    run = setInterval("chgImg(1)", delay);
       }
    }
    </script>
    </head>
    
    <body>
        <div id="content1">
    	    <img src="images/sketch02/1.jpg" name="sketchbook02">
            <table cellpadding="3" cellspacing="0" border="0" width="380"><tr>
            <td align="left"><a href="javascript:chgImg(-1)">< previous</a></td>
            <td align="right"><a href="javascript:chgImg(1)">next ></a></td>
            </tr></table>
            <br /><br />
        </div>	
    </body>
    </html>
    Thanks for your help!
    Last edited by Coelocanth; 07-30-2010 at 10:21 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,597
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    It's not too hard to do that, but are you sure you really want to??

    As it is now, when you click left on the 1st image or right on the last one, you "wrap around". Which is actually kind of user-friendly. Might be nice if, at the same time, you had something that said "image 3 of 19" or equivalent, so people would know they wrapped around.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,597
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    By the by, why do you have the "auto( )" code in there if you aren't using it? Don't you want an automatic slide show?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,597
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Also, why are you specifying STRICT html when your code isn't close to complying with strict?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,597
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    But w.t.h. Here:
    Code:
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>edward kersh // work</title>
    	<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <style> #content2 {position:absolute; top:110px; left:610px; width:250px; margin-top:0px;} </style>
    <script type="text/javascript">
    NewImg = new Array (
    "http://www.edwardkersh.com/images/sketch02/1.jpg",
    "http://www.edwardkersh.com/images/sketch02/2.jpg",
    "http://www.edwardkersh.com/images/sketch02/3.jpg",
    "http://www.edwardkersh.com/images/sketch02/4.jpg",
    "http://www.edwardkersh.com/images/sketch02/5.jpg",
    "http://www.edwardkersh.com/images/sketch02/6.jpg",
    "http://www.edwardkersh.com/images/sketch02/7.jpg",
    "http://www.edwardkersh.com/images/sketch02/8.jpg",
    "http://www.edwardkersh.com/images/sketch02/9.jpg",
    "http://www.edwardkersh.com/images/sketch02/10.jpg",
    "http://www.edwardkersh.com/images/sketch02/11.jpg",
    "http://www.edwardkersh.com/images/sketch02/12.jpg",
    "http://www.edwardkersh.com/images/sketch02/13.jpg",
    "http://www.edwardkersh.com/images/sketch02/14.jpg",
    "http://www.edwardkersh.com/images/sketch02/15.jpg",
    "http://www.edwardkersh.com/images/sketch02/16.jpg",
    "http://www.edwardkersh.com/images/sketch02/17.jpg",
    "http://www.edwardkersh.com/images/sketch02/18.jpg",
    "http://www.edwardkersh.com/images/sketch02/19.jpg"
    );
    var ImgNum = 0;
    var ImgLength = NewImg.length - 1;
    
    function chgImg(direction) 
    {
        ImgNum = ImgNum + direction;
        if (ImgNum > ImgLength) {
            ImgNum = 0;
        }
        if (ImgNum < 0) {
            ImgNum = ImgLength;
        }
        document.sketchbook02.src = NewImg[ImgNum];
        document.getElementById("PREV").style.visibility = (ImgNum == 0) ? "hidden" : "visible";
        document.getElementById("NEXT").style.visibility = (ImgNum == ImgLength) ? "hidden" : "visible";
    }
    </script>
    </head>
    <body>
    <img src="http://www.edwardkersh.com/images/header.gif" width="196" height="102" border="0" />
    	<div id="nav">
    	<a href="http://www.edwardkersh.com/wordpress" target="_blank" class="head" >blog</a><br /><br />
    	<p4>work</p4><br />
          <a href="mfaposter.html" >MFA Show Poster</a><br />
          <a href="undead.html" >Undead</a><br />
          <a href="saintarnold.html" >Saint Arnold</a><br />
          <a href="swineflu.html" >Swine Flu</a><br />
          <a href="rollingstone.html">Rolling Stone</a><br />
          <a href="haarp.html" >HAARP</a><br />
          <a href="efreetah.html" >Efreetah</a><br />
          <a href="seniorshow.html" >Com-Des Senior Show</a><br />
          <a href="coasters.html" >Coasters</a><br />
    	  <br />      
          <a href="soapopera.html" >Soap Opera</a><br />
          <a href="malone.html">Malone Polaris</a><br />
    	  <a href="ruston.html" >Cultivating Ruston</a><br />
          <a href="redhot.html" >Red Hot & Rockin</a><br />
    	  <br />      
          <a href="dnd.html" >D&amp;D: Aztalan</a><br />
          <a href="constructivism.html" >Constructivism</a><br />
          <a href="alien.html" >My Teacher is an Alien</a><br />
          <a href="ladybug.html" >Ladybug</a><br />
    	  <br />
          <a href="extinction.html" >Extinction</a><br />
          <a href="loss.html" >Loss</a><br />      
          <a href="laser.html" >Laser Reliefs</a><br />
          <br />
          <a href="sketch02.html" class="marked" >Sketchbook 02</a><br />
          <a href="sketch01.html" >Sketchbook 01</a><br /><br />              
    	<a href="info.html" class="head" >info</a><br />
        
        <div id="content1">
    	    <img src="http://www.edwardkersh.com/images/sketch02/1.jpg" name="sketchbook02">
            <table cellpadding="3" cellspacing="0" border="0" width="380"><tr>
            <td id="PREV" style="visibility: hidden;" align="left"><a href="javascript:chgImg(-1)">< previous</a></td>
            <td id="NEXT" align="right"><a href="javascript:chgImg(1)">next ></a></td>
            </tr></table>
            <br /><br />
        </div>	
        </div>    
        </div>
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Coelocanth (07-30-2010)

  • #6
    New Coder
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I think the answer to most of your questions is in the first post - I'm a n00b. The STRICT compliance was probably in there since I started the document, but I abandoned it and forgot to remove the tag. Same goes for the auto function; it was part of the script I found but I removed that link and failed to remove the rest of the code.

    I get what you're saying about the wrap around, but I felt it could be confusing and I wanted a little more control over the viewer, to make it as if they were actually looking through a book. I will probably implement the image number feature.

    Also, thanks for the code, it is exactly what I needed.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,597
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    Adding the "Image X of Y" is easy.

    Just add the one line in red here to your JS code:
    Code:
    function chgImg(direction) 
    {
        ImgNum = ImgNum + direction;
        if (ImgNum > ImgLength) {
            ImgNum = 0;
        }
        if (ImgNum < 0) {
            ImgNum = ImgLength;
        }
        document.sketchbook02.src = NewImg[ImgNum];
        document.getElementById("PREV").style.visibility = (ImgNum == 0) ? "hidden" : "visible";
        document.getElementById("NEXT").style.visibility = (ImgNum == ImgLength) ? "hidden" : "visible";
        document.getElementById("MSG").innerHTML = "Image " + (ImgNum+1) + " of " + (ImgLength+1);
    }
    And one <td> to your table that has the next and previous links:
    Code:
            <table cellpadding="3" cellspacing="0" border="0" width="380"><tr>
            <td id="PREV" style="visibility: hidden;" align="left"><a href="javascript:chgImg(-1)">< previous</a></td>
            <td id="MSG" style="text-align: center;">Image 1 of 19</td>
            <td id="NEXT" align="right"><a href="javascript:chgImg(1)">next ></a></td>
            </tr></table>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Coelocanth (08-01-2010)

  • #8
    New Coder
    Join Date
    Jul 2010
    Posts
    11
    Thanks
    5
    Thanked 0 Times in 0 Posts
    That's perfect, thanks. Very helpful.


  •  

    Posting Permissions

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