Dynamic add-on for Ultimate Fade in Slide Show

[gchq]

The Ultimate fade in slide show is great - but if you want to include a lot of images it's rather a lot of code to keep re-writing.

I've adapted this to run from a DataBase Supply from a group of images in seperate folders - ImageButtons are created on the fly (this will produce up to 200 image buttons, 25 per page). Click the image button and you get a slide show for all the image files in that folder (unlimited)

1. Create a new ASPX page and insert the Slide Show JavaScript.

Remove this part ->

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 454, 700, 0, 3000, 1)// R for Random
//new fadeshow(fadeimages2, 140, 225, 0, 3000, 0)
 
</script>

Create a DIV to house the slide show, give it a name and ID and runat="server" Mine has the ID ImageViewer

Next go to the code behind page and create this sub

Public Sub ImageFaderVar2(ByVal IndexMax As Integer, ByVal Folder As String, ByVal FileStart As String, ByVal FileFirstNo As Integer, ByVal PreceedingZero As Integer)
        Dim ImageFader As String = "<script language='javascript'>" & _
        "var i=0; " & _
        "var vImage=" & FileFirstNo & "; " & _
        "var vPreceedingZero=" & PreceedingZero & "; " & _
        "var NextPic=''; " & _
        "var vNext=0; " & _
        "var target01 = ''; " & _
        "var target02 = ''; " & _
        "var target03 = ''; " & _
        "if(vPreceedingZero == 2) { " & _
        "target01='00'; " & _
        "target02='0'; " & _
        "target03=''; } " & _
        "else if(vPreceedingZero == 3) { " & _
        "target01='000'; " & _
        "target02='00'; " & _
        "target03='0'; } " & _
        "else { " & _
        "target01='0'; " & _
        "target02=''; " & _
        "target03=''; } " & _
        "var fadeimages=new Array(); " & _
        "while (i <=" & IndexMax & ") { " & _
        "vNext=(vImage+i); " & _
        "if((vNext >= 10)) { " & _
        "NextPic= target02 + vNext; } " & _
        "else if((vNext > 99)) { " & _
        "NextPic = target03 + vNext; } " & _
        "else if((vNext <= 9)) { " & _
        "NextPic = target01 + vNext; }" & _
        "fadeimages[+i]=['file:///K:/Backup/sk/" & Folder & "/" & FileStart & "' + NextPic + '.jpg', '', '']; " & _
        "i = i+1; " & _
        "} " & _
        "var img1 = new Image(); " & _
        "img1.src = fadeimages; " & _
        "var vWidth = 200; " & _
        "var vHeight = 200; " & _
        "vWidth = img1.width; " & _
        "vHeight = img1.height; " & _
        "var DocHeight = 200; " & _
        "var DocWidth = 200; " & _
        "if(( vWidth > vHeight)) { " & _
        "DocWidth = 1200; " & _
        "DocHeight = 800; } " & _
        "if((vHeight > vWidth)) { " & _
        "DocWidth = 800; " & _
        "DocHeight = 1200; } " & _
        "top.document.getElementById('ImageViewer').value=new fadeshow(fadeimages, DocWidth, DocHeight, 0, 3000, 1); " & _
        "document.write(vWidth); " & _
        "</script>"
        ImageFader = ImageFader.Replace("ImageViewer", ImageViewer.ClientID)
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "ImageFader", ImageFader)
    End Sub

I've chosen to get get the files direct, but you can use a virtual path

If you wish you can manually insert buttons or image buttons then reference that above sub using the onclick event, passing the following variables
IndexMax the number of files in the folder
Folder the name of the folder where the image files reside
FileStart a text string to determine the start of the file - if a file is called our-vacation_001 then this text string is "my_vacation_"
FileFirstNo the first number in the sequence - usually 0 or 1
PreceedingZero the number of preceeding zeros to the file name file_001.jpg would have 2, file_01 would have 1 and file_1.jpg would have 0


The other option is to load this information into a database and retrieve this at page load time

 Private Sub FillButtons()

        
        Dim i As Integer
        Dim vTop As Integer = 90
        Dim iStart As Integer
        Dim iEnd As Integer
        Panel1.Controls.Clear()
        Panel1.DataBind()

        'Determine how many records there are..
        strSQL = "SELECT MAX(ImageView_ID) FROM ImageView"
        cmd = New OdbcCommand(strSQL, conn)
        Dim vRecords As Integer
        conn.Open()
        vRecords = cmd.ExecuteScalar
        conn.Close()
        cmd.Dispose()

        '=====================Determine number of records from page number

        Dim vPageNo As Integer = PageNo.Text
        If vPageNo = 1 Then  'Records 1 - 25
            If vRecords < 26 Then
                iStart = 1
                iEnd = vRecords
            Else
                iStart = 1
                iEnd = 25
                Button1.Visible = True
                Button2.Visible = False
            End If ' End records if

        ElseIf vPageNo = 2 Then 'Records 26 - 50
            If vRecords < 51 Then
                iStart = 26
                iEnd = vRecords
                Button1.Visible = False
                Button2.Visible = True
            Else
                iStart = 26
                iEnd = 50
                Button1.Visible = True
                Button2.Visible = True
            End If 'end records if - next ElseIf after this

        ElseIf vPageNo = 3 Then 'Records 51 - 75
            If vRecords < 76 Then
                iStart = 51
                iEnd = vRecords
            Else
                iStart = 51
                iEnd = 75
            End If

        ElseIf vPageNo = 4 Then 'Records 76 - 100
            If vRecords < 101 Then
                iStart = 76
                iEnd = vRecords
            Else
                iStart = 76
                iEnd = 100
            End If

        ElseIf vPageNo = 5 Then 'Records 101 - 125
            If vRecords < 126 Then
                iStart = 101
                iEnd = vRecords
            Else
                iStart = 101
                iEnd = 125
            End If

        ElseIf vPageNo = 6 Then 'Records 126 - 150
            If vRecords < 151 Then
                iStart = 126
                iEnd = vRecords
            Else
                iStart = 126
                iEnd = 150
            End If

        ElseIf vPageNo = 7 Then 'Records 151 - 175
            If vRecords < 176 Then
                iStart = 151
                iEnd = vRecords
            Else
                iStart = 151
                iEnd = 175
            End If

        ElseIf vPageNo = 8 Then 'Records 176 - 200
            If vRecords < 201 Then
                iStart = 176
                iEnd = vRecords
            Else
                iStart = 176
                iEnd = 200
            End If


        End If 'End page number if

        '=====================END Determine number of records from page number


        Dim vImageButton As ImageButton

        For i = iStart To iEnd
            Dim vFile As String
            If i < 10 Then
                vFile = "0" & i
            Else
                vFile = i
            End If
            vImageButton = New ImageButton()

            vImageButton.ID = "ImageButton" & i
            ' vImageButton.Style("Position") = "Absolute"
            'vImageButton.Style("Top") = vTop & "px"
            'vImageButton.Style("Left") = "30px"
            vImageButton.Width = 80
            vImageButton.ImageUrl = "Images/" & vFile & ".jpg"
            AddHandler vImageButton.Click, AddressOf ButtonClick
            Panel1.Controls.Add(vImageButton)


            vTop = vTop + 102
        Next

        Label1.Text = "Page - " & PageNo.Text


    End Sub

Part two next post...

[gchq]

Next create the handler for the imagebutton click event - this tells ImageButton where to load the file from and the name of each file..

 Protected Sub ButtonClick(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs)
        Dim vValue As String = CType(sender, ImageButton).ID
        'Get the file value
        Dim vLength As Integer = vValue.Length
        Dim vFileNo As String
        If vLength = 12 Then
            vFileNo = Right(vValue, 1)
        ElseIf vLength = 13 Then
            vFileNo = Right(vValue, 2)
        ElseIf vLength = 14 Then
            vFileNo = Right(vValue, 3)
        End If

        strSQL = "SELECT IndexMax, Folder, FileStart, FileFirstNo, PreceedingZero FROM ImageView WHERE ImageView_ID = " & vFileNo
        cmd = New OdbcCommand(strSQL, conn)
        Dim reader As OdbcDataReader
        conn.Open()
        reader = cmd.ExecuteReader
        Dim vIndexMax As Integer
        Dim vFolder As String
        Dim vFileStart As String
        Dim vFileFirstNo As Integer
        Dim vPreceedingZero As Integer

        Dim vtIndexMax As Integer = reader.GetOrdinal("IndexMax")
        Dim vtFolder As Integer = reader.GetOrdinal("Folder")
        Dim vtFileStart As Integer = reader.GetOrdinal("FileStart")
        Dim vtFileFirstNo As Integer = reader.GetOrdinal("FileFirstNo")
        Dim vtPreceedingZero As Integer = reader.GetOrdinal("PreceedingZero")

        Try
            If Not reader.Read() Then
                MsgBox1.alert("Data read error!")
                Exit Sub
            End If
            Do
                Try
                    vIndexMax = reader.GetValue(vtIndexMax)
                    vFolder = reader.GetValue(vtFolder)
                    vFileStart = reader.GetValue(vtFileStart)
                    vFileFirstNo = reader.GetValue(vtFileFirstNo)
                    vPreceedingZero = reader.GetValue(vtPreceedingZero)
                Catch ex As Exception
                    MsgBox1.alert(ex.Message)
                    Exit Sub
                End Try
            Loop While reader.Read()
        Catch ex As Exception
            MsgBox1.alert(ex.Message)
            Exit Sub
        End Try
        conn.Close()
        cmd.Dispose()
        reader.Close()

        ImageFaderVar2(vIndexMax, vFolder, vFileStart, vFileFirstNo, vPreceedingZero)


    End Sub

Then just add two buttons to move through the 'pages' and load the next (or last) set of ImageButtons

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim vPageNo As Integer = PageNo.Text
        Dim vNextPage As Integer = vPageNo + 1
        PageNo.Text = vNextPage
        FillButtons()
    End Sub
    
    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        Dim vPageNo As Integer = PageNo.Text
        Dim vNextPage As Integer = vPageNo - 1
        PageNo.Text = vNextPage
        FillButtons()
    End Sub

And finally call FillButtons() from the Page_Load event

Add some images to the images/ folder that correspond to the slide show you wish to view and name them sequentially so that they correspond to the id number of the data record - 01.jpg, 02.jpg...

That's it - using this system I was able to load 86 folders (could have 200 without updating the code) with an average 30 images in each folder in about one hour,,,

Happy coding..