Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

jQuery - Image Slider

Article:
Viewed:  1770 
Posted On:  10/12/2014 21:58:51 
How we can show images from a folder as an Image slider using jQuery ? 

In this article I am going to show how we can show images from a folder as Image Slider by using jQuery.

Below is my aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageSlider.aspx.cs" Inherits="ImageSliderFromAFolder.ImageSlider" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="imgHead" runat="server">
    <title>Image Slider From a Folder using jQuery</title>
    <link href="CSS/bjqs.css" rel="stylesheet" />
    <link href="CSS/demo.css" rel="stylesheet" />

    
<script src="JavaScript/jquery-1.7.1.min.js"></script>
    <script src="JavaScript/bjqs-1.3.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
 
        <div id="container">
            <div id="Image-fade">
                <ul class="bjqs">
                    <asp:Repeater ID="ImgSliderRPT" runat="server">
                        <ItemTemplate>
                            <li>
                                <img src='<%# DataBinder.Eval(Container.DataItem,"Value") %>'
                                   title='<%# (DataBinder.Eval(Container.DataItem,"Text").ToString()).Split('.')[0].ToString() %>' alt="Image Slider">
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>

            <script class="secret-source" style="display: none;">
                jQuery(document).ready(function ($) {
                    $('#Image-fade').bjqs({
                        height: 400,
                        width: 700,
                        responsive: true
                    });
 
                });
            </script>
        </div>

        
<script src="JavaScript/libs/jquery.secret-source.min.js"></script>

        
<script>
            jQuery(function ($) {
 
                $('.secret-source').secretSource({
                    includeTag: false
                });
            });
    </script>
    </form>
</body>
</html>
 

Now my aspx.cs code is:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace ImageSliderFromAFolder
{
    public partial class ImageSlider : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
                GetImageSlider();
        }
 
        private void GetImageSlider()
        {
            string[] filePaths = Directory.GetFiles(Server.MapPath("~/MyImages/"));
            List<ListItem> files = new List<ListItem>();
            foreach (string filePath in filePaths)
            {
                string fileName = Path.GetFileName(filePath);
                files.Add(new ListItem(fileName, "MyImages/" + fileName));
            }
            ImgSliderRPT.DataSource = files;
            ImgSliderRPT.DataBind();
        }
    }
}

Images in my Folder:

1.png

Image 1.

Now run the application:

2.png

Image 2.

3.png

Image 3.

Click Next Button or below number to go next image.

4.png

Image 4.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us