-
AuthorPosts
-
November 12, 2013 at 9:52 pm #187464
Any idea why this won’t work? I found this script somewhere (and have it working locally), but I’m not good at all with Javascript and am suspecting I can’t just plug it into the WP theme this simply.
Working example: http://carveskateshop.us/pano_test/
HTML in Text Block
<div id="background-thing"></div>
CSS in custom.css
#background-thing { background: url(pano-1.jpg,pano-2.jpg,pano-3.jpg) no-repeat 0 0 scroll; height: auto; left: 0; min-height: 100%; min-width: 1024px; overflow: hidden; position: fixed; top: 0; width: 100%; }
JS called from header.php
$(document).ready(function(){ $('#background-thing').mousemove(function(e){ var mousePos = (e.pageX/$(window).width())*100; $('#background-thing').css('backgroundPosition', mousePos+'% 0'); }); });
Results in this mess: http://carveskateshop.us/pano/
I ideally want it to act like a fullwidth slider, but with the panoramic mouse effect – with 3 different images.
- This topic was modified 11 years, 1 month ago by tlow87.
November 12, 2013 at 10:45 pm #187488Hey tlow87!
You have this error in the console:
Uncaught TypeError: Property ‘$’ of object [object Object] is not a function
Try the following, replace each of the ‘$’ by ‘jQuery’ in your javascript code.
Best regards,
JosueNovember 12, 2013 at 10:49 pm #187495That made it work!
But how do I make the rest of the content fall below the #background-thing div? It all just stacks on top now.
November 12, 2013 at 10:53 pm #187497Hey!
Try adding a hight z-index value, like:
#background-thing { z-index: 2000 !important; }
Cheers!
JosueNovember 12, 2013 at 11:00 pm #187504I apologize, I meant I wanted the pano to be it’s own block, and the rest of the page content to stack beneath the div.
It would be nice if the image itself was fixed, but similar to setting a background image for a color section I’d like the image to disappear as you scroll down.
November 12, 2013 at 11:18 pm #187517Hi!
I don’t think that would be possible, you’d need to rely on the color section element (set #background-thing as the ID).
Cheers!
JosueNovember 12, 2013 at 11:50 pm #187544Almost worked! But it ignores the horizontal ruler whitespace of 500px I put inside of it. And it goes all the way up to the header.
November 12, 2013 at 11:52 pm #187550Hi!
Try this:
.page-id-612 .stretch_full.container_wrap.alternate_color.light_bg_color.title_container { height: 500px; }
Regards,
JosueNovember 13, 2013 at 12:01 am #187559You’ve been such a great help, it’s cleared up a lot for me about how the div’s work within each other.
One more thing, if you dont’ mind. I want to make sure the CSS handles the image to respond to the screen size, while aligned with respect to the bottom right corner.
As you can see, the subject of the photo is on the bottom right: http://carveskateshop.us/wp-content/uploads/pano-1.jpg. I just want to make sure I keep that edge in focus as much as I can with CSS.
Current CSS:
#background-thing { background: url(https://carveskateshop.us/wp-content/uploads/pano-1.jpg) no-repeat 0 0 scroll; height: auto; left: 0; min-height: 100%; min-width: 1024px; overflow: hidden; position: fixed; top: 0; width: 100%; }
Thank you, Josue!
November 13, 2013 at 12:26 am #187562Hey!
Try adding the following here, inside the mobile media query wrapper:
.page-id-612 .stretch_full.container_wrap.alternate_color.light_bg_color.title_container { height: 250px; } #background-thing{ top: -225px }
Cheers!
Josue -
AuthorPosts
- The topic ‘Javascript Panoramic Image Problems’ is closed to new replies.