...

View Full Version : Resolved Help hiding a link in a slideshow?



Coelocanth
07-30-2010, 04:10 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.

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


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

Old Pedant
07-30-2010, 09:06 PM
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.

Old Pedant
07-30-2010, 09:06 PM
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?

Old Pedant
07-30-2010, 09:09 PM
Also, why are you specifying STRICT html when your code isn't close to complying with strict?

Old Pedant
07-30-2010, 09:16 PM
But w.t.h. Here:


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

Coelocanth
07-30-2010, 10:20 PM
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.

Old Pedant
07-30-2010, 10:34 PM
Adding the "Image X of Y" is easy.

Just add the one line in red here to your JS 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:


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

Coelocanth
08-01-2010, 04:25 PM
That's perfect, thanks. Very helpful.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum