Hide first & last links in a slideshow-style layout?

**Coelocanth** · 07-30-2010, 04:06 PM

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.

You can see the page in question here. 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!

**jscheuer1** · 07-30-2010, 05:54 PM

Add the highlighted here:

Code:

function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.getElementById('next').style.visibility = ImgNum === ImgLength? 'hidden' : "";
document.getElementById('prev').style.visibility = ImgNum === 0? 'hidden' : "";
document.sketchbook02.src = NewImg[ImgNum];
   }
}

and here:

Code:

    <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 id="prev" style="visibility: hidden;" href="javascript:chgImg(-1)">< previous</a></td>
        <td align="right"><a id="next" href="javascript:chgImg(1)">next ></a></td>
        </tr></table>
        <br /><br />
    </div>

**Coelocanth** · 07-30-2010, 09:15 PM

Hey - thanks so much! That's perfect. I hope it didn't take long.

Thread: Hide first & last links in a slideshow-style layout?

Thread Tools

Search Thread

Hide first & last links in a slideshow-style layout?

Bookmarks

Bookmarks

Posting Permissions