Slideshow using VB.NET & ASP.NET

Posted on 2004-08-20
Last Modified: 2012-05-05

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
Question by:wilkersons
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +1

Expert Comment

ID: 11854688
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 :


Expert Comment

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

Hope that helps ...

Author Comment

ID: 11855125

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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

LVL 35

Expert Comment

ID: 11855412
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

Author Comment

ID: 11855554
YZlat can you pl explain the code. How do I use this code?

Accepted Solution

Gitcho earned 250 total points
ID: 11856183
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>


LVL 13

Expert Comment

ID: 11857175
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...

LVL 35

Expert Comment

ID: 11891428

      ''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
LVL 13

Expert Comment

ID: 11892508
YZat, zdarova zemliak vi gde jiviote..?

Author Comment

ID: 11897484
Thanks guys for all your answers. Got it working. I will give this one to Gitcho.

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
$q.all is slower or not  in  Angularjs 2 36
Create animated movies for web page 18 119
need help with share buttons 11 67
Level out logo and increase size? 16 24
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to count occurrences of each item in an array.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question