Random Image in <Div> from array

Question

I'm trying random image to show in div with help of JavaScript and CSS got script on internet somewhere, trying to make gallery with this, each of 2 image set from which 1 will be shown. don't know if it's because of image address or code

images are in website `dir/images/a1.jpg, When I open file in browser, images do't show

$(function() {
  var url = "/images",
    imgArray = [url + "images/a1.jpg",
      url + "images/a2.jpg",
      url + "images/a3.jpg",
      url + "images/a4.jpg",
      url + "images/a5.jpg",
      url + "images/a6.jpg"
    ],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

  $(".slider").css('background-image', baseUrl);
})
$(function() {
  var url = "/images/",
    imgArray = [url + "/images/a7.jpg",
      url + "/images/a8.jpg",
      url + "/images/a9.jpg",
      url + "/images/a10.jpg",
      url + "/images/a11.jpg",
      url + "/images/a12.jpg"
    ],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

  $(".slider2").css('background-image', baseUrl);
})

@charset "utf-8";

/* CSS Document */

.slider {
  width: 300px;
  height: 300px;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 2px black solid;
}

.slider2 {
  width: 300px;
  height: 300px;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 2px black solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider1">
</div>

<div class="slider2">
</div>

url = "/images" and then url+"images/a1.jpg". Is this right (i.e. your image url really is /imagesimages/a1.jpg or is that a typo? — dkasipovic
– dkasipovic, Commented Oct 20, 2017 at 12:10

Simon · Accepted Answer · 2017-10-20 12:19:35Z

You have the variable

var url = "/images/"

And you have then

url+"/images/a7.jpg"

That mean your path is

/images/images/a7.jpg

Just remove the folder one time for example like this

 $(function() {
  var url = "/images/",
    imgArray = [url + "a1.jpg",
      url + "a2.jpg",
      url + "a3.jpg",
      url + "a4.jpg",
      url + "a5.jpg",
      url + "a6.jpg"
    ],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

  $(".slider1").css('background-image', baseUrl);
})
$(function () {
    var url = "/images/",
        imgArray = [url+"a7.jpg",
                   url+"a8.jpg",
                   url+"a9.jpg",
                   url+"a10.jpg",
                   url+"a11.jpg",
                   url+"a12.jpg"],
        randomNumber = Math.floor((Math.random() * imgArray.length)),
        baseUrl = "url('" + imgArray[randomNumber] + "')";

    $(".slider2").css('background-image', baseUrl);
})();

Shiladitya · Accepted Answer · 2017-10-20 12:16:36Z

There are two thing to be notice

Location of the image
referring to wrong class

$(function() {
  var imgArray = ["/images/a1.jpg",
     "/images/a2.jpg",
     "/images/a3.jpg",
     "/images/a4.jpg",
     "/images/a5.jpg",
     "/images/a6.jpg"
    ],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

  $(".slider1").css('background-image', baseUrl);
})
$(function() {
  var imgArray = ["/images/a7.jpg",
      "/images/a8.jpg",
      "/images/a9.jpg",
      "/images/a10.jpg",
      "/images/a11.jpg",
      "/images/a12.jpg"
    ],
    randomNumber = Math.floor((Math.random() * imgArray.length)),
    baseUrl = "url('" + imgArray[randomNumber] + "')";

  $(".slider2").css('background-image', baseUrl);
})

@charset "utf-8";

/* CSS Document */

.slider {
  width: 300px;
  height: 300px;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 2px black solid;
}

.slider2 {
  width: 300px;
  height: 300px;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 2px black solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider1">
</div>

<div class="slider2">
</div>

Hope this will help you.

Collectives™ on Stack Overflow

Random Image in <Div> from array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related