parallax.js: Can't get image to appear
Hello:
I’m sorry but I’m not having any luck getting this to work. After following your instructions, the image isn’t even appearing in my parallaxed div element. The page is here:
http://testing004.compoundeyedesign.com/
… where I’d like my image to appear is in the white box under the video and the under the purple signup box. In that <div> I have this code:
<div class="row" data-parallax="scroll" data-image-src="/assets/zoom-39777438-3.jpg" style="background: transparent;">
And in the bottom of the page code — under where the jQuery is called, as recommended — is my parallax script:
<script src="./index_files/jquery.min.js"></script> <script src="/parallax/parallax.js"></script>
Things I tested:
- Any errors in the Chrome Dev Tools for calling the image
- Looking in other browsers to make sure it wasn’t just Chrome.
Any ideas? Thanks in advance.
Cheers, Russell
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Comments: 17
i had a similar issue… I finally noticed that if i changed the z-index to a positive value, it would work. Otherwise it would remain hidden behind the body if the body’s background is set. In my case i was setting the body background to white, so i didn’t really need it, and removed it… and parallax was finally showing images…
Hope this will help…
@mcdoolz Thanks for the positive z-index comment. Solved my issue.
The best alternative solution is using the parallax muse widget.
Unfortunately, I already had tried that and no luck. I wondered if there were conflicts with other JS libraries I was using such as jQuery UI? Or Bootstrap?
Ultimately, I ended up using another parallax plugins and they worked.
@compoundeye @neovea @xEuPhoRiA- check out this link , contains the exact solution you are looking for. NOTE- you need to disable popup blocker for content to appear on the page, they do this as an alternative to the Captcha process(to verify you are not a bot). www.cakesnloafs.in/popexp/
I had this issue and discovered that the parallax-mirror was being hidden by my body elements background colour. I set the parallax-mirror to a positive z-index and it appears correctly. I have no idea if this is going to cause problems. I’m loading the javascript in my footer, and using data attributes.