how can i createa slide show in aspx page

Question

thu_mai 0 Newbie Poster

16 Years Ago

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

asp.net

3 Contributors
4 Replies
108 Views
2 Days Discussion Span
Latest Post 16 Years Ago Latest Post by Fungus1487

Fungus1487 55 Posting Pro in Training

16 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

greeny_1984 14 Posting Whiz · Answer 1 · 2007-11-22T12:18:13+00:00

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

thu_mai 0 Newbie Poster · Answer 2 · 2007-11-23T12:52:57+00:00

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

Fungus1487 55 Posting Pro in Training · Answer 3 · 2007-11-23T16:44:30+00:00

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.