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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript Slideshow Help

    I'm trying to create a JavaScript slideshow that is based on the slideshow in this Web site:

    http://www.javascriptworld.com/chap14-3.html

    It consists of the HTML page, which creates the slideshow interface:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>Our Summer Vacation!</title>
    	<link rel="Stylesheet" href="script03.css" />
    	<script type="text/javascript" language="Javascript" src="script03.js">
    	</script>
    </head>
    <body>
    	<h1>Our Summer Vacation Slideshow</h1>
    	<img src="images/slideImg0.jpg" alt="Our Vacation Pix" id="slideshow" />
    	<div id="imgText">   </div>
    	<br clear="all" />
    	<form action="#">
    		<input type="button" id="prevLink" value="« Previous" />
    		<input type="button" id="nextLink" value="Next »" />
    	</form>
    </body>
    </html>

    The external CSS file:


    Code:
    body {
    	background-color: white;
    	color: black;
    	font: 12px verdana, arial, helvetica, geneva, sans-serif;
    }
    
    h1 {
    	font: 24px "trebuchet ms", verdana, arial, helvetica, geneva, sans-serif;
    	margin-left: 100px;
    }
    
    form {
    	margin-left: 100px;
    }
    
    #slideshow {
    	padding: 0 10px 10px 10px;
    	float: left;
    }
    
    #imgText {
    	padding: 10px 0 0 10px;
    	float: left;
    	width: 200px;
    	height: 150px;
    	border-color: black;
    	border-width: 1px 0 0 1px;
    	border-style: solid;
    }
    The JavaScript file:

    Code:
    window.onload = initAll;
    
    var currImg = 0;
    var captionText = new Array(
    	"Our ship, leaving Vancouver.",
    	"We took a helicopter ride at our first port, Juneau.",
    	"The helicopter took us to Mendenhall Glacier.",
    	"The happy (and chilly) couple, on the glacier.",
    	"Here's what our second stop, Ketchikan, looked like from the ship.",
    	"We got to cruise through Glacier Bay. It was absolutely breathtaking!",
    	"In Skagway, we took a train up into the mountains, all the way to the Canadian Border.",
    	"Looking back down at Skagway from the train.",
    	"On a trip this romantic, I shouldn't have been surprised by a proposal, but I was (obviously, I said yes).",
    	"It's nice to go on vacation, but it's nice to be home again, too."
    )
    
    function initAll() {
    	document.getElementById("imgText").innerHTML = captionText[0];
    	document.getElementById("prevLink").onclick = processPrevious;
    	document.getElementById("nextLink").onclick = processNext;
    }
    
    function processPrevious() {
    	newSlide(-1);
    }
    
    function processNext() {
    	newSlide(1);
    }
    
    function newSlide(direction) {
    	var imgCt = captionText.length;
    
    	currImg = currImg + direction;
    	if (currImg < 0) {
    		currImg = imgCt-1;
    	}
    	if (currImg == imgCt) {
    		currImg = 0;
    	}
    	document.getElementById("slideshow").src = "images/slideImg" + currImg + ".jpg";
    	document.getElementById("imgText").innerHTML = captionText[currImg];
    }
    In the above link that contains the entire activity, several pictures are also listed (slideImg0.jpg, slideImg1.jpg, slideImg2.jpg, etc.). Although the activity shows how the captions for each slide are incorporated into the code, it doesn't show how all of the images are incorporated.

    Could someone show me how I would write the code for the images and captions (so that a working slideshow appears in my Web site) in the JavaScript and the HTML pages? Also, could you give me an example with two of the images (or captions, if necessary), so I'll know how to write all of the images (or captions, if necessary) consecutively?

    In the JavaScript file, would I write the code like this:

    Code:
    document.getElementById("slideshow").src = "images/slideImg0" + currImg + ".jpg";
    document.getElementById("slideshow").src = "images/slideImg1" + currImg + ".jpg";

    Thanks in advance!

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    The code all works fine as is. There is no need for you to add any more javascript to handle any of the images. That 3rd last line in the javascript file (automatically) assembles the source name of the next image to be viewed each time through. There is no need to do any manual addition to the javascript or HTML here.

    Just do a final check that everything is correctly named and accessible. For this example:

    1. That there are 10 images, named: slideImg0.jpg, slideImg1.jpg, slideImg2.jpg, ... etc ... slideImg9.jpg. These 10 images match the 10 captions provided in the captionText array.

    2. That these 10 images are in a subdirectory called "images"; being a subdirectory off the current directory containing the HTML file (and also the CSS file and the javascript file).

    If it does not work, it is likely that the images are in another location to that described in '2.'


  •  

    Posting Permissions

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