data-mirror-selector not working

[nicolasdeory]

I'm trying to use data-mirror-selector so I can position the parallax-mirror not directly as a child of the body, but as a child of a div. This is my parallax window code:

<div class="parallax-container" style="height: 100px;" data-parallax="scroll" data-mirror-selector=".post-parallax-image" data-bleed="10" data-speed="0.2" data-image-src="XXXXXX"></div>

This creates a parallax-mirror element directly under the body, which makes it impossible (due to how my website is built) to see the parallax image through the 'window'.

[wstoettinger]

Hey @guachitonico !

could you provide a link to your site or an example? That was it would be easier to help you!

Best Wolfgang

[nicolasdeory]

Sure. I could reproduce the issue in a CodePen: https://codepen.io/anon/pen/PQoKvq . You should scroll to see the parallax window.

[wstoettinger]

Hey @guachitonico ! "data-mirror-container" is only available since v1.5, you are using 1.4.2 from the cdn. this attribute was then renamed to "data-mirror-selector" in v2-alpha. in both cases the attribute is a jquery selector, so for a class you need to use a dot before the class-name.

so for v1.5 use "data-mirror-container", for v2-alpha use "data-mirror-selector".

let me know if this resolves the issue!

[nicolasdeory]

Hi! I'm using 2.0 alpha on my website, I forgot to check the parallax version of the codePen sample. Do you have CDNs for 2.0? Anyhow, I think I updated to 1.5, but it's still not working.

https://codepen.io/anon/pen/PQoKvq

<div class="showparallaxhere"></div>

  <div class="parallax-container" style="height: 100px;" data-parallax="scroll" data-mirror-container=".showparallaxhere" data-bleed="10" data-speed="0.2" data-image-src="https://nicolasdeory.azurewebsites.net/wp-content/uploads/2018/01/IMG_17832.jpg"></div>

[wstoettinger]

Since v2 is still in alpha there is no CDN available yet, however I appreciate that people are using it to collect some experience and get some feedback.

As for you code pen: it does work (for me)!

I get the following html structure:

<div class="showparallaxhere">
   <div class="parallax-mirror" 
        style="z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; transform: translate3d(8px, 355px, 0px); visibility: visible; height: 120px; width: 334px;">
      <img class="parallax-slider" 
           src="https://nicolasdeory.azurewebsites.net/wp-content/uploads/2018/01/IMG_17832.jpg" 
           style="transform: translate3d(0px, -66px, 0px); position: absolute; height: 222px; width: 334px; max-width: none;">
   </div>
</div>

<div class="parallax-container" 
     style="height: 100px;" 
     data-parallax="scroll" 
     data-mirror-container=".showparallaxhere" 
     data-bleed="10" 
     data-speed="0.2" 
     data-image-src="https://nicolasdeory.azurewebsites.net/wp-content/uploads/2018/01/IMG_17832.jpg">
</div>

The parallax-container stays there, but it doesn't display anything anyways. the parallax-mirror is properly created inside the showparallaxhere div.

[nicolasdeory]

Alright, what 😄 It seems to work on my machine now as well. I'll try it on my site sometime this week and if it's still not working, I'll reopen the issue. Thanks!

[wstoettinger]

seems to be fixed!