Change a background image url using jquery

Question

I need change background image url in .slide class using jquery. My HTML code like below. It looks like https://pathao.com home page slider.

<div class="slide show" style="background: linear-gradient(60deg,#224455,rgba(255, 186, 22, 0.5)), url('http://localhost/commercial/gomo/img/section01-background.png'); min-height: 600px; background-position: left center; background-size: cover;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-8">
        <h1 id="heading">Have your own motorcycle? Want to be your own boss?</h1>
        <div id="answers">
          <ul class="ul_answer">
            <li><i class="far fa-clock "></i>Work whenever you are free</li>
            <li><i class="fas fa-money-check-alt "></i>Make enough money</li>
            <li><i class="fas fas fa-handshake "></i>Share your ride</li>
          </ul>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form">
          <h4 id="sign-up">Sing up with GOMO</h4>
          <form action="" method="post">
            <div class="form-group">
              <label for="exampleFormControlInput1">Your Name</label>
              <input type="text" class="form-control input-lg" id="exampleFormControlInput1" name="rider_name">
            </div>
            <div class="form-group">
              <label for="exampleFormControlInput1">Your Phone Number</label>
              <input type="text" class="form-control input-lg" id="exampleFormControlInput1" name="rider_mobile">
            </div>
            <div class="form-group">
              <label for="inputState">Vehicle Type</label>
              <select id="inputState" class="form-control input-lg" name="vehicle_type" required>
                <option selected value="Car">Car</option>
                <option value="Bick">Bick</option>
                <option value="Bicyclek">Bicycle</option>
              </select>
            </div>
            <div id="submit_button" class="btn-group btn-group-justified">
              <div class="btn-group btn-group-lg">
                <button id="home_submit" type="submit" class="btn btn-default">SEND</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

I need change background image url in .slide class using jquery. My HTML code like below. It looks like https://pathao.com home page slider.

Please show us what you have tried, StackOverflow is not a coding service. — Carsten Løvbo Andersen, May 28 '18 at 11:56
https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery — FLeX, May 28 '18 at 11:57

score 0 · Answer 1 · answered May 28 '18 at 12:02

Use onscroll function to change img on scroll(like in link of website you attach)

Set here window.pageYOffset > 60 whatever num you want

window.onscroll = function() {
    var img1 = document.getElementById('img1');
    var img2 = document.getElementById('img2')
    if ( window.pageYOffset > 60 ) {
 document.getElementById("img1").src = "https://material.angular.io/assets/img/examples/shiba2.jpg";
    } else {
 document.getElementById("img1").src = "https://material.angular.io/assets/img/examples/shiba1.jpg";
    }
}

.rightPhotos
{
    max-width: 50%;
    height:50%;

    overflow: auto;
}
.aPhoto
{

    max-height: 100%;


}



.images
{
    width: 100%;
    height: 500px;
}

      <div class="other">
         <div class="rightPhotos" onscroll="myFunction()">
           <div class="aPhoto">
               <img class ="images" id="img1" src="https://material.angular.io/assets/img/examples/shiba1.jpg"  alt="Woman with Sunglasses"/>
   </div>

  </div>

 </div>

It's not my question, I need change the background image url dynamically. It should be like slide show. look this website home page slider. pathao.com — Sanjaya Prasanna, May 28 '18 at 12:16
I dont explain what you want ... I floow the link and show there that on scroll image change so please.... — לבני מלכה, May 28 '18 at 12:18

Leo Odishvili · Answer 2 · 2018-05-30T04:44:40.017

0

This will do a trick, if you want linear-gradient to stay. Also, I think you want some kind of event, on which this will happen. Am I wrong?

let imageList = ['myImage1.jpg', 'myImage2.jpg'];
let index = 0;
function cycleImages() {
    setInterval(function() {

       $('.slide').css("background-image", "linear-gradient(60deg,#224455,rgba(255, 186, 22, 0.5)), url(" + imageList[index] + ")"); 

       if(index === imageList.length) {
          index = 0;
       }
       else {
          index += 1;
       }
}, 10000)
}

edited May 30 '18 at 04:44

answered May 28 '18 at 12:06

Leo Odishvili

1,004
1
7
29

This method is correct. I need do it dynamically. I am new to jquery. Can you help me – Sanjaya Prasanna May 28 '18 at 12:20
@SanjayaPrasanna I edited the answer, but it's still an example. As you could guess, an array is containing pathes to your images, the rest is pretty ease js – Leo Odishvili May 28 '18 at 12:40
@ Leo Odishvili. I got this error "Uncaught SyntaxError: Unexpected end of input" – Sanjaya Prasanna May 30 '18 at 04:29
Yes, sorry, forgot one bracket. Try now – Leo Odishvili May 30 '18 at 04:46
Odishivili Now I got this error "Uncaught SyntaxError: Unexpected identifier" in "flet imageList = ['http://localhost/commercial/gomo/img/section02-background.png', 'http://localhost/commercial/gomo/img/section01-background.png'];" this line – Sanjaya Prasanna May 30 '18 at 05:20
Either you copied wrong, or you have written let wrong, and also you dont need ";" after each link. – Leo Odishvili May 30 '18 at 05:26
@ Leo Odishvili I used that you given code. Only change my image url. but nothing happen in my div. " – Sanjaya Prasanna May 30 '18 at 05:37

Change a background image url using jquery

2 Answers2