Slide Show images using Datalist Control in ASP.NET

Hi..

In this article I am going to explain about slide show using datalist. Already I have written articles about slideshow using Ajax slide show extender, For your reference check below link..

http://vbdotnetaddict.blogspot.com/2011/07/how-to-slideshow-images-from-database.html

By using datalist is very simple and no need to write any javascript or anything. Image automatically changes for every 2 seconds. Before doing this process you must know how to store image url in database. For this to create separate folder for store an image. In my previous article I clearly explain How to store image URL in database and image file in folder, Please use this below for reference..

http://vbdotnetaddict.blogspot.com/2011/06/how-to-store-imageurl-in-database-and.html

Initially you store image in folder and store path in database, then add one datalist control, image control, timer,script manger and two link button used move to next image by user. Add 3 label for store the count of image.

Check the below client side coding…For reference

   <div>

    <asp:ScriptManager ID="ScriptManager1" runat="server">

            </asp:ScriptManager>       

<td align="center">

          <asp:UpdatePanel ID="UpdatePanel1" runat="server">

          <ContentTemplate >

        

           <table cellpadding ="0" cellspacing ="0">

           <tr>

           <td>

            <asp:DataList ID="DataList1" runat="server" RepeatColumns ="3" RepeatDirection ="Horizontal">

                                   <ItemTemplate >

                                       <asp:Image ID="imglst" runat="server" ImageUrl ='<%#eval("TRPIC1")%>' Width="70" Height="50"/>

                                   </ItemTemplate>

                                   </asp:DataList>

            </td>

             </tr>

           <tr>

          <td align="center" >

          <asp:LinkButton ID="lnkbtn1" runat="server"><</asp:LinkButton>&nbsp;

                                   <asp:LinkButton ID="lnkbtn2" runat="server">></asp:LinkButton>

                                   <asp:Label ID="lblCurrentIndex" runat="server" Text="0" Visible="False" ></asp:Label>

                                   <asp:Label ID="lblPageSize" runat="server" Text="3" Visible="False" ></asp:Label>

                                   <asp:Label ID="lblrecordcount" runat="server" Visible="False" ></asp:Label>

         

          <asp:Timer ID="Timer1" runat="server" Interval="2000">

                                </asp:Timer>

          </td>

          </tr>

            </table>

        </ContentTemplate>

        </asp:UpdatePanel>

             </td>

In timer setting i  have set the time for 2 seconds, an every 2 seconds the imgae has moved to next image.

Here I kept datalist inside update panel,Also you have to add script manager to run timer and update panel

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

        query = "select TRPIC1 from trdata"

        sqlcmd = New SqlCommand(query, con)

        con.Open()

        dataadapter = New SqlDataAdapter(sqlcmd)

        con.Close()

‘Intially I bind only 3 image in datalist

        dataadapter.Fill(ds, 0, 3, "table1")

        dataadapter.Fill(ds, "table2")

        DataList1.DataSource = ds.Tables("table1")

        lblrecordcount.Text = ds.Tables("table2").Rows.Count

        DataList1.DataBind()

    End Sub

‘Here link button used to change image to next   

Protected Sub lnkbtn1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkbtn1.Click

        If CInt(CInt(lblCurrentIndex.Text) + CInt(lblPageSize.Text)) < CInt(lblrecordcount.Text) Then

            lblCurrentIndex.Text = CStr(CInt(lblCurrentIndex.Text) + CInt(lblPageSize.Text))

        Else

            lblCurrentIndex.Text = 0

        End If

        bind()

    End Sub

    Sub bind()

        Dim dataset As New DataSet

        Dim dataadapter As New SqlDataAdapter

        Dim sqlcmd As New SqlCommand

        query = "select TRPIC1 from trdata"

        sqlcmd = New SqlCommand(query, con)

        con.Open()

        dataadapter = New SqlDataAdapter(sqlcmd)

        con.Close()

        dataadapter.Fill(dataset, CInt(lblCurrentIndex.Text), CInt(lblPageSize.Text), "image")

        DataList1.DataSource = dataset.Tables("image").DefaultView

        DataList1.DataBind()

        con.Close()

    End Sub

    Protected Sub lnkbtn2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkbtn2.Click

        lblCurrentIndex.Text = CStr(CInt(lblCurrentIndex.Text) - CInt(lblPageSize.Text))

        If CInt(lblCurrentIndex.Text) < 0 Then

            lblCurrentIndex.Text = "0"

        End If

        bind()

    End Sub

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick

        lnkbtn1_Click(sender, e)

    End Sub

I hope this method easy to show slide images using datalist control

Post your comments here