11 posts
  • 6 Years of Membership
  • Collector Level 2
  • United States
bopjo1
says

Hi all,

Can anyone recommend a Jquery plugin that will do this:

http://www.onebiscaynetower.com/

Moving the mouse to the left or right moves the image smoothly in the opposite direction.

3875 posts Community Moderator
  • Weekly Top Seller
  • Moderator
  • Tuts+ Instructor
  • Netherlands
+10 more
Joost
Moderator
says

When you right-click the image, you’ll notice it is in fact Flash ;) You can find a few similar items on ActiveDen by searching for pan.

Alternatively, I’d love to build it for you in either Flash or jQuery – contact me via the form on my profile if you’re interested :)

42 posts
  • 4 Years of Membership
  • Author Level 6
  • Collector Level 1
  • Exclusive Author
+2 more
maguiar01
says

Hi bopjo1,

Since your profile says “web services”, i’m assuming that you have basic knowledge of html and javascript.

In your page, put jquery, create a div to be the container and put your panorama image inside it, like this:
    <div id="pano_container">
            <img src="my_panorama_img.jpg" id="pano_img" />
    </div>

then you can use this javascript to obtain the effect you want.

    <script>
        $(document).ready(function() {
            var pano      = $("#pano_container"),
                panoImg   = $("#pano_img"),
                w         = panoImg.width(),
                panoWidth = 600, // this is the width of the container in pixels
                cx        = (w-panoWidth)/panoWidth,
                lastx     = 0;
            pano.css({
                 width  : panoWidth,
                 height : panoImg.height(),
                 overflow : 'hidden'
            }).mousemove(function(e){
                var x = e.pageX-pano.offset().left; // mouse x coordinate relative to the container
                if (Math.abs(lastx-x)<=1) return; // only do something if the mouse X coordinate moved more than 1 pixel
                lastx = x;
                panoImg.stop(true)
                       .animate({ marginLeft : -cx*x }, 500, 'linear');
            });
        });
    </script>

I hope this helps you (at least to get started). I’m sorry i didn’t explain my answer better, but something came up here and i have to go.

Good luck.

11 posts
  • 6 Years of Membership
  • Collector Level 2
  • United States
bopjo1
says

Wow thanks maguiar01! That works most excellently!

8586 posts Community Moderator
  • United Kingdom
  • 7 Years of Membership
  • Moderator
  • Winner
+10 more
MSFX
Moderator
says

When you right-click the image, you’ll notice it is in fact Flash ;) You can find a few similar items on ActiveDen by searching for pan.

but he wanted it in JS :P

shouldn’t this be in TF?

11 posts
  • 6 Years of Membership
  • Collector Level 2
  • United States
bopjo1
says

I have another question…I would like to place 2 images in the container, then float them left so they are stacked on top of each other. I would like the top image to fade out slowly, then after a while, fade back in. I used the code above, but I changed this line so that “pano_img” was a class instead of an ID:

panoImg = $(”.pano_img”)

Then I assigned the class to each image.

I doubled the container height to make sure they were moving in tandem. They were, so that’s all good.

But I want the top image to fade out, then fade back in. I gave it an ID of “first_photo” and used jquery to select it thusly:

$(”#first_photo”).fadeOut(“slow”);

..but it doesn’t seem to do anything.

What am I doing wrong?

3875 posts Community Moderator
  • Weekly Top Seller
  • Moderator
  • Tuts+ Instructor
  • Netherlands
+10 more
Joost
Moderator
says


When you right-click the image, you’ll notice it is in fact Flash ;) You can find a few similar items on ActiveDen by searching for pan.
but he wanted it in JS :P

I must’ve miss-read his post and assumed he wanted the same thing as on the demo :o My bad.

42 posts
  • 4 Years of Membership
  • Author Level 6
  • Collector Level 1
  • Exclusive Author
+2 more
maguiar01
says

bopjo,

Can’t say for sure without looking exactly at the code, but i guess that the problem is caused by the line

panoImg.stop(true)

this line stops all animations on the element, including the fadeout/fadein effect.

1045 posts
  • Trendsetter
  • Author Level 8
  • Elite Author
  • Top Monthly Author
+12 more
Pixelworkshop
says

There are also a few parallax plugins for jquery, they can do this effect too I guess :)

by
by
by
by
by
by