title: Changing the parallax image in parallax.js
body: <p>Is there a way that I can change my parallax image when an event is fired? I am using <a href="http://pixelcog.github.io/parallax.js/" rel="nofollow">parallax.js</a> and I cannot seem to figure out a way.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="bg-page-index"&gt;
    img_link_1
  &lt;/div&gt;
  &lt;div class="bg-page-index"&gt;
    img_link_2
  &lt;/div&gt;
  &lt;div class="bg-page-index"&gt;
    img_link_3
  &lt;/div&gt;
  
  
  
  &lt;div id="hero"&gt;
    &lt;div class="product-color-list"&gt;
      &lt;div class="color"&gt;&lt;/div&gt;
      &lt;div class="color"&gt;&lt;/div&gt;
      &lt;div class="color"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(".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
  });
  </code></pre>
  
  <p>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?</p>