[RESOLVED]JCarousel images to bind with database images.

Hi,

I am using Carousel in my web page and i want to bind that to my database images. Could any one please help me with it.

<div class="container" style="padding-top:10px">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="carousel slide" id="carousel-543106" >
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-543106">
</li>
<li data-slide-to="1" data-target="#carousel-543106">
</li>
<li data-slide-to="2" data-target="#carousel-543106">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="" src="http://lorempixel.com/1600/500/sports/1" />

</div>
<div class="item">
<img alt="" src="http://lorempixel.com/1600/500/sports/2" />

</div>
<div class="item">
<img alt="" src="http://lorempixel.com/1600/500/sports/3" />

</div>
</div>
<a class="left carousel-control" href="#carousel-543106" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-543106" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>

I want to get images from my database image…

Please help me plzz…

Regards,

Sarrujog.

 

Hi sarrujog,

First ,I don’t suggest that you bind the images from database to your Carousel, you can simply  read the images from images folder.

Second,you can use ajax to read the image url ,and set them to your image element in the div container when you first load the page.

I wrote a demo for you,i used the image in the folder,but you can get the image from database.

You need to add the JCarousel js and css reference to your page:

Here is the page code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.1/jquery.jcarousel-autoscroll.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: 'POST',
                url: "WebForm2.aspx/GetImages",
                contentType: 'application/json;charset=utf-8',
                dateType: "json",
                success: function (data) {
                    $.each(data.d, function (i, item) {

                        var eli = $('<div><img src= "' + item + '" width="600" height="400" alt="" /></div>');
       
                        $(".carousel-inner").append(eli);
                      
                    })
                 
                }

            });

        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
          <div class="wrapper">
            <div class="jcarousel-wrapper">
               <div class="carousel-inner">
                   //image will be displayed here
               </div>
            </div>
        </div>

    </form>
</body>
</html>

Here is the server side code:

  protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static List<string> GetImages()
        {

            string path = HttpContext.Current.Server.MapPath("~/Images/");

            if (path.EndsWith("\"))
            {

                path = path.Remove(path.Length - 1);

            }

            Uri pathUri = new Uri(path, UriKind.Absolute);

            string[] files = Directory.GetFiles(path);
            List<string> imageList = new List<string>();

            foreach (string file in files)
            {

                Uri filePathUri = new Uri(file, UriKind.Absolute);
                string ImagePath = pathUri.MakeRelativeUri(filePathUri).ToString();
                imageList.Add(ImagePath);

            }

            return imageList;
        }

Best Regards,

Kevin Shen.

Hi Kevin Shen,

Thank You..

Regards,

sarrujog.

Leave a Reply