Flipbook Image Gallery ASP.Net: Display Images like Flipbook using jQuery plugin in ASP.Net

You will need to use the jQuery Flipbook Plugin and download the required files.

Then you need to add the images, scripts and css files to your project.

HTML

<link href="flipbook/pictureflip.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="flipbook/modernizr.js" type="text/javascript"></script>
<script src="flipbook/jquery.pictureflip.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#flipbook').pageFlip();
    });
</script>
<div id="flipbook">
    <asp:Repeater ID="rptImages" runat="server">
        <ItemTemplate>
            <div class="slide">
                <asp:Image ImageUrl='<%# Eval("ImageUrl") %>' runat="server" />
                <div class="content">
                    <a href="#">
                        <%# Eval("Description")%></a></div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

Namespaces

using System.Data;

Code

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[2] { new DataColumn("ImageUrl"), new DataColumn("Description") });
    dt.Rows.Add("~/images/1.jpg", "Flowers: What you didn't know");
    dt.Rows.Add("~/images/2.jpg", "Flowers: Real or Fiction?");
    dt.Rows.Add("~/images/3.jpg", "A Flower ate my Baby!");
    dt.Rows.Add("~/images/4.jpg", "Will Flowers Destroy Earth?");
    rptImages.DataSource = dt;
    rptImages.DataBind();
}

Screenshot