Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 12, 2013 at 9:52 pm #187464
    tlow87

    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 ago by tlow87.
    November 12, 2013 at 10:45 pm #187488
    Josue

    Hey 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,
    Josue

    November 12, 2013 at 10:49 pm #187495
    tlow87

    That 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 #187497
    Josue

    Hey!

    Try adding a hight z-index value, like:

    #background-thing {
z-index: 2000 !important;
}

    Cheers!
    Josue

    November 12, 2013 at 11:00 pm #187504
    tlow87

    I 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 #187517
    Josue

    Hi!

    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!
    Josue

    November 12, 2013 at 11:50 pm #187544
    tlow87

    Almost 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 #187550
    Josue

    Hi!

    Try this:

    .page-id-612 .stretch_full.container_wrap.alternate_color.light_bg_color.title_container {
height: 500px;
}

    Regards,
    Josue

    November 13, 2013 at 12:01 am #187559
    tlow87

    You’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 #187562
    Josue

    Hey!

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Javascript Panoramic Image Problems’ is closed to new replies.