Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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 10 years, 4 months ago by tlow87.
    #187488

    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

    #187495

    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.

    #187497

    Hey!

    Try adding a hight z-index value, like:

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

    Cheers!
    Josue

    #187504

    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.

    #187517

    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

    #187544

    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.

    #187550

    Hi!

    Try this:

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

    Regards,
    Josue

    #187559

    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!

    #187562

    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

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