Click here to Skip to main content
11,496,146 members (324 online)
Click here to Skip to main content

jQuery Slideshow for a selected folder

, 24 Apr 2013 CPOL 26K 11
Simple jQuery ASP.NET Slideshow
The site is currently in read-only mode for maintenance. Posting of new items will be available again shortly.

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 Pin
macrose30-Jun-13 19:24
membermacrose30-Jun-13 19:24 
AnswerRe: Sample Code to Download Pin
drewman51501-Jul-13 4:17
professionaldrewman51501-Jul-13 4:17 
GeneralRe: Sample Code to Download : [modified] Pin
macrose1-Jul-13 18:12
membermacrose1-Jul-13 18:12 
AnswerRe: Sample Code to Download Pin
drewman51501-Jul-13 8:27
professionaldrewman51501-Jul-13 8:27 
GeneralRe: Sample Code to Download Pin
JesusDoesVegas15-Jan-14 8:56
memberJesusDoesVegas15-Jan-14 8:56 
GeneralRe: Sample Code to Download Pin
drewman515016-Jan-14 0:03
professionaldrewman515016-Jan-14 0:03 
Hi,

You should add the following to the code behind of your aspx page:

 
Imports System.IO
 
 Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
 
        If Not IsPostBack Then
                    
            PopulateGallery()
 
        End If
 
    End Sub
 
Private Sub PopulateGallery
 
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
 
End Sub

Just to confirm though, are you running this on IIS with ASP.NET or are you trying to create this in a html page (file extension .htm or .html)?

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 | Terms of Use | Mobile
Web02 | 2.8.150520.1 | Last Updated 24 Apr 2013
Article Copyright 2013 by drewman5150
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid