11 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 10+ items on Envato Market
  • Located in 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.

3788 posts Community Moderator
  • Helps us moderate the forums
  • Contributed a tutorial on Tuts+
  • Located in Netherlands
  • Made it to the Authors' Hall of Fame
+9 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
  • Has been part of the Envato Community for over 4 years
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
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
  • Has been part of the Envato Community for over 5 years
  • Has collected 10+ items on Envato Market
  • Located in United States
bopjo1 says

Wow thanks maguiar01! That works most excellently!

8378 posts Community Moderator
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Attended one of our Meetups around the world
+9 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
  • Has been part of the Envato Community for over 5 years
  • Has collected 10+ items on Envato Market
  • Located in 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?

3788 posts Community Moderator
  • Helps us moderate the forums
  • Contributed a tutorial on Tuts+
  • Located in Netherlands
  • Made it to the Authors' Hall of Fame
+9 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
  • Has been part of the Envato Community for over 4 years
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
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.

1043 posts
  • Has sold $125,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
+9 more
Pixelworkshop says

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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by