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).
Related
Product Image resize css coding or theme modules
I want product image resize size will be Reduce in top and bottom white space pls help me as it it is image pls My Site URL http://104.131.84.58/index.php
Crop the image closer to the left and right edges of the product. That will cause the image to fill more vertical space.
Assuming I understand your question correctly.
I'm trying to figure out how to render an image on a canvas, changing the canvas zoom to best fit the image (to a mimum size of 50% zoom), and allowing the user to pan around the canvas to see the remainder of the image, if it didn't all fit on the screen.
I've been writing an Image cropper and I've noticed that the two problems I'm running into are that
When the Image is too big it's cut off of the canvas.
When the Image is too big it takes up the entire screen.
By limiting the size of the canvas and changing the zoom of the image, I should be able reduce these issues. In the event an image is still too large, you can pan around the screen. Here is an image example of what I'm looking for
Where the RED is the Canvas element, and the PINK is the Image. (Being displayed on the Canvas, and sticking out on both sides). So the user should be able to pan left, or pan right and see the parts of the image that don't fit on the screen.
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 !!
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.
See this example http://jsfiddle.net/37aMB/15/
If you resize the area at some points image will have have space at bottom and some time right side container will have space at bottom.
I want to make everything in proportion and with equality. Red backgeound should never be seen
You may try to set fixed size for this banner, and then manipulate zoom style attribute.
Here is modified example. It's not pixel perfect yet, but I have the impression it scales better.