Im using jQuery and jQuery UI to zoom an image.
There is a container div with a fixed size and then an image that is much larger that this that is draggable within that container.
The slider that is below controls the zoom level of the image, this works fine.
My issue is that when zooming the image back down in size, if it has been dragged close to an edge of the bounding container, it should snap to that edge and zoom from the remaining edges.
I cannot get it to work though.
The image passes the edge and continues to be scaled down.
You can see the behaviour by zooming the image, moving the top close to the edge of the container and then zooming back down.
Any help would be appreciated, code here -- http://jsbin.com/egivat/5/edit
Any Animation could be done over a fixed point
Check this link
Animate rotation on "CSS3"
The answer given by codeMonkey might be useful to u
All the best !!
Related
When zoomed into a feature icon, the larger scale it is the more chance it has of not being displayed when partially off screen.
The geom point is center of the icon, so at a high zoom the geom point being off screen put it outside of the extent (fine), but I need the icon to still display partially within the extent. The effect is that it stays partially onscreen until it hits just past half way off screen at which point it stops displaying.
I've looked at ol.extent.buffer but I don't think it's for me. Is there a 'buffer ' I can set that means that the view is rendering an extent larger than it so icons will still display partially?
ol.layer.Vector takes a renderBuffer argument, which lets you specify a buffer around the viewport which will be included in the rendering. The default is 100px.
I am trying to find a way to drag and reposition an image that is below another (larger) image. So basically I want to make the top image completely ignored by the framework. I have tried making it non-draggable, but it still covers up the bottom image and prevents me from resizing it. Anyone had luck with this?
If both images are in the same layer, then you can change the z-index and move the image to the front on click. ( .moveToTop())
If not, then you have to change the z-index of the layer on click, so that the larger image does not cover the smaller.
I use MagicZoomPlus as a module in PrestaShop.
but the zoom image is not shown in correct position.
take a look at following URL:
http://beheshtian.org/product.php?id_product=11
how can I fix this?
(when you move your mouse on thumbnail, the zoom image is not in correct position, move to the very left and very right and you'll see the problem)
Makes sure that the Zoom image is the same ratio as your main image for example if your main product image is 600x150 (a ratio of 4:1) then your zoom image needs to have the same ratio 1200x300 (4:1).
Recently, I decided to delve into the world of HTML5 and the canvas and I have run into an issue that I cannot figure out how to solve.
I am using the zoom technique that was mentioned in this question, as I need to be able to zoom into a specific point.
However, the issue I have encountered is when you zoom into an area, and then perform a large mouse movement, and then zoom out. The entire viewpoint and objects become skewed. (Objects that were previously occupying the entire canvas, are now partially or sometimes not visible at all.)
I am assuming that the zoom in towards a point function is using the mouse position upon zooming out, which is causing these issues.
Here is a demo to get an idea of the issue: (again to reproduce, just zoom in move the mouse a reasonable distance and zoom out)
Not-Working Demo
This is working as designed. When you apply your context translation based on the mouse position it will zoom centered on that position.
To achieve the fixed zoom out behavior I think you want you need to set the mouseX and mouseY only on zoom in and then use the last mouseX/mouseY (or possibly the center of the canvas, or some point in between) for zoom out.
Updated JSFiddle
I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.