Reputation: 517

dynamic load image in box slider from a specific folder

i am using Box slider for image sliding,i want to add the image from the folder,but that shud be dynamic,i.e. if two image is thr means only two shoud come nd if 10 means ten should comeand it should be in mvc4 and aspx also..

i am using this plugin - http://bxslider.com/examples/reload-slider

Upvotes: 2

Answers (3)

SHAURAJ SINGH

Reputation: 517

This is the one i found it in aspx and c#: and its working fine.

aspx code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <link href="Styles/jquery.bxslider.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.bxslider.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $('.bxslider').bxSlider({
            auto: true,
            controls: false,
            pager: false,
            autoControls: true
        });
      });
   </script>
  </head>
  <body>
    <form id="form1" runat="server">
    <table width="100%">
         <tr>
            <td align="center">
                <div class="inner clearfix">
                    <div id="primary">
                        <div class="slider">
                            <ul class="bxslider" id="ss" runat="server">

                            </ul>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    </form>
  </body>
  </html>

C# code:

     protected void Page_Load(object sender, EventArgs e)
        {
           List<Class1> Details = new List<Class1>();
           DirectoryInfo dir = new DirectoryInfo(@"C:\Users\Documents\visual studio 2010\Projects\Dynamic_Imageslider\Dynamic_Imageslider\Images");
            foreach (FileInfo file in dir.GetFiles())
            {
                Details.Add(new Class1
                {
                    test1 = "../../Images/" + file.Name
                });
            }
            var myList2 = Details;
            for (int j = 0; j < Details.Count; j++)
            {
                Image img = new Image();
                img.ID = "img" + j;
                img.ImageUrl = myList2[j].test1;
                ss.Controls.Add(img);
            }
        }
        public class Class1
        {
            public string test1 { get; set; }
        }
     }

Upvotes: 1

nitinvertigo

Reputation: 1180

This is the way yo can do it in mvc :

Model:

public class Class1
{
   public string test1 { get; set; }
}

The controller code :

public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

        List<Class1> Details = new List<Class1>();

        DirectoryInfo dir = new DirectoryInfo(@"C:\Users\example\Documents\visual studio 2010\Projects\vertical mega dropdown\MvcApplication1\Images");
        foreach (FileInfo file in dir.GetFiles())
        {
           Details.Add(new Class1
            {
                test1 =  "../../Images/" + file.Name
            });
        }
        return View(Details);
    }

In the view :

@model IEnumerable<MvcApplication1.Models.Class1>
@{
    ViewBag.Title = "Home Page";
}
<link href="../../Content/jquery.bxslider.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery.bxslider.js" type="text/javascript"></script>
    <script src="../../Scripts/rainbow.min.js" type="text/javascript"></script>
    <script src="../../Scripts/scripts.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.bxslider').bxSlider({
            auto: true,
            controls: false,
            pager: false,
            autoControls: true
        });
    });
</script>
<table width="100%">
    <tr height="50">
        <td align="center">
        </td>
    </tr>
    <tr>
        <td align="center">
            <div class="inner clearfix">
                <div id="primary">
                    <div class="slider">
                        <ul class="bxslider">
                            @foreach (var item in Model)
                            {
                                <li>
                                    <img class="imageclass" src="@item.test1" border="0"  alt="" />
                                </li>           
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

Upvotes: 1

A.T.

Reputation: 26332

    in Html5 it is quite easy, but i do prefer to use this jQuery plugin https://github.com/weixiyen/jquery-filedrop  it is pretty awesome. 

    function fileSetUploadPercent(percent, divID){

        var uploadString = "Uploaded " + percent + " %";

        $('#'.divID).text(uploadString);
    }
    function fileUploadStarted(index, file, files_count){

        var divID = getDivID(index, file);

        createFileUploadDiv(divID);     //create the div that will hold the upload status

        fileSetUploadPercent(0, divID); //set the upload status to be 0
    }

    function  fileUploadUpdate(index, file, currentProgress){

        //Logger.log("fileUploadUpdate(index, file, currentProgress)");

        var string = "index = " + index + " Uploading file " + file.fileName + " size is " + file.fileSize + " Progress = " + currentProgress;
        $('#status').text(string);

        var divID = getDivID(index, file);
        fileSetUploadPercent(currentProgress, divID);
    }

    function fileUploadFinished(index, file, json, timeDiff){

        var divID = getDivID(index, file);
        fileSetUploadPercent(100, divID);

        if(json.status == "OK"){
            createThumbnailDiv(index, file, json.url, json.thumbnailURL);
        }
    }



        function    fileDocOver(event){
            $('#fileDropTarget').css('border', '2px dashed #000000').text("Drop files here");
        }
        $(".fileDrop").filedrop({

                    fallback_id: 'fallbackFileDrop',
                    url: '/api/upload.php',
                    paramname: 'fileUpload',
                    //    maxfiles: 25,           // Ignored if queuefiles is set > 0
                    maxfilesize: 4,         // MB file size limit
                    //    queuefiles: 0,          // Max files before queueing (for large volume uploads)
                    //    queuewait: 200,         // Queue wait time if full
                    //    data: {},
                    //    headers: {},
                    //    drop: empty,
                    //    dragEnter: empty,
                    //    dragOver: empty,
                    //    dragLeave: empty,
                    //    docEnter: empty,
                    docOver: fileDocOver,
                //  docLeave: fileDocLeave,
                    //  beforeEach: empty,
                    //   afterAll: empty,
                    //  rename: empty,
                    //  error: function(err, file, i) {
                    //    alert(err);
                    //  },
                    uploadStarted: fileUploadStarted,
                    uploadFinished: fileUploadFinished,
                    progressUpdated: fileUploadUpdate,
                    //     speedUpdated
                });

After this just add div where you want to drop images

<div class='fileDrop'>
Upload a file by dragging it.
<span id='fileDropTarget'/>

</div>

Upvotes: 0

dynamic load image in box slider from a specific folder

Answers (3)

Related Questions