changing image src from array using jquery

Question

I want to change the src of a few images. The urls are stored in a array randomly but the pictures are not showing. The images are stored in an /img folder.

var images=["img/Square.png","img/Star.png","img/Circle.png","img/Triangle.png","img/Ellipse.png","img/Rectangle.png"];

var image1 = Math.floor((Math.random() * 6) + 1);
var image2 = Math.floor((Math.random() * 6) + 1);
var image3 = Math.floor((Math.random() * 6) + 1);

$("#img1").attr("src",images[image1]);
$("#img2").attr("src",images[image2]);
$("#img3").attr("src",images[image3]);

My html Code is :

<div class="tag1" >
     <img id="img1" class="img-responsive" src="" alt=""  width="25%"  /> 
     <img id="img2" class="img-responsive" src="" alt=""  width="25%" style="margin-left:10%;"  >
     <img id="img3" class="img-responsive" src="" alt=""  width="25%" style="margin-left:10%;" >

bipen · Accepted Answer · 2016-08-17 19:48:26Z

1

"images" is not a string its a variable(array).

Try this,

 $("#img1").attr("src", images[image1]);

updated (after comment):

your random value sometimes gets 6 which is not present in the array change it to 5

  var image1 = Math.floor((Math.random() * 5) + 1);

and add all of your code inside ready function.

$(function(){
      var images=["img/Square.png","img/Star.png","img/Circle.png","img/Triangle.png","img/Ellipse.png","img/Rectangle.png"];

     var image1 = Math.floor((Math.random() * 5) + 1);
     var image2 = Math.floor((Math.random() * 5) + 1);
     var image3 = Math.floor((Math.random() * 5) + 1);

      $("#img1").attr("src",images[image1]);
      $("#img2").attr("src",images[image2]);
      $("#img3").attr("src",images[image3]);
  });

edited Aug 17, 2016 at 19:48

answered Aug 17, 2016 at 19:19

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

irfan spi Over a year ago

i tried with quotaion and without quotation .but its not showing any picture

bipen Over a year ago

Also make sure your css for img-responsive is not causing the error.

irfan spi Over a year ago

when i change the image src directly in HTML its showing the image .but not showing using array

bipen Over a year ago

ok this may sounds stupid just to confirm do you have your script inside document.ready function

irfan spi Over a year ago

i solved my problem by changing my script coding from center to end of document .

|

John Wilson · Accepted Answer · 2016-08-17 19:44:26Z

1

The image array has 6 items with array indexes 0,1,2,3,4,5.

Math.floor((Math.random() * 6) + 1)

This generates a random number between 1 - 6. You may be getting an error (no image) if it ever generates a 6 because there is no index 6. Max is 5. Change it to:

Math.floor((Math.random() * 6))

Everything else in the code you supplied looks correct.

answered Aug 17, 2016 at 19:44

John Wilson

765 bronze badges

1 Comment

irfan spi Over a year ago

You are right i changed my value from *6 to *5 and now its showing all pictures

Positive Rider · Accepted Answer · 2021-06-21 20:12:27Z

var x

function shufflerandomay() {
    x = Math.floor((Math.random() * 4))
}

var groupImg1 = [
    "https://images.unsplash.com/photo-1530651788726-1dbf58eeef1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=882&q=80",
    "https://images.unsplash.com/photo-1559386484-97dfc0e15539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80",
    "https://images.unsplash.com/photo-1533461502717-83546f485d24?ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60",
    "https://tse2.mm.bing.net/th?id=OIP.hjBODA9luVr29wosa528_AHaJ4&pid=Api"
];

var groupImg2 = [
    "https://tse3.mm.bing.net/th?id=OIP.e3osvFsA7n8pz3DQ8wIiZQHaLH&pid=Api",
    "https://tse2.mm.bing.net/th?id=OIP.hjBODA9luVr29wosa528_AHaJ4&pid=Api",
    "https://tse3.mm.bing.net/th?id=OIP.CFC2G9JinfIvZUcXheEPogHaLG&pid=Api",
    "https://tse2.mm.bing.net/th?id=OIP.ZKmrVM1RDpBkM-Ci4zIVUgHaJ4&pid=Api"
];

var groupImg3 = [
    "https://tse2.mm.bing.net/th?id=OIP.POLdja72DCes6PMNvp0T-gHaJQ&pid=Api",
    "https://tse2.mm.bing.net/th?id=OIP.ZKmrVM1RDpBkM-Ci4zIVUgHaJ4&pid=Api",
    "https://tse1.mm.bing.net/th?id=OIP.os-yHe1FYwTDWnDXiCuUCAHaLH&pid=Api",
    "https://tse2.mm.bing.net/th?id=OIP.muJtFt8tt4knnW4JxPwGBAHaLG&pid=Api"
];

$(document).ready(function() {
    shufflerandomay(groupImg1[x])
    $("#img1").attr("src", groupImg1[x])
    shufflerandomay(groupImg2[x])
    $("#img2").attr("src", groupImg2[x])
    shufflerandomay(groupImg3[x])
    $("#img3").attr("src", groupImg3[x])
});


$('input').on('click', function() {
    shufflerandomay(groupImg1[x])
    shufflerandomay(groupImg2[x])
    shufflerandomay(groupImg3[x])

    $("#img1").attr("src", groupImg1[x])
    $("#img2").attr("src", groupImg2[x])
    $("#img3").attr("src", groupImg3[x])
});

@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    font-family: "DM Sans", sans-serif;
    transition: background 0.4s ease-in;
    background-color: #0098fd;
}

body.mentol {
    background-color: #06c7ad;
}

input[type=radio] {
    display: none;
}

.card {
    position: absolute;
    width: 60%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform 0.7s ease;
    cursor: pointer;
}

.container {
    width: 100%;
    max-width: 800px;
    max-height: 600px;
    height: 100%;
}

.cards {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
}

img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
}

#item-1:checked~.cards #message-3,
#item-2:checked~.cards #message-1,
#item-3:checked~.cards #message-2 {
    transform: translatex(-40%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}

#item-1:checked~.cards #message-2,
#item-2:checked~.cards #message-3,
#item-3:checked~.cards #message-1 {
    transform: translatex(40%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}

#item-1:checked~.cards #message-1,
#item-2:checked~.cards #message-2,
#item-3:checked~.cards #message-3 {
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
}

#item-1:checked~.cards #message-1 img,
#item-2:checked~.cards #message-2 img,
#item-3:checked~.cards #message-3 img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CodePen - Playlist Carousel - css only</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div class="container">

        <input type="radio" name="slider" id="item-1" checked>
        <input type="radio" name="slider" id="item-2">
        <input type="radio" name="slider" id="item-3">

        <div class="cards">

            <label class="card" for="item-1" id="message-1">
                <img id="img1" src="https://tse3.mm.bing.net/th?id=OIP.e3osvFsA7n8pz3DQ8wIiZQHaLH&pid=Api">
              </label>

            <label class="card middleCard" for="item-2" id="message-2">
                <img id="img2" src="https://tse3.mm.bing.net/th?id=OIP.CFC2G9JinfIvZUcXheEPogHaLG&pid=Api">
              </label>

            <label class="card" for="item-3" id="message-3">
                <img id="img3" src="https://tse1.mm.bing.net/th?id=OIP.os-yHe1FYwTDWnDXiCuUCAHaLH&pid=Api">
              </label>

            <!-- end of cards -->
        </div>

        <!-- end of container -->
    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src="js/script.js"></script>

</body>

</html>

If you had explained your code I think this would have been the accepted answer

Collectives™ on Stack Overflow

changing image src from array using jquery

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related