Changing the parallax image in parallax.js

Question

Is there a way that I can change my parallax image when an event is fired? I am using parallax.js and I cannot seem to figure out a way.

Here's the HTML:

<div class="bg-page-index">
  img_link_1
</div>
<div class="bg-page-index">
  img_link_2
</div>
<div class="bg-page-index">
  img_link_3
</div>



<div id="hero">
  <div class="product-color-list">
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
  </div>
</div>

JS:

$(".color").click(function() {

      var indexNum = $(".product-color-list .color").index(this);

      sliderInit(indexNum);

});

var   $hero  = $("#hero"),
      $bg_index = $(".bg-page-index"),
      bg_init = $bg_index.eq(indexNum).html();

$hero.parallax({
  imageSrc: bg_init,
  speed: 0.7
});

This works the first time, but it won't work a second time because the parallax.js library changes things around with the element. Does anyone know a better way of doing this, or how to reinitiate the library?

Hawkee · Accepted Answer · 2015-09-22 22:09:23Z

2

I found a solution that works. Rather than re-initiate the plugin every time I want to change the background I simply changed the image src within the element this plugin creates:

$('.parallax-slider').attr('src', background);

answered Sep 22, 2015 at 22:09

Hawkee

2,01723 silver badges20 bronze badges

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

1 Comment

Roko C. Buljan Over a year ago

This will not work if you have multiple parallax in a single page.

Collectives™ on Stack Overflow

Changing the parallax image in parallax.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related