Today I was given the task of hooking jQuery up to one of our client's sites, which has been developed to take advantage of the VERY cool features of SP1 for the .NET 3.5 framework.

So I set about accessing the data. This task would be simply connecting to a folder on the server that has all the images I want (Yes, I know I should have stored these in much more elegant way, but this was a small, quick and dirty tweak).

Code Behind

In this part of the post, I will cover off all the plumbing behind the scene that you'll need to get this working.

Accessing the Files

To access a file using I used the code below, basically using the GetFiles function in the file system class. Note, I have used a variable "LocalPath" to store the location of the images on the server file system, e.g. Dim LocalPath = "c:\projects\ImgGal\Images"

   1: Dim Images = My.Computer.FileSystem.GetFiles( _

   2:             LocalPath, FileIO.SearchOption.SearchAllSubDirectories, "*.*")

Writing out the Unordered List

The above code returns a collection of file names for me to mess with, and mess I shall! Next what I need to do is grab the file names and location and create my unordered list that Galleria. In the code snippet below I loop through the file collection, grab the file name and used that in the image URL. I also use the same file name as the title of the image. The filename for the image's are formatted using "-" instead of " ", e.g. this-is-an-example.jpg. Once the string builder is full of my unordered list I write it to my literal control in the aspx page.

   1: Dim ImageName

   2: Dim ImageFileName

   3: If Images.Count > 0 Then

   4:     With New StringBuilder

   5:         .AppendLine("<ul class='gallery'>")

   6:         For Each File In Images

   7:             ImageFileName = File.Substring(LocalPath.Length).Replace("\", "/")

   8:             ImageName = Left(ImageFileName, ImageFileName.Length - 3).Replace("/", "")

   9:             ImageName = ImageName.Replace("-", " ")

  10:             .AppendLine("<li><img src='/TrainingImg" & ImageFileName & "' title='" & ImageName & _

  11:                         "' alt='" & ImageName & "'></li>")

  12:         Next

  13:         .AppendLine("</ul>")

  14:         litImages.Text = .ToString

  15:     End With

  16: End If

ASPX Code

The front end of the page is fairly simple.

You will need to have the jquery js file in your solution, along with the galleria js and css files.

In the header of the page insert the following code (changing the location of the file to wherever you have it):

   1: <link href="../Global/galleria.css" rel="stylesheet" type="text/css" media="screen">

   2:  

   3: <script type="text/javascript" src="../Global/jquery-1.2.6.js"></script>

   4:  

   5: <script type="text/javascript" src="../Global/jquery.galleria.js"></script>

   6:  

   7: <script type="text/javascript"> 

   8:     $(document).ready(function(){ $('ul.gallery').galleria(); }) 

   9: </script>

And that should be that!