Menu
Hi all, I’ve been messing around with a simple javascript slideshow (for a while), trying add the option to skip to a certain image in the array by way of thumbnails. Along with this option, i would like to have a counter that displays which image in the array the user is looking at. This is the code i have so far. **note:included is also a code that WORKS that makes text appear when the user clicks on a thumbnail*
[code=html]<SCRIPT LANGUAGE=”JavaScript”>
<!–slideshow1–!>
NewImg = new Array (
“images/39steps/01.jpg”,
“images/39steps/02.jpg”,
“images/39steps/03.jpg”,
“images/39steps/04.jpg”,
“images/39steps/05.jpg”,
“images/39steps/06.jpg”,
“images/39steps/07.jpg”,
“images/39steps/08.jpg”,
“images/39steps/09.jpg”,
“images/39steps/10.jpg”,
“images/39steps/11.jpg”,
“images/39steps/12.jpg”,
“images/39steps/13.jpg”,
“images/39steps/14.jpg”,
“images/39steps/15.jpg”,
“images/39steps/16.jpg”,
“images/39steps/17.jpg”,
“images/39steps/18.jpg”,
“images/39steps/19.jpg”,
“images/39steps/20.jpg”
);
var ImgNum = 0;
var ImgLength = NewImg.length – 1;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
}
}
<!–end slideshow–!>
<!–this is the code i made up to have it skip, it doesn’t actually change the order of the array, just makes it look like it has changed–!>
function jump(ImgNum) {
document.slideshow.src = NewImg[ImgNum];
}
<!–end fake skipping code–!>
</script>
<script type=”text/javascript”>
function openContentIncontent(whichParagraph)
{
clearcontent();
var p = document.getElementById(whichParagraph);
p.style.display=”inline”;
clearPreview();
}
function clearcontent()
{
var content = document.getElementById(‘content’);
var paragraphs = content.childNodes;
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++)
if(paragraphs[i].tagName == ‘P’)
paragraphs[i].style.display = “none”;
}
</script>
</head>
and here is my html (part of it)
[code=html]<body onLoad=”openContentIncontent(‘text1’)”>
<div id=”maincontainer”>
<div id=”content”>
<p id=”text1″><u>THE 39 STEPS</u><br /><br />
This is a show about showin up, weldin ****, and having a good time. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dui metus, sagittis non scelerisque sit amet, dictum id justo. Aliquam luctus tempor metus at sagittis. Proin varius, tellus commodo auctor iaculis, nulla nunc laoreet arcu, at rhoncus nisl nisl porta mauris. Donec vel nibh ac massa condimentum porta eu facilisis lacus. Morbi lobortis accumsan arcu vitae volutpat. Donec euismod malesuada urna, non rhoncus quam aliquet non. Proin convallis, est in vulputate molestie, nisl nisi laoreet neque, tincidunt pellentesque sapien nibh et dolor.
<br />
<p id=”text2″>OTHERSTUFF HERE IT IS LOOK AT ME I”M HERE AND I”M READABLE! CHECK THIS OUT! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dui metus, sagittis non scelerisque sit amet, dictum id justo. Aliquam luctus tempor metus at sagittis. Proin varius, tellus commodo auctor iaculis, nulla nunc laoreet arcu, at rhoncus nisl nisl porta mauris. Donec vel nibh ac massa condimentum porta eu facilisis lacus. Morbi lobortis accumsan arcu vitae volutpat. Donec euismod malesuada urna, non rhoncus quam aliquet non. Proin convallis, est in vulputate molestie, nisl nisi laoreet neque, tincidunt pellentesque sapien nibh et dolor. </p>
<p id=”text3″>THIS IS NEW. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dui metus, sagittis non scelerisque sit amet, dictum id justo. Aliquam luctus tempor metus at sagittis. Proin varius, tellus commodo auctor iaculis, nulla nunc laoreet arcu, at rhoncus nisl nisl porta mauris. Donec vel nibh ac massa condimentum porta eu facilisis lacus. Morbi lobortis accumsan arcu vitae volutpat. Donec euismod malesuada urna, non rhoncus quam aliquet non. Proin convallis, est in vulputate molestie, nisl nisi laoreet neque, tincidunt pellentesque sapien nibh et dolor. </p>
<p id=”text4″>I MADE THIS. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dui metus, sagittis non scelerisque sit amet, dictum id justo. Aliquam luctus tempor metus at sagittis. Proin varius, tellus commodo auctor iaculis, nulla nunc laoreet arcu, at rhoncus nisl nisl porta mauris. Donec vel nibh ac massa condimentum porta eu facilisis lacus. Morbi lobortis accumsan arcu vitae volutpat. Donec euismod malesuada urna, non rhoncus quam aliquet non. Proin convallis, est in vulputate molestie, nisl nisi laoreet neque, tincidunt pellentesque sapien nibh et dolor. </p>
</div>
<div id=”slideshow”>
<div id=”prev”><p><a href=”javascript:chgImg(-1)”>Previous</a> </p></div>
<div id=”show”><p><span id=”numberDisplay”>1/16</span></div>
<div id=”next”><p><a href=”javascript:chgImg(1)”>Next</a></div>
<div><img src=”images/39steps/01.jpg” name=”slideshow” /></div>
</div>
</div>
<div id=”thumbnail”>
<ul>
<li><a href=”javascript:jump(0)” border=0><img src=”images/39steps/th1.jpg” onClick=”openContentIncontent(‘text1’)”/></a></li>
<li><a href=”javascript:jump(2)” border=0><img src=”images/39steps/th2.jpg” onClick=”openContentIncontent(‘text2’)”/></a></li>
<li><a href=”javascript:jump(4)” border=0><img src=”images/39steps/th3.jpg” onClick=”openContentIncontent(‘text3’)” /></a></li>
<li><a href=”javascript:jump(12)” border=0><img src=”images/39steps/th4.jpg” onClick=”openContentIncontent(‘text4’)” /></a></li>
<li><a href=”javascript:jump(18)” border=0><img src=”images/39steps/th5.jpg” onClick=”openContentIncontent(‘text5’)” /></a></li>
</ul>
</div>
</div>
</body>
I would love some help! I’m pretty new to javascript but have certainly learned a lot just struggling with this. Thanks!!