jQuery Slideshow for a selected folder

C#

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

I am getting error message here like "Microsoft JScript runtime error: The value of the property '$' is null or undefined, not a Function object"

and i am not getting slideshow

Hello sir.. Do you have sample code to download? tnx

Hi, this is a sample page (I've called it sample.aspx)

ASP.NET

<%@ Page Title="Sample Page" Language="VB" AutoEventWireup="false" CodeFile="sample.aspx.vb" Inherits="sample" %>
<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>
<body>
	<h1>Sample Page</h1>
	<div id="slideshow" runat="server"></div>
</body>
</html>

Code Behind:

Imports System.IO

Partial Class bim
Inherits System.Web.UI.Page

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

If Not IsPostBack Then

PopulatePhotos()

End If

End Sub

Private Sub PopulatePhotos()

Dim oDir As New DirectoryInfo(Server.MapPath("images/backgrounds"))
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("images\backgrounds\{0}", fileList(i))
If i = 0 Then .Attributes.Add("class", "active")

End With

slideshow.Controls.Add(oImage)

Next

End Sub
End Class

Hello.

I follow your code that was given above.. It was very cool....
first try it doesn't do some slideshow.
so that i add = clientidmode="Static on div.

and it works...

Thank so much for this..
Smile | :)

it Gives me a good time today..

God bless.. Smile | :)

more power..

modified 2-Jul-13 6:47am.

Errata

Sorry, there was a typo in the sample code

Where it shows

VB

Partial Class bim

It should be

VB

Partial Class sample

Hi Drew, thanks for making this.

I'm working with a fairly basic knowledge so bear with me. I understand where the content in the html document goes, but I got lost with the second step in your instructions.

What exactly do I do with this content?

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

Am I creating a new file on the server for this, and if so what is the name/extension. I don't see in the HTML where any other file is called on.

Thank you for your help!

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

I am trying to create a html page. So how do I use the above codes? Do you have a sample project?

Is your page a regular html page or an ASP.NET Web Form?

Its html

I copied the code exactly and feel like I am very close. The issue I am having is the webpage displays every image in the directory now, it does not create a 1 at a time slideshow. Any ideas as to what I am doing wrong? Thanks for all the great work!

jQuery Slideshow for a selected folder

Introduction

Using the code

Points of Interest

History

License

Comments and Discussions