Click here to Skip to main content
Click here to Skip to main content
Go to top

jQuery Slideshow for a selected folder

, 24 Apr 2013
Rate this:
Please Sign up or sign in to vote.
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).

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

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

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)

Share

About the Author

drewman5150
Software Developer (Senior)
United Kingdom United Kingdom
I have been developing software commercially for 15 years, from Access 2 through VBA for Access '97, Visual Basic 6 and all .NET frameworks to 4.5
 
A believer in keeping things simple, I am constantly evaluating more efficient ways to "do the same thing"
 
Aside from programming, I am a keen musician, photographer and comedian(!)
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionSample Code to Download Pinmembermacrose30-Jun-13 18:24 
AnswerRe: Sample Code to Download Pinprofessionaldrewman51501-Jul-13 3:17 
GeneralRe: Sample Code to Download : [modified] Pinmembermacrose1-Jul-13 17:12 
AnswerRe: Sample Code to Download Pinprofessionaldrewman51501-Jul-13 7:27 
GeneralRe: Sample Code to Download PinmemberJesusDoesVegas15-Jan-14 7:56 
GeneralRe: Sample Code to Download Pinprofessionaldrewman515015-Jan-14 23:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 24 Apr 2013
Article Copyright 2013 by drewman5150
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid