I have read through all the issues and solutions here for your parallax.js. My data-image-src shows the image link when I inspect. There is a parallax-mirror section created, which the images are in the opposite order as they would be on the screen.
<div class="parallax-mirror" style="visibility: hidden; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; height: 722.9px; width: 1324px;"><img class="parallax-slider" src="http://psa.com.php7-29.phx1-1.websitetestlink.com/wp-content/uploads/2017/12/pele-contact-page-image.jpg" style="position: absolute; height: 851px; width: 1324px; max-width: none;"></div>
This is the first mirror image in the list of 6 images, where as the first on the page would be:
`
the store
</div>`
I added the javascript as suggested:
$('.parallax-item').parallax();
and
$('[data-parallax="scroll"]').each(function() { var $this = $(this); $this.parallax({imageSrc: $this.data('image-src') }); });
together and separate with no luck. I tried this in a basic html page with success. I know my code and logic work just not in Wordpress. I also added bootstrap css and js links to my header file along with your parallax.min.js file.
I also removed all plugins to eliminate that conflict. Am I missing something? I don't think this should be that hard. In your GIT folder there are several other files including parallax.js. Am I supposed to do something with those files. I followed the instructions. I would appreciate any help or suggestions.
this sounds like the parallax mirror is behind something else with a background. have you checked all the elements between the parallax-mirror and the parallax-item for their background properties? they have to be transparent.
I have read through all the issues and solutions here for your parallax.js. My data-image-src shows the image link when I inspect. There is a parallax-mirror section created, which the images are in the opposite order as they would be on the screen.
<div class="parallax-mirror" style="visibility: hidden; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; height: 722.9px; width: 1324px;"><img class="parallax-slider" src="http://psa.com.php7-29.phx1-1.websitetestlink.com/wp-content/uploads/2017/12/pele-contact-page-image.jpg" style="position: absolute; height: 851px; width: 1324px; max-width: none;"></div>This is the first mirror image in the list of 6 images, where as the first on the page would be: `I added the javascript as suggested:
$('.parallax-item').parallax();and$('[data-parallax="scroll"]').each(function() { var $this = $(this); $this.parallax({imageSrc: $this.data('image-src') }); });together and separate with no luck. I tried this in a basic html page with success. I know my code and logic work just not in Wordpress. I also added bootstrap css and js links to my header file along with your parallax.min.js file.I also removed all plugins to eliminate that conflict. Am I missing something? I don't think this should be that hard. In your GIT folder there are several other files including parallax.js. Am I supposed to do something with those files. I followed the instructions. I would appreciate any help or suggestions.
Thank you.
Let me know if anything is unclear. I would really use the help. Thanks
Hey @miowebdesigns !
this sounds like the parallax mirror is behind something else with a background. have you checked all the elements between the parallax-mirror and the parallax-item for their background properties? they have to be transparent.
I will check it out. Thanks. Stay tuned...Will post if resolved for the next person:)
And that was the solution. The .site was #fff. Changed to transparent and all is well. Thank you.
Another question, I used this logic to add titles to each panel image: `
I have 6 panels. All the titles show on top of each other in the first panel. How would I change it so each panel has its title?
Thanks
Skip that. It was my css messing things up. I got it. Thanks again.