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

Thread: Slideshow Help

  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slideshow Help

    Hey guys, sorry I don't even know where to start on this but I need to have a page where I click on a pic, say pic #7 and it opens a new window where u can go forward or backwards. Here is an example of the page:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Coeur d'Alene High School Music Department</title>
    <link href="default.css" rel="stylesheet" type="text/css">
    <script>
    <!--
    function newImage(arg) {
    	if (document.images) {
    		rslt = new Image();
    		rslt.src = arg;
    		return rslt;
    	}
    }
    
    function changeImages() {
    	if (document.images && (preloadFlag == true)) {
    		for (var i=0; i<changeImages.arguments.length; i+=2) {
    			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    		}
    	}
    }
    
    var preloadFlag = false;
    function preloadImages() {
    	if (document.images) {
    		Jazz_over = newImage("images/Jazz-over.gif");
    		Symphonic_over = newImage("images/Symphonic-over.gif");
    		Wind_Ensemble_over = newImage("images/Wind-Ensemble-over.gif");
    		Chamber_Orchestra_over = newImage("images/Chamber-Orchestra-over.gif");
    		String_Orchestra_over = newImage("images/String-Orchestra-over.gif");
    		Other_over = newImage("images/Other-over.gif");
    		preloadFlag = true;
    	}
    }
    // -->
    </script>
    <style type="text/css">
    <!--
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    }
    a:active {
    	text-decoration: none;
    }
    .style2 {font-size: 12px}
    -->
    </style></head>
    
    <body onload="preloadImages();">
    <table width="581" border="0" cell cellspacing="0" cellpadding="0" align="center">
      <tbody>
      <tr>
        <td colspan="3" class="banner"><a href="jazzband.html"></a></td>
      </tr>
      <tr>
        <td width="6" class="leftbar">&nbsp;</td>
        <td width="567"><table width="448" height="17" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
          <tr>
            <td><a href="jazzband.html" target="_self"
    				onmouseover="changeImages('Jazz', 'images/Jazz-over.gif'); return true;"
    				onmouseout="changeImages('Jazz', 'images/Jazz.gif'); return true;"
    				onmousedown="changeImages('Jazz', 'images/Jazz-over.gif'); return true;"
    				onmouseup="changeImages('Jazz', 'images/Jazz-over.gif'); return true;"> <img name="Jazz" src="images/Jazz.gif" width="55" height="17" border="0" alt="Home"></a></td>
            <td><a href="symphonicband.html" target="_self"
    				onmouseover="changeImages('Symphonic', 'images/Symphonic-over.gif'); return true;"
    				onmouseout="changeImages('Symphonic', 'images/Symphonic.gif'); return true;"
    				onmousedown="changeImages('Symphonic', 'images/Symphonic-over.gif'); return true;"
    				onmouseup="changeImages('Symphonic', 'images/Symphonic-over.gif'); return true;"> <img name="Symphonic" src="images/Symphonic.gif" width="85" height="17" border="0" alt="Symphonic Band"></a></td>
            <td><a href="index.html" target="_self"
    				onmouseover="changeImages('Home_Wind', 'images/Home-Wind-over.gif'); return true;"
    				onmouseout="changeImages('Home_Wind', 'images/Home-Wind.gif'); return true;"
    				onmousedown="changeImages('Home_Wind', 'images/Home-Wind-over.gif'); return true;"
    				onmouseup="changeImages('Home_Wind', 'images/Home-Wind-over.gif'); return true;"> <img name="Home_Wind" src="images/Home-Wind.gif" width="78" height="17" border="0" alt="Home"></a></td>
            <td><a href="chamberorchestra.html" target="_self"
    				onmouseover="changeImages('Chamber', 'images/Chamber-over.gif'); return true;"
    				onmouseout="changeImages('Chamber', 'images/Chamber.gif'); return true;"
    				onmousedown="changeImages('Chamber', 'images/Chamber-over.gif'); return true;"
    				onmouseup="changeImages('Chamber', 'images/Chamber-over.gif'); return true;"> <img name="Chamber" src="images/Chamber.gif" width="101" height="17" border="0" alt="Chamber Orchestra"></a></td>
            <td><a href="stringorchestra.html" target="_self"
    				onmouseover="changeImages('String', 'images/String-over.gif'); return true;"
    				onmouseout="changeImages('String', 'images/String.gif'); return true;"
    				onmousedown="changeImages('String', 'images/String-over.gif'); return true;"
    				onmouseup="changeImages('String', 'images/String-over.gif'); return true;"> <img name="String" src="images/String.gif" width="92" height="17" border="0" alt="String Orchestra"></a></td>
            <td><a href="other.html" target="_self"
    				onmouseover="changeImages('Other', 'images/Other-over.gif'); return true;"
    				onmouseout="changeImages('Other', 'images/Other.gif'); return true;"
    				onmousedown="changeImages('Other', 'images/Other-over.gif'); return true;"
    				onmouseup="changeImages('Other', 'images/Other-over.gif'); return true;"> <img name="Other" src="images/Other.gif" width="37" height="17" border="0" alt="Other"></a></td>
          </tr>
        </table>
        <p><span class="title_low"><a href="windensemble.html">Wind Ensemble </a></span> - <span class="title">Pictures</span></p>
          <p>&nbsp;</p>
          <table width="409" border="0" align="center" cellpadding="0" cellspacing="5">
            <tr>
              <td width="139"><a href="images/Pictures/High/Wind%20Ensemble/WE---cl.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---cl.JPG" width="139" height="104" border="0"></a></td>
              <td width="139"><a href="images/Pictures/High/Wind%20Ensemble/WE---DSC00046.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---DSC00046.JPG" width="139" height="104" border="0"></a></td>
              <td width="111"><a href="images/Pictures/High/Wind%20Ensemble/WE---DSC00065.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---DSC00065.JPG" width="139" height="104" border="0"></a></td>
            </tr>
            <tr>
              <td><a href="images/Pictures/High/Wind%20Ensemble/WE---DSC00067.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---DSC00067.JPG" width="139" height="104" border="0"></a></td>
              <td><em><a href="images/Pictures/High/Wind%20Ensemble/WE---DSC00073.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---DSC00073.JPG" width="139" height="104" border="0"></a></em></td>
              <td><a href="images/Pictures/High/Wind%20Ensemble/WE---DSC00079.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---DSC00079.JPG" width="139" height="104" border="0"></a></td>
            </tr>
            <tr>
              <td><a href="images/Pictures/High/Wind%20Ensemble/WE---holiday-.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---holiday-.JPG" width="139" height="104" border="0"></a></td>
              <td><a href="images/Pictures/High/Wind%20Ensemble/WE---tbn.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---tbn.JPG" width="139" height="104" border="0"></a></td>
              <td><a href="images/Pictures/High/Wind%20Ensemble/WE---tpt.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---tpt.JPG" width="139" height="104" border="0"></a></td>
            </tr>
            <tr>
              <td><a href="images/Pictures/High/Wind%20Ensemble/WE---tpt2.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---tpt2.JPG" width="139" height="104" border="0"></a></td>
              <td><a href="images/Pictures/High/Wind%20Ensemble/WE---vet1.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet1.JPG" width="139" height="104" border="0"></a></td>
              <td><a href="images/Pictures/High/Wind%20Ensemble/WE---vet2.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet2.JPG" width="139" height="104" border="0"></a></td>
            </tr>
            <tr>
              <td height="24"><a href="images/Pictures/High/Wind%20Ensemble/WE---vet3.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet3.JPG" width="139" height="104" border="0"></a></td>
              <td><a href="images/Pictures/High/Wind%20Ensemble/WE---vet4.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet4.JPG" width="139" height="104" border="0"></a></td>
              <td><a href="images/Pictures/High/Wind%20Ensemble/WE---vet-horn.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet-horn.JPG" width="139" height="104" border="0"></a></td>
            </tr>
            <tr>
              <td height="24"><a href="images/Pictures/High/Wind%20Ensemble/WE---vet-phillips.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet-phillips.JPG" width="139" height="104" border="0"></a></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </table>
          <p align="center" class="MsoNormal" style="text-align: center;"><span class="style2">Click each picture to view the larger, higher resolution picture. Be patient if you are on dial-up, the pictures are very large. </span> <br>
          </p>
          </td>
        <td width="8" class="rightbar">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3" class="footer">&nbsp;</td>
        </tr>
      </tbody>
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </body>
    </html>

    Here's my CSS if u need it:

    Code:
    .banner {
    	background-image: url(images/banner.gif);
    	height: 58px;
    	width: 579px;
    	overflow: hidden;
    }
    .leftbar {
    	background-image: url(images/leftbar.gif);
    	background-repeat: repeat-y;
    }
    .rightbar {
    
    	background-image: url(images/rightbar.gif);
    	background-repeat: repeat-y;
    }
    .footer {
    	background-image: url(images/footer.gif);
    	height: 58px;
    	width: 579px;
    }
    #section {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 16px;
    	font-style: normal;
    	color: #000000;
    	text-align: center;
    }
    .title {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 14px;
    	font-weight: normal;
    	text-align: left;
    	letter-spacing: 2px;
    }
    #section a:link {
    
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 16px;
    	font-style: normal;
    	color: #000000;
    	text-align: center;
    }
    #section a:visited {
    
    
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 16px;
    	font-style: normal;
    	color: #000000;
    	text-align: center;
    }
    #section a:hover {
    
    
    
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 16px;
    	font-style: normal;
    	color: #0066FF;
    	text-align: center;
    }
    #section a:active {
    
    
    
    
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 16px;
    	font-style: normal;
    	color: #000000;
    	text-align: center;
    }
    .title_low {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 14px;
    	font-weight: normal;
    	letter-spacing: 2px;
    	text-align: left;
    	color: #999999;
    }
    .title_low a:link {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 14px;
    	font-weight: normal;
    	letter-spacing: 2px;
    	text-align: left;
    	color: #999999;
    }
    .title_low a:visited {
    
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 14px;
    	font-weight: normal;
    	letter-spacing: 2px;
    	text-align: left;
    	color: #999999;
    }
    .title_low a:hover {
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 14px;
    	font-weight: normal;
    	letter-spacing: 2px;
    	text-align: left;
    	color: #0066FF;
    	text-decoration: underline;
    }
    .comingSoon {
    	font-size: 14px;
    	font-weight: bold;
    	font-variant: small-caps;
    }
    .none {
    	text-align: center;
    }
    .yell {
    	font-weight: 400;
    	color: #999999;
    	font-size: 12px;
    }
    .click {
    	font-weight: lighter;
    	font-size: 12px;
    }
    So if I click on the first picture I want to be able to go through all the pictures by either clicking next or previous etc. Thanks

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bump^^^

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    maybe u will find what you are looking for here http://www.dynamicdrive.com/dynamicindex14/index.html i personally use the interactive slide show with text description one, it seems to be what u are looking for


  •  

    Posting Permissions

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