jQuery Slideshow for a selected folder

drewman5150

5.00/5 (1 vote)

24 Apr 2013CPOL1 min read

70K

Simple jQuery ASP.NET Slideshow

Introduction

Jon Raasch has an excellent article about using jQuery for a simple image slideshow on his blog (http://jonraasch.com/blog/a-simple-jquery-slideshow ) and I've decided to expand on this by populating the images dynamically from a folder using code behind - this way you can keep your image gallery fresh, exciting and all of the other wonderful things that make websites appear "maintained!"

Using the code

First things first, we need to insert the following into the head section of your page (I've not gone into any great detail of the below as this is described on Jon's page).

HTML

<head>

<script src="http://www.codeproject.com/ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" 
  type="text/javascript"></script><script type="text/javascript">

    /*** 
        Simple jQuery Slideshow Script
        Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, 
        not responsible for anything, etc.  Please link out to me if you like it :)
    ***/

    function slideSwitch() {
        var $active = $('#cphBackground_slideshow IMG.active');

        if ($active.length == 0) $active = $('#cphBackground_slideshow IMG:last');

        // use this to pull the images in the order they appear in the markup
        var $next = $active.next().length ? $active.next()
            : $('#cphBackground_slideshow IMG:first');

        // uncomment the 3 lines below to pull the images in random order

        // var $sibs  = $active.siblings();
        // var rndNum = Math.floor(Math.random() * $sibs.length );
        // var $next  = $( $sibs[ rndNum ] );


        $active.addClass('last-active');

        $next.css({ opacity: 0.0 })
            .addClass('active')
            .animate({ opacity: 1.0 }, 1000, function () {
                $active.removeClass('active last-active');
            });
    }

    $(function () {
        setInterval("slideSwitch()", 7500);
    });

</script>
<style type="text/css">

    /*** set the width and height to match your images **/

    #cphBackground_slideshow {
        position:relative;
        height:350px;
    }

    #cphBackground_slideshow IMG {
        position:absolute;
        top:0;
        left:0;
        z-index:8;
        opacity:0.0;
    }

    #cphBackground_slideshow IMG.active {
        z-index:10;
        opacity:1.0;
    }

    #cphBackground_slideshow IMG.last-active {
        z-index:9;
    }

</style>
</head>

Then, somewhere in the body of your page insert a empty div called slideshow:

HTML

<div id="slideshow" runat="server"></div>

Now then, to the code behind, where we are going to populate the slideshow div with images, which ultimately jQuery will handle almost magically.

We create a simple sub called "PopulateGallery" which will parse the contents of a folder containing images, apply a filter based on the image type you have in there (jpg, png etc) and fill an FileInfo array with the filenames.

We then create an HTMLImage control and loop through the array applying the filename (and path) to the src attribute, before adding the control to the div "slideshow":

VB.NET

Dim oDir As New DirectoryInfo(Server.MapPath("<relative path the images>"))
Dim fileList() As FileInfo = oDir.GetFiles("*.jpg")
Dim iFileCount As Integer = fileList.Count
iFileCount -= 1
Dim oImage As HtmlImage
For i As Integer = 0 To iFileCount
    oImage = New HtmlImage
    With oImage
        .Src = String.Format("path\{0}", fileList(i))
        If i = 0 Then .Attributes.Add("class", "active")
    End With
    slideshow.Controls.Add(oImage)
Next

Points of Interest

This was written to replace an old flash based slideshow that we used on our corporate site - with the proliferation of mobile devices it was becoming increasingly clear that a new way of doing things was required.

Having come across the excellent implementation by Jon Raasch, it was interesting to apply the dynamic loading with the added benefit that the gallery can be updated at any time without having to update any code.

History

This is the first version.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)