How to create Slid show in asp.net using Repeater Control?


Hi,

There are so many methods to create Slid show functionality in asp.net,

 But one of the easiest method to create Slid Show is using JavaScript and CSS.

Step1: Create a Image folder in Solution Explorer and keep some Images there.

Step2: Include this Css and Javascript Code in .aspx page Like this

<%@ Page Title=”Home Page” Language=”C#” MasterPageFile=”~/Site.master” AutoEventWireup=”true”

    CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<asp:Content ID=”HeaderContent” runat=”server” ContentPlaceHolderID=”HeadContent”>

</asp:Content>

<asp:Content ID=”BodyContent” runat=”server” ContentPlaceHolderID=”MainContent”>

<div style=”margin-left:200px;”><h1>Repeater Slide Show</h1></div>

<style type=”text/css”>

        .photo

        {

            width:400px;

            margin-left:200px;

            margin-top:40px;

            background-color:white;

            filter:progid:DXImageTransform.Microsoft.Fade(duration=2);

        }

    </style>

    <script type=”text/javascript”>

        var photos = new Array();

        window.setInterval(showImage, 5000);

        function showImage() {

            if (photos.length > 0) {

                var index = Math.floor(Math.random() * photos.length);

                var image = document.getElementById(‘imgPhoto’);

                image.src = photos[index];

                if (image.filters) {

                    image.filters[0].Apply();

                    image.filters[0].Play();

                }

            }

        }       

    </script>

<img id=”imgPhoto” alt=”” />

    <script type=”text/javascript”>

    <asp:Repeater

        id=”rptPhotos”

        Runat=”server”>

        <ItemTemplate>

        <%# Eval(“Name”, “photos.push(‘Photo/{0}’)”) %>

        </ItemTemplate>

    </asp:Repeater>

    showImage();

    </script>

</asp:Content>

 

Step3: Write this code in Code behind file

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.IO;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            DirectoryInfo dir = new DirectoryInfo(MapPath(“~/Photo”));

            rptPhotos.DataSource = dir.GetFiles(“*.jpg”);

            rptPhotos.DataBind();

        }

    }

}

Then you will get output like this

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: