Click here to Skip to main content
13,458,736 members
Click here to Skip to main content
Add your own
alternative version


11 bookmarked
Posted 22 Apr 2013

jQuery Slideshow for a selected folder

, 24 Apr 2013
Rate this:
Please Sign up or sign in to vote.
Simple jQuery ASP.NET Slideshow


Jon Raasch has an excellent article about using jQuery for a simple image slideshow on his blog ( 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).


<script src="" 

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

        Simple jQuery Slideshow Script
        Released by Jon Raasch ( 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');

        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 = $ ? $
            : $('#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 ] );


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

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

<style type="text/css">

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

    #cphBackground_slideshow {

    #cphBackground_slideshow IMG {

    #cphBackground_slideshow {

    #cphBackground_slideshow IMG.last-active {


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

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.


This is the first version.


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


About the Author

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(!)

You may also be interested in...

Comments and Discussions

QuestionI am getting an error like"Microsoft JScript runtime error: The value of the property '$' is null or undefined, not a Function object" Pin
Member 1210082830-Oct-15 4:25
memberMember 1210082830-Oct-15 4:25 
QuestionSample Code to Download Pin
macrose30-Jun-13 18:24
membermacrose30-Jun-13 18:24 
AnswerRe: Sample Code to Download Pin
drewman51501-Jul-13 3:17
professionaldrewman51501-Jul-13 3:17 
GeneralRe: Sample Code to Download : Pin
macrose1-Jul-13 17:12
membermacrose1-Jul-13 17:12 
AnswerRe: Sample Code to Download Pin
drewman51501-Jul-13 7:27
professionaldrewman51501-Jul-13 7:27 
GeneralRe: Sample Code to Download Pin
JesusDoesVegas15-Jan-14 7:56
memberJesusDoesVegas15-Jan-14 7:56 
GeneralRe: Sample Code to Download Pin
drewman515015-Jan-14 23:03
professionaldrewman515015-Jan-14 23:03 
GeneralRe: Sample Code to Download Pin
Member 1193211224-Aug-15 8:08
memberMember 1193211224-Aug-15 8:08 
GeneralRe: Sample Code to Download Pin
drewman515025-Aug-15 4:37
professionaldrewman515025-Aug-15 4:37 
GeneralRe: Sample Code to Download Pin
Member 1193211226-Aug-15 3:11
memberMember 1193211226-Aug-15 3:11 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180323.1 | Last Updated 24 Apr 2013
Article Copyright 2013 by drewman5150
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid