nicekei / jquery-html5-canvas-panorama-plugin Goto Github PK

Calling ddpanorama over dynamically added images in onload handler doesn't work.

This issue is related to the imagesLoaded plugin.: desandro/imagesloaded#147

If this issue is not fixed by the author, there should be a workaround way to this problem.

Hello,
this plugin don't have zoom option?

First of all: really nice work!! Very smooth and intuitive.

May it be possible in one of the next releases to place Links into the Panorama to realise a virtual tour through a building or things like that?

Similar to this one: http://www.openstudio.fr/jquery-virtual-tour/sculpteur.html but smooth like yours ;)

In Firefox 13, when I hover over a panorama, I get a hand cursor. When I click and drag, it stays a hand. Okay.

But in Chrome 20, when I hover, I get the four-arrows-in-all-directions cursor. It's similar to what Mozilla calls the "all-scroll" cursor, though not quite the same. When I'm actively clicking, during the drag, the cursor becomes an I-beam, for indicating that text can be selected. This is awkward and feels out of context.

For semantics, since you can't scroll vertically, it really might make more sense to have what Mozilla calls "ew-resize". And keep it that way during the drag. See:

https://developer.mozilla.org/en/CSS/cursor

This plugin interests me because it seems to work on the iPad (from your demo page), but I am having no luck getting it to work in my own development environments. I'm loading jquery 1.7.2, then ba-outside-events, then ddpanorama.min.js, and then ddpanorama.gensample.js... then when trying to emulate your calls to addSamplePano, the images load just fine, but there is no interactivity and chrome reports the following error:

Uncaught TypeError: Object [object Object] has no method 'ddpanorama'

Am I doing something wrong?

Thanks for the amazing quick responses, Kei. It works beautifully. Amazing! I have a few more ideas for you. I've separated them into separate issues.

The first, this idea, is to allow the specification of a start position. Right now it always starts at X=0 of the original img. This is especially important if you're not looping. I want to be able to start the image in the center of the img, so that the viewer can drag left or right from the initial position.

is there a way to make it works with variable dimensions ?
full screen for exemple

This is a pretty standard option on other panorama plug-ins. This is a dealbreaker for me at the moment...

Distortion in original images don't mean that it should be displayed as distorted

it would be cool, if we handle the image's distortion before displaying the image.

Users must configure the panorama image's meta information(something about the distortion of their image to be displayed) beforehand. Some kind of web based configuration tool can be exposed to user to ease this task.(rendering)
I think it's not easy doing this with 2d canvas, so we should think about how to implement the rendering part.

Maybe we can include the users's view parameters(perspective? location? etc) when calculating the expected rendering result.(configuring)

See http://wiki.panotools.org/Projections#Pannini_projection to find more information about image distortions.

or may be free to explore kind of thing

Currently to get the original image size, ddpanorama uses naturalWidth,naturalHeight properties.

But these do not exist in some browsers - especially IE.

We need a workaround for these cases.

is it possible to have something like a left / right button outside the canvas? so if a user clicks the right button it kinda "simulates" the drag to the left (scrolls to the right)?

I use the panorama-plugin following the demo in the sample.pos.js. But the image is static. The difference is that I move the javascript code from body to head.

Any suggestion. Thanks in advance.
It is weird that I can not paste/type html code in the comment.

I follow the eventredraw example and it works fine on the local machine. Then I push all files on my server and try to operate remotely. I got an error message: SyntaxError: syntax error. http://192....../src/imagesloaded.pkgd.min.js . I googled and consider the possible reason, which is the javascript file being treated as html file and not been loaded. I don't know how to remove this error. Any suggestions? Thanks in advance!

My code is:

  function receiverMessage(event) {
    if (event.origin !== "http://localhost") {
      return;
    }
    var data = event.data;
    var image ="./images/" + data;
    var img = document.createElement("img");
    img.src = image;
    document.body.appendChild(img);
    jQuery(function() { jQuery("img").ddpanorama({ ratio: 9/16}).bind("ddredraw", function(event) ......
    .....
</script>
</head>
<body onload="load()">
</body>

I find the name "loopBorderRate" really confusing. It's neither loop-related, nor border-related, nor rate-related. For example, it works even when "loop" is turned off. "Border" has such a specific meaning in CSS. I'm not sure that's the right word for this. And "rate" usually means something related to time, which this isn't. Hmm... What about calling it 'sideWall' or 'edgeThickness' or something like that?

I finally got what I wanted doing this:

 $("#panorama").ddpanorama({width:644, height:500, loop:false, loopBounce:false, loopBorderRate:0});

But weirdly, when I tried leaving out the 'loopBorderRate' option entirely:

 $("#panorama").ddpanorama({width:644, height:500, loop:false, loopBounce:false});

I got what looks a lot like a massive 80% border at both edges. It's counter to expectations. What value is it defaulting to? I figured out that when it is specified, it buffers the image with a thickness that is a percentage of the overall width. I don't completely understand what the use case is for this, but okay.

Thanks again. I hope this feedback helps! I really love how smooth it is. I bet this is going to be very popular.

Hi! your plugin is great but it could be better if it work also for ie8 (steal to many XP user)

Would be awesome if the callback for this had more information about the panorama's current state. i.e. it's x/y coordinate of the image

You might know this already but i wanted to inform you that in file https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/ddpanorama.css there are several CSS errors.

Line 1: Wrong comment style
Line 3: Missing semikolon, wrong comment style
Line 6: Wrong comment style
Line 3/15: References to not existing images (openhand.cur, closedhand.cur)

Thanks for this it's great. When using in a page with other tags it applies the script to all other image elements, is there a work around for this?

i would like use jQuery-html5-canvas-panorama-plugin (sample Basic) for showing some Panorama images on my website.
The test i made looks very good, perfect,

But the only thing is, that it appers now above the Image {"width":1000,"height":520,"loop":false,"bounceEdge":0.3}

What can i do, that this not appears on the website ?

thanks
Josef

Hi there, is there a way that this plugin works on IE, i've been trying on 7 & 8 but not at all.

Hi,

ddpanorama works prefect for images like PanoSarek.jpg (128k). But when I use ddpanorama to show a large image with size 17.5 MB. It runs slowly and firefox shows "A script on this page maybe busy,... ddpanorama.min.js:9." Do I miss something that causes the page running slowly? Any suggestion is very welcome!

I have got 4 images on this page, each one hidden behind a tab. Sometimes they all load, sometimes none of them load. It may be that sometimes SOME of them load, but cannot remember.

http://roa.mstarhost.com/surgery-center/

Any suggestions on what is going on? Is there a time-out happening? I realize the images are fairly large, but not gigantic. Any way to reload them if it times out?

This is a really cool plug-in. The scrolling is insanely smooth, which is great.

One question I have is about browser support. Could you take this on a tour through browserstack (or some such) and tell us the precise browser support? There are multiple levels of canvas support in the various browsers, so it would be really useful to know in advance. Like you say, there are lots of plug-ins that do this, so it would help developers to compare.

I want to be able to control how far and for how long the panorama keeps traveling after I fling it with the mouse/touchpad. The option should be a numeric value, within some stated range. Maybe [0..100]

The reel rotation plugin has something like this. They call it 'brake':

http://jquery.vostrel.cz/reel#syntax