Browse images and media files in Asp.Net like in a photo gallery

Two or three years ago i needed a way to show my users the content i published on my web community. Due to hosting problems (i had no database) i needed something to list the files into the directories and show the content. I decided to write a little custom control that permits the users to navigate throug the directories and see the images, videos and ear the audio streams. Due to the high number of files i provided pagination too.

Here is the code i wrote to make this:

Imports System.IO
 
Public Class MediaLister
    Inherits System.Web.UI.UserControl
 
#Region " Codice generato da Progettazione Web Form "
 
<System.Diagnostics.DebuggerStepThrough()>_
Private Sub InitializeComponent()
 
End Sub
Protected WithEvents LitFiles As System.Web.UI.WebControls.Literal
Protected WithEvents LitPages As System.Web.UI.WebControls.Literal
Protected WithEvents LitDirs As System.Web.UI.WebControls.Literal
 
Private designerPlaceholderDeclaration As System.Object
 
Private Sub Page_Init(ByVal sender As System.Object, _
ByVal e As System.EventArgs)  Handles MyBase.Init
InitializeComponent()
End Sub
 
#End Region
Public FirstItem As Boolean = True
 
Private Sub BuildPagers(ByVal ItemsCount As Integer, _
ByVal MaxItems As Integer)
  Dim i As Integer
  Dim pages As Integer
  pages = ItemsCount / MaxItems
  If (pages * MaxItems) < ItemsCount Then
      pages += 1
  End If
  LitPages.Text = "<br><center>"
  For i = 0 To pages - 1
      LitPages.Text += "<a   href=index.aspx?Cat=" + _
      Request("Cat").Replace(" ", "%20") + "&SCat=" + _
      Request("SCat").Replace(" ", "%20") + _
      "&Page=" + i.ToString() + ">" + (i + 1).ToString() + _
      "</a>&nbsp;"
      If (i + 1) Mod 18 = 0 Then
          LitPages.Text += "<br>"
      End If
  Next
 
End Sub
 
Private Sub ShowItem(ByVal Cat As String, ByVal SubCat As String,_
  ByVal fName As String)
   Dim ext As String
   Dim fPath As String
   ext = fName.Substring(fName.LastIndexOf(".") + 1)
   ext = ext.ToLower()
   Select Case ext
       Case "jpg", "bmp", "gif"
           '    LitFiles.Text += _
           "<td><img width=160 src=""pub/Lib/" +_
           Cat + "/" + SubCat + "/" + fName + """ border=0></td>"
           fPath = "pub/Lib/" + Cat + "/" + _
           SubCat + "/" + fName
           If FirstItem Then
               FirstItem = False
               LitFiles.Text += "<IMG id=""Foto"" src=""" + _
               fPath.Replace(" ", "%20") + _
               """ width=500 name=""Foto"">"
           End If
           LitFiles.Text += _
           "<td><a href=# onClick=""ChangeImg('" + _
           fPath.Replace(" ", "%20").Replace("\\", "/") + _
           "');""><img src=""ShowThumbnail.aspx?w=80&img=" + _
           fPath + """ border=0></a></td>"
       Case "wav", "mid", "mp3"
           LitFiles.Text += _
           "<td><embed width=160 height=50 src=""pub/Lib/"+_
           Cat + "/" + SubCat + "/" + fName + _
           """ type=audio/mpeg autostart=false loop=true></td>"
       Case "avi", "mpg", "wmv"
           LitFiles.Text += _
           "<td><embed width=160 height=160 src=""pub/Lib/"+_
           Cat + "/" + SubCat + "/" + fName + _
           """  autostart=false loop=false></td>"
   End Select
End Sub
 
Private Sub LoadDirList(ByVal Cat As String, _
  ByVal SubCat As String)
   Dim tmpfile As String
   Dim tmpName As String
   Dim i As Integer
   Dim k As Integer
   Dim MaxCols As Integer = 4
   Dim MaxRows As Integer = 3
   Dim MaxItems = MaxCols * MaxRows
   Dim ItemsCount = 0
   Dim CurCol = 0
   Dim StartIndex As Integer
 
   tmpfile = Server.MapPath("/") + "pub\\Lib\\" + _
   Cat + "\\" + SubCat
   Dim files() As String = Directory.GetDirectories(tmpfile)
   If files.Length > 0 Then
       LitDirs.Text += _
       "<table border=0 cellspacing=5 cellpadding=5><tr>"
       CurCol = 0
       For i = 0 To files.Length - 1
           tmpName = files(i).ToString()
           tmpName = tmpName.Substring(tmpName.LastIndexOf("\\")+1)
           tmpName = tmpName.Replace(" ", "%20")
           CurCol += 1
           If CurCol > MaxCols Then
               LitDirs.Text += "</tr><tr>"
               CurCol = 1
           End If
           LitDirs.Text += _
           "<td align=center><a href=""Index.aspx?Cat=" + _
           Cat + "&SCat=" + SubCat + "\\" + tmpName + _
           """ ><img src=Folder.gif border=0><br>"+_
           tmpName.Replace("%20", "&nbsp;") + "</a></td>"
       Next
       For i = CurCol To MaxCols
           LitDirs.Text += "<td>&nbsp;</td>"
       Next
       LitDirs.Text += "</tr></table>"
   End If
 
End Sub
 
 
Private Sub LoadFileList(ByVal Cat As String,_
  ByVal SubCat As String,ByVal StartPage As Integer)
  Dim tmpfile As String
  Dim tmpName As String
  Dim i As Integer
  Dim MaxCols As Integer = 6
  Dim MaxRows As Integer = 1
  Dim MaxItems = MaxCols * MaxRows
  Dim ItemsCount = 0
  Dim CurCol = 0
  Dim StartIndex As Integer
  If StartPage = 0 Then
      LoadDirList(Cat, SubCat)
  End If
  tmpfile = Server.MapPath("/") + "pub\\Lib\\" + Cat + "\\" + SubCat
  Dim files() As String = Directory.GetFiles(tmpfile)
  If files.Length > 0 Then
      If SubCat.LastIndexOf("\\") > 0 Then
          LitFiles.Text = "<center><font size=4>" + Cat + _
          "</font> (<font size=3>" + _
          SubCat.Substring(SubCat.LastIndexOf("\\") + 1) + _
          ")</font><BR></center>"
      Else
          LitFiles.Text = "<center><font size=4>" + Cat + _
          "</font> (<font size=3>" + SubCat + _
          ")</font><BR></center>"
      End If
      BuildPagers(files.Length, MaxItems)
      i = StartPage * MaxItems
      StartIndex = i
      LitFiles.Text += _
      "<table border=0 align=center cellspacing=2 ><tr>"
      CurCol = 0
      While (i < (StartIndex + MaxItems) _
      	And i <= (files.Length() - 1))
          tmpName = files(i).ToString()
          tmpName = tmpName.Substring(tmpName.LastIndexOf("\\")+1)
          tmpName = tmpName.Replace(" ", "%20")
          i += 1
          CurCol += 1
          If CurCol > MaxCols Then
              LitFiles.Text += "</tr><tr>"
              CurCol = 1
          End If
          ShowItem(Cat, SubCat, tmpName)
      End While
      For i = CurCol To MaxCols
          LitFiles.Text += "<td>&nbsp;</td>"
      Next
      LitFiles.Text += "</tr></table>"
      LitPages.Text += "<br><br><font  >Sei a Pagina. " + _
      (StartPage + 1).ToString() + "</font><br></center>"
  End If
 
End Sub
 
Private Sub Page_Load(ByVal sender As System.Object, _
   ByVal e As System.EventArgs) Handles MyBase.Load
     FirstItem = True
     If Not Page.IsPostBack Then
         LoadFileList(Request("Cat"), Request("SCat"),_
          Request("Page"))
     End If
End Sub
 
End Class

Download this code: medialister.ascx.vb.txt

A working example of this code is visible at www.ircfiles.com , try to browse and see the content, it’s fast enough considering the really high number of images and other media files :)

Here there is the correctly written version of the code, i had to use a lot of “_” into the code here to make it fit the page.
In the zip file you can find the ShowThumbnail.aspx page too, it’s used to create image thumbs for faster page loading.

Download the Media Lister Source code



Leave a Reply