On my web page, i have a photo album, i want to make a slideshow, i don't know how to do it. can you help me

1. create a script with an array of image urls
2. use GET ie. www.page.com?img=1 method to post img number to page. on page load change the image based on this number.
3. use meta refresh or javascript to refresh after several seconds incrementing the GET img variable.

and that is how you would do it.
happy coding.

hi,
if u want to use javascript for imagre gallery u can use this code

<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript">
  <!-- 
  function funcdisplay(n)
  {  
    if (document.images)
    document.getElementById("myimage").src= "images"+"/" + "image" + n + ".jpg";
  //  alert('image display');
    document.myimage.width=250;
    document.myimage.height=250;
    }
 //-->   </script>
    <script language="JavaScript">
<!-- 
    which_image_loaded = 0;
NUMBER_OF_IMAGES = 4;

ImageNames = new Object();
ImageNames.length = NUMBER_OF_IMAGES - 1;

for (counter = 0; counter < NUMBER_OF_IMAGES; counter++){
    file_number = counter + 1;
    filename = ("images"+"/" + "image" + file_number + ".jpg");
    ImageNames[counter] = filename;
}

function changeImage(direction) {
    which_image_loaded += direction;
    if (which_image_loaded < 0)
        which_image_loaded = NUMBER_OF_IMAGES - 1;
    if (which_image_loaded == NUMBER_OF_IMAGES)
        which_image_loaded = 0;
    if (document.images)
        document.myimage.src = ImageNames[which_image_loaded];
}
//--></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
  <a href="#" onclick="funcdisplay('1')"> <img src="images/image1.jpg"width="50px" style="z-index: 103; left: 235px; position: absolute; top: 96px" /></a>&nbsp;&nbsp;
 <a href="#" onclick="funcdisplay('2')">   <img src="images/image2.jpg"width="50px" style="z-index: 104; left: 309px; position: absolute; top: 95px" /></a>&nbsp;&nbsp;&nbsp;
  <a href="#" onclick="funcdisplay('3')">  <img src="images/image3.jpg"width="50px" style="z-index: 105; left: 392px; position: absolute; top: 95px" />
 </a>&nbsp;&nbsp;
 <a href="#" onclick="funcdisplay('4')"> <img src="images/image4.jpg"width="50px" style="z-index: 106; left: 476px; position: absolute; top: 95px" /></a>&nbsp;&nbsp;
    <input type="button" value="previous" onClick='changeImage(-1);' style="z-index: 102; left: 291px; position: absolute; top: 473px" >
        &nbsp;&nbsp;&nbsp;
        <img src="images/image1.jpg"name="myimage" id="myimage"width=250px height=250px style="z-index: 107; left: 256px; position: absolute; top: 199px">
    <input type="button" value="next" onClick='changeImage(1);' style="z-index: 101; left: 401px; position: absolute; top: 474px">



    </div>
    </form>
</body>

here the sites which i have collected from forums:

http://www.codeproject.com/aspnet/ImageGallery.asp
http://www.codeproject.com/aspnet/ImageGalleryImageManager.asp
http://www.codeproject.com/aspnet/CatalogViewPhotoGallery.asp
http://www.codeproject.com/aspnet/imagegalleriesasp.asp
http://www.codeproject.com/aspnet/CPImageGallery.asp
http://www.codeproject.com/aspnet/Photo_gallery.asp
http://www.codeproject.com/useritems/ImageSlideShow.asp

u can also do that using iframe

Edited 3 Years Ago by mike_2000_17: Fixed formatting

hi,
if u want to use javascript for imagre gallery u can use this code

<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript">
  <!-- 
  function funcdisplay(n)
  {  
    if (document.images)
    document.getElementById("myimage").src= "images"+"/" + "image" + n + ".jpg";
  //  alert('image display');
    document.myimage.width=250;
    document.myimage.height=250;
    }
 //-->   </script>
    <script language="JavaScript">
<!-- 
    which_image_loaded = 0;
NUMBER_OF_IMAGES = 4;

ImageNames = new Object();
ImageNames.length = NUMBER_OF_IMAGES - 1;

for (counter = 0; counter < NUMBER_OF_IMAGES; counter++){
    file_number = counter + 1;
    filename = ("images"+"/" + "image" + file_number + ".jpg");
    ImageNames[counter] = filename;
}

function changeImage(direction) {
    which_image_loaded += direction;
    if (which_image_loaded < 0)
        which_image_loaded = NUMBER_OF_IMAGES - 1;
    if (which_image_loaded == NUMBER_OF_IMAGES)
        which_image_loaded = 0;
    if (document.images)
        document.myimage.src = ImageNames[which_image_loaded];
}
//--></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
  <a href="#" onclick="funcdisplay('1')"> <img src="images/image1.jpg"width="50px" style="z-index: 103; left: 235px; position: absolute; top: 96px" /></a>&nbsp;&nbsp;
 <a href="#" onclick="funcdisplay('2')">   <img src="images/image2.jpg"width="50px" style="z-index: 104; left: 309px; position: absolute; top: 95px" /></a>&nbsp;&nbsp;&nbsp;
  <a href="#" onclick="funcdisplay('3')">  <img src="images/image3.jpg"width="50px" style="z-index: 105; left: 392px; position: absolute; top: 95px" />
 </a>&nbsp;&nbsp;
 <a href="#" onclick="funcdisplay('4')"> <img src="images/image4.jpg"width="50px" style="z-index: 106; left: 476px; position: absolute; top: 95px" /></a>&nbsp;&nbsp;
    <input type="button" value="previous" onClick='changeImage(-1);' style="z-index: 102; left: 291px; position: absolute; top: 473px" >
        &nbsp;&nbsp;&nbsp;
        <img src="images/image1.jpg"name="myimage" id="myimage"width=250px height=250px style="z-index: 107; left: 256px; position: absolute; top: 199px">
    <input type="button" value="next" onClick='changeImage(1);' style="z-index: 101; left: 401px; position: absolute; top: 474px">



    </div>
    </form>
</body>

here the sites which i have collected from forums:
http://www.codeproject.com/aspnet/ImageGallery.asp
http://www.codeproject.com/aspnet/ImageGalleryImageManager.asp
http://www.codeproject.com/aspnet/CatalogViewPhotoGallery.asp
http://www.codeproject.com/aspnet/imagegalleriesasp.asp
http://www.codeproject.com/aspnet/CPImageGallery.asp
http://www.codeproject.com/aspnet/Photo_gallery.asp
http://www.codeproject.com/useritems/ImageSlideShow.asp
u can also do that using iframe

thanks Greeny_1984
but i want to load my pic from database, now i can not how to get value, imageUrl from my database to javascript code. Can you help me

Edited 3 Years Ago by mike_2000_17: Fixed formatting

you cannot use javascript to do this unles syour using something like ajax. in which case you will require server side coding.

you could use AJAX to update the image every so many seconds.

google it and try some examples.

This article has been dead for over six months. Start a new discussion instead.