Multiple vertical-offsets for multiple elements with JQuery Stellar?

Question

I have installed the Stellar plugin and have it working as such:

$.stellar({
       horizontalScrolling: false,
       verticalOffset: -600
    });

But I have 2 different elements with 2 different background images. I need to set the verticalOffset of the 2nd element to be 200, not -600 above.

To that end I have added:

$('.photo2').stellar({
       horizontalScrolling: false,
       verticalOffset: 200
    });

But this does not work - the first function just overwrites it.

If I separate them, like this:

$('.photo1').stellar({
       horizontalScrolling: false,
       verticalOffset: -600
    });


$('.photo2').stellar({
       horizontalScrolling: false,
       verticalOffset: 200
    });

Nothing works at all.

Does anyone know the correct way of setting up multiple elements with Stellar?

Answer 1

you should be able to achieve this by adding a data attribute to the element:

<div class="photo2" data-stellar-vertical-offset="200"></div>

You'll find more information in the documentation: http://markdalgleish.com/projects/stellar.js/docs/

jordi