Display images as slideshow in mvc4

Question

I want to display some images as a slide show in view (MVC4).

I am taking the physical path of those images in to one array[] in control. and I want pass that array to view. there i want to display those images as a slide show.

Controller:

String[] ImagePath = { "D:\\Large\\1.jpg", "D:\\Large\\4.jpg", D:\\Large\\5.jpg", "D:\\Large\\6.jpg", "D:\\Large\\7.jpg" };
        return View(ImagePath);

View:

foreach(var item in Imagepath)
{
<img src=@ImagePath alt="Sample Image" width="300px" />
}

But it is not showing in view.

Is it possible to display images as slideshow using mvc4.

Answer 1

create this class first say in Model

public class ImageModel
{
List<string> _images = new List<string>();

    public ImageModel()
    {
        _images = new List<string>();
    }

    public List<string> Images
    {
        get { return _images; }
        set { _images = value; }
    }
}

then in the Controller use the following code

var imageFiles = new ProjectName.Models.ImageModel();
imageFiles.Images.AddRange(System.IO.Directory.GetFiles(imagepath));
return View(imageFiles);

in View you use it as

@model ImageModel
<div id="container">
<div class="photobanner">
    @for (int imgIndex = 0; imgIndex < Model.Images.Count; imgIndex++)
    {
        if (imgIndex == 0)
        {
          <img class="first" src = "@Model.Images[imgIndex]" alt="No Image" style="max-height: 110px; "/>  
        }
        else
        {
                <img src = "@Model.Images[imgIndex]" alt="No Image" style="max-height: 110px; "/> 
        }
    }
 </div>

you have to apply css as

/*photobanner*/

.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}

/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
   -moz-animation: bannermove 30s linear infinite;
    -ms-animation: bannermove 30s linear infinite;
     -o-animation: bannermove 30s linear infinite;
        animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
 0% {
    margin-left: 0px;
    }
 100% {
    margin-left: -2125px;
   }
 }

 @-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
 }

 @-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
 }

 @-ms-keyframes "bannermove" {
  0% {
  margin-left: 0px;
  }
  100% {
   margin-left: -2125px;
  }
 }

 @-o-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
 }

.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}

.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;

-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

This code is a working code which i have tried from my side. Hope it may be helpful for you. In the image path specify the complete path say the physical path where the file resides

Answer 2

foreach(var item in Model.Imagepath) 
{ 
<img src=item alt="Sample Image" width="300px" /> 
}

...OR...

You should make the view use an IEnumerable, and then in the controller...

List<string> images = new List<string>();
images.Add("D:\\Large\\1.jpg");
images.Add("D:\\Large\\2.jpg");
etc...

return View(images);

foreach(var item in Model) 
    { 
    <img src=item alt="Sample Image" width="300px" /> 
    }

note: this is handwritten, so check syntax.