Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Javascript Slideshow Tutorial, How to make a slideshow in JavaScript
andrewsmithy
post Mar 19 2005, 06:08 AM
Post #1


Newbie [Level 1]
*

Group: Members
Posts: 19
Joined: 16-March 05
From: United States
Member No.: 4,570
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:

CODE

     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.

CODE

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

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:

CODE

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

CODE

<!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" xml:lang="en" lang="en">
   <head>
       <title>Slideshow</title>
       <script language="JavaScript" type="text/javascript">
           //<!--
           //<![CDATA[
           
           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';
           }
           //]]>
           // -->
       </script>
       <style type="text/css">
       <!--
           .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;
           }
       -->
       </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

(list)

Go to the top of the page
 
+Quote Post
iGuest
post Dec 29 2007, 01:49 PM
Post #2


Trap Double Mocha Member
***************

Group: Members
Posts: 2,360
Joined: 21-September 07
Member No.: 50,369
adding backgroundimage slide show.
Javascript Slideshow Tutorial

What would be the coding of adding backgroundimage slide show in javascript?

-shiv

(list)

Go to the top of the page
 
+Quote Post
karlosvalencia
post Jan 5 2008, 05:06 AM
Post #3


Newbie [Level 1]
*

Group: Members
Posts: 17
Joined: 5-January 08
From: Ottawa - Canada
Member No.: 55,741
QUOTE(andrewsmithy @ Mar 19 2005, 01:08 AM) *
<span style='font-size:14pt;line-height:100%'>JavaScript Slideshow Tutorial</span>

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 &lt;script> tag in the <head> of our HTML document. In that script tag we will build the following:

CODE
     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. <span style='font-family:Courier'>first</span> describes the first picture id, which is 1; <span style='font-family:Courier'>last</span> defines the last picture, and <span style='font-family:Courier'>current</span> holds the index of the current picture. The function <span style='font-family:Courier'>nextPicture()</span> hides the currently displayed picture, and displays the next picture using CSS controls. The function <span style='font-family:Courier'>previousPicture()</span> is almost exactly the same as <span style='font-family:Courier'>nextPicture()</span> except that it travels back one picture. Notice that <span style='font-family:Courier'>current</span> 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.

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

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="java script:previousPicture()" style="margin: 10px;">« Previous</a>
               <a href="java script: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:

CODE
<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 <span style='font-family:Courier'>last</span> to be the same as your last slide number.

CODE
<!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" xml:lang="en" lang="en">
   <head>
       <title>Slideshow</title>
       &lt;script language="JavaScript" type="text/javascript">
           //<!--
           //<![CDATA[
           
           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';
           }
           //]]>
           // -->
       </script>
       <style type="text/css">
       <!--
           .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;
           }
       -->
       </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="java script:previousPicture()" style="margin: 10px;">« Previous</a>
               <a href="java script: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



This is actually pretty cool. Tested it and works like a charm. Is there any way in java to protect the pictures so they cant be downloaded using right-click once they're displayed?

(list)

Go to the top of the page
 
+Quote Post
games4u
post Apr 30 2008, 10:32 AM
Post #4


Newbie
*

Group: Members
Posts: 7
Joined: 27-April 08
Member No.: 61,384
QUOTE(FeedBacker @ Dec 29 2007, 07:19 PM) *
adding backgroundimage slide show.

Javascript Slideshow Tutorial
What would be the coding of adding backgroundimage slide show in javascript?

-shiv


The easiest way of background image slideshow is by assigning different backgrounds to different <div> tags.
So the following part of above code:
HTML
<div id="slideShow">
...
<div id="slide10">
Some Text Here...
</div>
....
</div>

can be changed to:
HTML
<div id="slideShow">
...
<div id="slide10" style="background-image:url(bg_image_10.bmp)">
Some Text Here...
</div>
....
</div>


The style attribute can be given for all <div> tags. And if needed the text in all <div> tags can be same - this creates a background changing effect.

I hope that solved your problem smile.gif

This post has been edited by games4u: Apr 30 2008, 10:36 AM

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · Java, Java Servlets, Java Script, & JSP · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Javascript Close Window(12)
  2. One Click Copy And Paste To Clipboard(5)
  3. Adding Rows & Columns In Html Table Using Javascript(1)
  4. I'm Making My Own Javascript Only Rpg :d(7)
  5. What's The Relationship Between Javascript And Java(5)
  6. Javascript : No Right Click Script !@(12)
  7. Hiding <div> Boxes With Javascript(8)
  8. A Simple Javascript Help Required(3)
  9. Help With Javascript Calculator On My Website Please!(1)
  10. My Little Javascript(0)
  11. Highlight A Word In Javascript. Help!(2)
  12. How Do You Make A Javascript Calculator?(11)
  13. Help With Javascript Calculator Returning "nan"(2)
  14. Great Javascript Script Source(2)
  15. Web Applications: J2ee Or Javascript/css/html(1)
  1. Opera Browser + Javascript + Embeded Sound(0)
  2. Javascript - What's Your Browser?(3)
  3. Javascript Events Not Working For Ie(6)
  4. I`m New To Javascript.(5)
  5. Special Wii Javascript(2)
  6. Javascript Error(2)
  7. Is It Possible To Create A Web Based Mmo In Javascript?(4)
  8. Capturing Username Of Computer(3)
  9. Javascript Object Node Referencing Help(5)
  10. Flash And Javascript Interaction(1)
  11. Document.write & Noscript Questions (javascript)(1)
  12. Java Vs Javascript(11)
  13. Adjusting Rows/cols Of Frames In Frameset Using Javascript Is Not Working In Firefox 3 Is Not Working(4)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

-