0 Replies - 1345 Views - Last Post: 14 September 2006 - 01:11 PM

#1 quim  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 18
  • View blog
  • Posts: 182
  • Joined: 11-December 05

Image Gallery

Posted 14 September 2006 - 01:11 PM

Description: when you copy this snippet it will now shoe you the image since they are not in your computer
change only the image name in the array and it their respective img place.It gives you Thumbnails image in a side and when you click it will show the that image in another side an bigger
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!--               Created by QUIM                 -->
<!--       Posted in the dreamincode.net           -->
<!--        Brewed on 9/14/2006 05:55:29 PM        -->
<head>
  <title>Picture Gallery</title>
  <!--this is the CSS for the thumbnails picture-->
  <style>
  body{background-color:}
  #small_img{width:290px;height:600px;float:left;overflow:scroll;text-align:center;background-color:06AEFF;}
  img {border:none;}
  </style>
  
  <script>
  
 /*Add more Picture in the ARRAY */
  var photo = new Array();
  photo[0]="IMG_1689.JPG"/*put the location of the picture or th name if it is in the same folder*/
  photo[1]="IMG_1692.JPG"
  photo[2]="IMG_1693.JPG"
  photo[3]="IMG_1694.JPG"
  photo[4]="IMG_1696.JPG"
  photo[5]="IMG_1698.JPG"
  
  
  
  
  function ff(code)
  {
  document.images.home.src=photo[code];/*the code in the Array is from the function ff(#####)number of picture in the web site*/
  
  }
  </script>
</head>
<body>
<div id="small_img">
<a href ="#" onclick="ff(0)"><img src="IMG_1689.JPG" alt="" height="200"></a>

<a href ="#" onclick="ff(1)"><img src="IMG_1692.JPG" alt="" height="200"></a>

<a href ="#" onclick="ff(2)"><img src="IMG_1693.JPG" alt="" height="200"></a>

<a href ="#" onclick="ff(3)"><img src="IMG_1694.JPG" alt="" height="200"></a>

<a href ="#" onclick="ff(4)"><img src="IMG_1696.JPG" alt="" height="200"></a>

<a href ="#" onclick="ff(5)"><img src="IMG_1698.JPG" alt="" height="200"></a>

</div>
<div>
<img name="home" src="IMG_1694.JPG"  height="600"/>

</div>
</body>
</html>






Is This A Good Question/Topic? 0
  • +

Page 1 of 1