CODEWITHSUNDEEP
javascriptjqueryhtmlcssarrays
Pranit Shinde
Pranit Shinde

Reputation: 43

Random Image in <Div> from array

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>

Upvotes: 0

Views: 957

Answers (2)

Simon
Simon

Reputation: 128

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);
})();

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

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.

Upvotes: 0

Related Questions