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