Slideshow using VB.NET & ASP.NET


I am new to ASP.NET & VB.NET. I have a question with regards to slideshows. How can the contents of a folder be dynamically displayed as thumbnails on a website?
Thanks in advance
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

GitchoConnect With a Mentor Commented:
Do you have your webserver set up ?  

If so, save this as "index.asp" in your root directory (define your image path in the code) :


<%@ Import Namespace="System.IO" %>
<script runat="server" language="VB">
  Sub Page_Load(sender as Object, e as EventArgs)
    'Get list of images
    Dim dirInfo as New DirectoryInfo(Server.MapPath(""))
    Dim images() as FileInfo = FilterForImages(dirInfo.GetFiles())
    'Determine the current image to show
    Dim imgIndex as Integer = 0
    If Not Request.QueryString("N") is Nothing AndAlso IsNumeric(Request.QueryString("N")) then
      imgIndex = CInt(Request.QueryString("N"))
    End If
    currentImgTitle.Text = "You are Viewing: " & _
          Path.GetFileNameWithoutExtension(images(imgIndex).Name) & _
          " (" & imgIndex + 1 & " of " & images.Length & ")"
    currentImg.ImageUrl = Path.GetFileName(images(imgIndex).Name)
    If imgIndex > 0 then
      lnkPrev.NavigateUrl = "Default.aspx?N=" & imgIndex - 1
    End If
    If imgIndex < images.Length - 1 then
      lnkNext.NavigateUrl = "Default.aspx?N=" & imgIndex + 1
    End If
    dlIndex.DataSource = images
  End Sub

  Function FilterForImages(images() as FileInfo) as FileInfo()
    Dim newImages as New ArrayList(images.Length)
    Dim i as Integer
    For i = 0 to images.Length - 1
      If Path.GetExtension(images(i).Name.ToLower()) = ".jpg" OrElse _
         Path.GetExtension(images(i).Name.ToLower()) = ".jpeg" OrElse _  
         Path.GetExtension(images(i).Name.ToLower()) = ".png" OrElse _
         Path.GetExtension(images(i).Name.ToLower()) = ".gif" then
      End If
    Return CType(newImages.ToArray(GetType(FileInfo)), FileInfo())
  End Function
  Sub dlIndex_ItemDataBound(sender as Object, e as DataListItemEventArgs)
    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem then
      'Get the Hyperlink
      Dim hl as HyperLink = CType(e.Item.FindControl("lnkPic"), HyperLink)
      'Set the Text and Navigation properties
      hl.Text = Path.GetFileNameWithoutExtension(DataBinder.Eval(e.Item.DataItem, "Name").ToString()) & _
             " (" & Int(DataBinder.Eval(e.Item.DataItem, "Length") / 1000) & " KB)"
      hl.NavigateUrl = "Default.aspx?N=" & e.Item.ItemIndex
    End If
  End Sub

  <STYLE TYPE="text/css">
    body { font-family:Verdana;font-size: medium;}
    .ImageTitle { font-weight:bold; font-size:large;}
    .index {font-size: small;}
    .NavLink { background-color: yellow; font-weight: bold; }

    <asp:Label runat="server" id="currentImgTitle" CssClass="ImageTitle" /><br />
    <asp:Image runat="server" id="currentImg" />
    <asp:HyperLink runat="server" CssClass="NavLink" id="lnkPrev" Text="< Previous" /> |
    <asp:HyperLink runat="server" CssClass="NavLink" id="lnkNext" Text="Next >" />
    <asp:DataList runat="server" id="dlIndex" OnItemDataBound="dlIndex_ItemDataBound"
        RepeatColumns="3" CssClass="index">
        <li><asp:HyperLink runat="server" id="lnkPic" /></li>


There's a number of different ways to do it.  

If you have your all your thumbnails in the same folder, you can read them from the directory into an array, and output them on your page.

If you need to dynamically resize images to thumbnails, here's a good article on it here :

There's an article to show you how to read images from a directory & display them in a slideshow here :

Hope that helps ...
Never miss a deadline with

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

wilkersonsAuthor Commented:

thanks. But some how i am not able to run these programs ...i need to do some reading about the above mentioned programs..

will get back soon
Const IMAGE_DIRECTORY As String = "images/"
        Dim pics() As String
        Dim s As String, html As String

        Dim i As Integer
        Dim objFile As IO.FileInfo

        pics = IO.Directory.GetFiles(IMAGE_DIRECTORY)

        For i = 0 To pics.Length - 1
            objFile = New IO.FileInfo(pics(i))

        dlPictures.DataSource = pics
wilkersonsAuthor Commented:
YZlat can you pl explain the code. How do I use this code?
wilkersons the above code is perfect for what you are trying to accomplish, when you get familiar with this code and you prefer to give it some more dynamic look generate page like his:

all you have to do is give image array proper definition (image source, x-position, y-position, width and height.)
I'm sure it will look more decent then example on 4guysfromrolla...

(animate)?images[0][0]=new Image():images[0][0]=[];
(animate)?images[0][1]=new Image():images[0][1]=[];
(animate)?images[0][2]=new Image():images[0][2]=[];

(animate)?images[0][3]=new Image():images[0][0]=[];
(animate)?images[0][4]=new Image():images[0][1]=[];
(animate)?images[0][5]=new Image():images[0][2]=[];

(animate)?images[0][6]=new Image():images[0][6]=[];
(animate)?images[0][7]=new Image():images[0][7]=[];
(animate)?images[0][8]=new Image():images[0][8]=[];

(animate)?images[0][9]=new Image():images[0][9]=[];
(animate)?images[0][10]=new Image():images[0][10]=[];

images[1]=0;        // x
images[2]=0;        // y
images[3]=200;      // w
images[4]=150;      // h
images[5]="img1";   // name
images[6]=0;        // sequence

the full example of this source code is availabe from that path I posted above this sectiom...


      ''declare your directory(where images are stored)
      Const IMAGE_DIRECTORY As String = "images/"

      ''declare an array of strings
        Dim pics() As String

        Dim s As String, html As String
        Dim i As Integer
        Dim objFile As IO.FileInfo

      ''fill an array of strings with image file names
        pics = IO.Directory.GetFiles(IMAGE_DIRECTORY)

      ''loop through the data in a array and read it into file object
        For i = 0 To pics.Length - 1
            objFile = New IO.FileInfo(pics(i))

        dlPictures.DataSource = pics
YZat, zdarova zemliak vi gde jiviote..?
wilkersonsAuthor Commented:
Thanks guys for all your answers. Got it working. I will give this one to Gitcho.
All Courses

From novice to tech pro — start learning today.