Random Images Displayed In Slider

Question

I am using an image slider with 7 images. I have a folder in my ASP.NET Web Forms application called Slider with 50 images in it. Every time I refresh or visit the page I want the slider to be populated with 7 different images every time from the 50 images in the folder.

ASPX

<div class="slider">
                <div id="slider1">
                    <% Response.Write("<img src='" + chooseImage() + "' />");%>
                   <%-- <img border="0" src="Slider/B50.JPG" width="850" height="637" />
                    <img border="0" src="Slider/B51.JPG" width="850" height="637" />
                    <img border="0" src="Slider/C47.JPG" width="850" height="637" />
                    <img border="0" src="Slider/C43.JPG" width="850" height="637" />
                    <img border="0" src="Slider/E2.JPG" width="850" height="637" />
                    <img border="0" src="Slider/W5.JPG" width="850" height="637" />
                    <img border="0" src="Slider/M21.JPG" width="850" height="637" />--%>
                </div>
                <ul id="thumb"></ul>
                <div id='next' class="slider_next">
                    <img border="0" src="Images/next.png" width="57" height="57" alt="next image" /></div>
                <div id='prev' class="slider_prev">
                    <img border="0" src="Images/prev.png" width="57" height="57" alt="previous image" /></div>
            </div>
        </div>

Before I just had a direct path to 7 images in the folder but I want it to be randomized.

<% Response.Write("<img src='" + chooseImage() + "' />");%>

ASPX.CS

protected void Page_Load(object sender, EventArgs e)
        {
            chooseImage();
        }
        public string chooseImage()
        {
            if (Session["img"] == null)
            {
                string imgPath;
                int fileCount = Directory.GetFiles(Server.MapPath("Slider/"), "*.*", SearchOption.TopDirectoryOnly).Length;
                fileCount = fileCount + 1;
                imgPath = "Slider/" + RandomNumber(1, fileCount) + ".jpg";
                Session["img"] = imgPath;
                return imgPath;
            }
            else
                return Session["img"].ToString();
        }
        private int RandomNumber(int min, int max)
        {
            Random random = new Random();
            return random.Next(min, max);
        }

When I run the application no image is being displayed in the slider.

Slider Folder

enter image description here

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

When getting the imgPath, you need to resolve the url to make it valid for the client. This can be done through the Control.ResolveUrl method:

imgPath = ResolveUrl("Slider/" + RandomNumber(1, fileCount) + ".jpg");

If the image source is invalid, no image will be displayed.

However, once you resolve the url, all images will probably be the same since you are caching the results to Session["img"]. In order to get randomized images every time, simply remove the if statement and the else body.

You should also change your

Random random = new Random();

local variable declaration to an instance variable or static variable, as discussed in this stackoverflow question.

Edit: you should probably rewrite your chooseImage() method to get any file within the directory "Slider". As it is currently, it will only return paths such as "Slider/1.jpg" and "Slider/2.jpg".

public string chooseImage()
{
    string[] files = Directory.GetFiles(Server.MapPath("Slider/"), "*.*", SearchOption.TopDirectoryOnly);
    int fileCount = files.Length;
    string fileName = Path.GetFileName(files[RandomNumber(0, fileCount)]);
    return "Slider/" + fileName; // or return ResolveUrl("Slider/" + fileName);
}

edited May 23 '17 at 12:29

Community

1
1

answered Jul 15 '15 at 12:13

Fernando Matsumoto

2,697
1
18
24

my images are not being displayed still the folder is in the project and each image would have a path example "Slider/A2.jpg" so my path should be "Slider/" right? – Jul 15 '15 at 13:00
Is the "Slider" folder on the root directory? – Fernando Matsumoto Jul 15 '15 at 13:02
yes its in the solution explorer with all the other files it had no problem displaying them when I had a direct path to the image – Jul 15 '15 at 13:18
my slider has a specific size how would I style this line "<% Response.Write("");%>" like give it a height and a width for the image – Jul 15 '15 at 13:42
Just add the attributes to the img tag – Fernando Matsumoto Jul 15 '15 at 13:46
Example: <% Response.Write("");%> – Fernando Matsumoto Jul 15 '15 at 13:47
I get an error when I do this. The style is underlined and it says "; expected" – Jul 15 '15 at 13:51
Sorry, I forgot about the quotes. You will need to use single quotes around attribute values. Example: <% Response.Write("");%> – Fernando Matsumoto Jul 15 '15 at 13:55
Thanks just need to fix the random now because it keeps displaying the same image multiple times. – Jul 15 '15 at 13:57

Random Images Displayed In Slider

1 Answers1