Eamon Barker's eb.NET

Not quite vb.NET, but getting close!

Filter by APML

Search

Profiles/Groups

Google Ads

Calendar

Su	Mo	Tu	We	Th	Fr	Sa
26	27	28	29	30	31	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	1	2	3	4	5	6

Disclaimer

All postings are provided AS IS with no warranties, and confer no rights.

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

Visitor Map

Welcome to eb.NET... a place that I can keep the things that help me in my day, that might help you in your's!

| SharePoint Tip: Tidying up SQL Files in SharePoint >>

jQuery (using Galleria) with the File System

Accessing images files in the file system and displaying them in Galleria!

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"

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

            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.

Dim ImageName

Dim ImageFileName

If Images.Count > 0 Then

    With New StringBuilder

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

        For Each File In Images

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

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

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

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

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

        Next

        .AppendLine("</ul>")

        litImages.Text = .ToString

    End With

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):

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

  

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

  

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

  

<script type="text/javascript"> 

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

</script>