andrewsmithy

Members

View Profile See their activity

Content Count
21
Joined
March 16, 2005
Last visited
February 15, 2007
Days Won
1

Reputation Activity

andrewsmithy got a reaction from cityzen in Javascript Slideshow Tutorial How to make a slideshow in JavaScript September 26, 2012

JavaScript Slideshow Tutorial

I'm going to show you how to make a impressive JavaScript slideshow. First, you're probably asking: why would I want to make a slideshow in JavaScript? There are a number of reasons. First, you don't have to build a new HTML page for each picture. Secondly, the page will load much faster because the of the compactness of the page.
Ok let's get started with this example.

First we'll add a <script> tag in the <head> of our HTML document. In that script tag we will build the following:

first = 1; last = 4; current = 1; function nextPicture() { // Hide current picture object = document.getElementById('slide' + current); object.style.display = 'none'; // Show next picture, if last, loop back to front if (current == last) { current = 1; } else { current++ } object = document.getElementById('slide' + current); object.style.display = 'block'; } function previousPicture() { // Hide current picture object = document.getElementById('slide' + current); object.style.display = 'none'; if (current == first) { current = last; } else { current--; } object = document.getElementById('slide' + current); object.style.display = 'block'; }
First, I want you to look at the variables. first describes the first picture id, which is 1; last defines the last picture, and current holds the index of the current picture. The function nextPicture() hides the currently displayed picture, and displays the next picture using CSS controls. The function previousPicture() is almost exactly the same as nextPicture() except that it travels back one picture. Notice that current variable holds the current picture index. We are going to make this page styled through CSS. Here is my CSS code. you can change this to whatever you want. Put this in the <style> tag of your <head> tag.

.slideShow { background-color: #ebebeb; text-align: center; margin-bottom: 10px; padding: 5px; } .slides { position: relative; z-index: 1; display: none; } .setTitle, .slideTitle { font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif; } .setTitle { color: #995a01; font-size: 14px; font-weight: bold; } .slideTitle { color: #666666; font-size: 12px; } .controls { position: relative; z-index: 10; } #slide1 { display: block; } img { border: outset 1px #999999; }
Ok, now we are going to put our pictures in our page. We do this through standard HTML. I'll explain this part after we go over the code.

<div class="slideShow"> <div class="setTitle">Jaguars Track and Field Photos</div> <div id="slide1" class="slides"> <div class="slideTitle">Picture 01</div> <img src="pic01.jpg" height="300" width="400" border="0" /> </div> <div id="slide2" class="slides"> <div class="slideTitle">Picture 02</div> <img src="pic02.jpg" height="300" width="400" border="0" /> </div> <div class="controls"> <a href="javascript:previousPicture()" style="margin: 10px;">Ť Previous</a> <a href="javascript:nextPicture()" style="margin: 10px;">Next ť</a> </div> </div>
This code goes in the <body> tag. I just put two slides on here, but you can easily add more. Here is the format for adding more slides. You place another <div> inside of the <div class="slideShow"> like this:

<div id="slideShow">...<div id="slide10"> <div class="slideTitle">Your Slide Title</div> <img src="pic10.jpg" height="600" width="430" border="0" /></div>....</div>
Ok, when all of this is put together, you have a quite nice Javascript-enhanced slideshow! Here is the code for the whole page. Remember to edit the variable last to be the same as your last slide number.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;<html xmlns="http://www.w3.org/1999/xhtml&%2334; xml:lang="en" lang="en"> <head> <title>Slideshow</title> <script language="JavaScript" type="text/javascript"> // </script> <style type="text/css">  </style> </head> <body> <div class="slideShow"> <div class="setTitle">Your Title</div> <div id="slide1" class="slides"> <div class="slideTitle">Picture 01</div> <img src="pic01.jpg" height="300" width="400" border="0" /> </div> <div id="slide2" class="slides"> <div class="slideTitle">Picture 02</div> <img src="pic02.jpg" height="300" width="400" border="0" /> </div> <div id="slide3" class="slides"> <div class="slideTitle">Picture 03</div> <img src="pic03.jpg" height="300" width="400" border="0" /> </div> <div id="slide4" class="slides"> <div class="slideTitle">Picture 04</div> <img src="pic04.jpg" height="300" width="400" border="0" /> </div> <div class="controls"> <a href="javascript:previousPicture()" style="margin: 10px;">Ť Previous</a> <a href="javascript:nextPicture()" style="margin: 10px;">Next ť</a> </div> </div> </body></html>
There you go! If you have any problems, suggestions, or questions please reply to this post. If you like this code, please rate me! Thanks
andrewsmithy got a reaction from vibhas123 in Javascript Slideshow Tutorial How to make a slideshow in JavaScript March 26, 2011

JavaScript Slideshow Tutorial

I'm going to show you how to make a impressive JavaScript slideshow. First, you're probably asking: why would I want to make a slideshow in JavaScript? There are a number of reasons. First, you don't have to build a new HTML page for each picture. Secondly, the page will load much faster because the of the compactness of the page.
Ok let's get started with this example.

First we'll add a <script> tag in the <head> of our HTML document. In that script tag we will build the following:

first = 1; last = 4; current = 1; function nextPicture() { // Hide current picture object = document.getElementById('slide' + current); object.style.display = 'none'; // Show next picture, if last, loop back to front if (current == last) { current = 1; } else { current++ } object = document.getElementById('slide' + current); object.style.display = 'block'; } function previousPicture() { // Hide current picture object = document.getElementById('slide' + current); object.style.display = 'none'; if (current == first) { current = last; } else { current--; } object = document.getElementById('slide' + current); object.style.display = 'block'; }
First, I want you to look at the variables. first describes the first picture id, which is 1; last defines the last picture, and current holds the index of the current picture. The function nextPicture() hides the currently displayed picture, and displays the next picture using CSS controls. The function previousPicture() is almost exactly the same as nextPicture() except that it travels back one picture. Notice that current variable holds the current picture index. We are going to make this page styled through CSS. Here is my CSS code. you can change this to whatever you want. Put this in the <style> tag of your <head> tag.

.slideShow { background-color: #ebebeb; text-align: center; margin-bottom: 10px; padding: 5px; } .slides { position: relative; z-index: 1; display: none; } .setTitle, .slideTitle { font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif; } .setTitle { color: #995a01; font-size: 14px; font-weight: bold; } .slideTitle { color: #666666; font-size: 12px; } .controls { position: relative; z-index: 10; } #slide1 { display: block; } img { border: outset 1px #999999; }
Ok, now we are going to put our pictures in our page. We do this through standard HTML. I'll explain this part after we go over the code.

<div class="slideShow"> <div class="setTitle">Jaguars Track and Field Photos</div> <div id="slide1" class="slides"> <div class="slideTitle">Picture 01</div> <img src="pic01.jpg" height="300" width="400" border="0" /> </div> <div id="slide2" class="slides"> <div class="slideTitle">Picture 02</div> <img src="pic02.jpg" height="300" width="400" border="0" /> </div> <div class="controls"> <a href="javascript:previousPicture()" style="margin: 10px;">Ť Previous</a> <a href="javascript:nextPicture()" style="margin: 10px;">Next ť</a> </div> </div>
This code goes in the <body> tag. I just put two slides on here, but you can easily add more. Here is the format for adding more slides. You place another <div> inside of the <div class="slideShow"> like this:

<div id="slideShow">...<div id="slide10"> <div class="slideTitle">Your Slide Title</div> <img src="pic10.jpg" height="600" width="430" border="0" /></div>....</div>
Ok, when all of this is put together, you have a quite nice Javascript-enhanced slideshow! Here is the code for the whole page. Remember to edit the variable last to be the same as your last slide number.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;<html xmlns="http://www.w3.org/1999/xhtml&%2334; xml:lang="en" lang="en"> <head> <title>Slideshow</title> <script language="JavaScript" type="text/javascript"> // </script> <style type="text/css">  </style> </head> <body> <div class="slideShow"> <div class="setTitle">Your Title</div> <div id="slide1" class="slides"> <div class="slideTitle">Picture 01</div> <img src="pic01.jpg" height="300" width="400" border="0" /> </div> <div id="slide2" class="slides"> <div class="slideTitle">Picture 02</div> <img src="pic02.jpg" height="300" width="400" border="0" /> </div> <div id="slide3" class="slides"> <div class="slideTitle">Picture 03</div> <img src="pic03.jpg" height="300" width="400" border="0" /> </div> <div id="slide4" class="slides"> <div class="slideTitle">Picture 04</div> <img src="pic04.jpg" height="300" width="400" border="0" /> </div> <div class="controls"> <a href="javascript:previousPicture()" style="margin: 10px;">Ť Previous</a> <a href="javascript:nextPicture()" style="margin: 10px;">Next ť</a> </div> </div> </body></html>
There you go! If you have any problems, suggestions, or questions please reply to this post. If you like this code, please rate me! Thanks

Sign In

andrewsmithy

Content Count

Joined

Last visited

Days Won

Reputation Activity

Browse

Activity

Important Information