0

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

3
Contributors
4
Replies
5
Views
9 Years
Discussion Span
Last Post by Fungus1487
0

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.

0

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 by mike_2000_17: Fixed formatting

0

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 by mike_2000_17: Fixed formatting

0

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 topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.