11 posts
  • Bought between 10 and 49 items
  • Has been a member for 5-6 years
  • 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.

3650 posts Community Moderator
  • Has been a member for 5-6 years
  • Contributed a Tutorial to a Tuts+ Site
  • Netherlands
  • Community Moderator
  • Microlancer Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
+4 more
Joost Volunteer 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
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
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
  • Bought between 10 and 49 items
  • Has been a member for 5-6 years
  • United States
bopjo1 says

Wow thanks maguiar01! That works most excellently!

8119 posts Community Moderator
  • Attended a Community Meetup
  • Community Moderator
  • Has been a member for 6-7 years
  • United Kingdom
  • Contributed a Tutorial to a Tuts+ Site
  • Won a Competition
  • Contributed a Blog Post
  • Beta Tester
  • Bought between 50 and 99 items
+4 more
MSFX Volunteer 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
  • Bought between 10 and 49 items
  • Has been a member for 5-6 years
  • 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?

3650 posts Community Moderator
  • Has been a member for 5-6 years
  • Contributed a Tutorial to a Tuts+ Site
  • Netherlands
  • Community Moderator
  • Microlancer Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
+4 more
Joost Volunteer 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
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
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.

1026 posts
  • Sold between 100 000 and 250 000 dollars
  • Elite Author
  • France
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Contributed a Tutorial to a Tuts+ Site
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
+4 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