In my website zoom feature is not working. On hovering over an image the selected area shown is a complete image and zoom image also seems to be the same.
Is there any way I can select a small area of the original image that will be zoomed when hovering?
i think your js are conflict to each other
Try this :
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>jQuery.noConflict();</script>
Magento 1.9 - zoom and selecting options not working
It looks like the zoom is working because in your screenshot, the zoomed image is slightly larger than the main image.
The problem is probably either:
A) Your original image is too small. To resolve this, upload a larger image, at least 800px width preferably (and as much as 1500px width).
or:
B) Your template is not fetching the largest version of your image. You can choose which image is displayed as your zoom image and it should almost always be the largest version. This can be adjusted in your Magento admin settings or coded manually in your template (depending on what theme you're using).
For a more detailed answer, please provide the URL of your page.
Related
On the main page it's showing blurry image in futured posts.
website link:- iguidu.blogspot.com
I tried different methods but it is not working. can anyone?
related script:-
Original image is only 72px and you're rendering into a large box, You're basically using thumbnails in the place of featured image, this is the reason it's blurry. try using larger images, ideally to the expected rending size, in your case 490 x 305px
In your case, this seens to occur because of the images size. If you open each image in a new tab you will see that teir original size are 72x72 although the display size (the size that us, clients, are seeing) is 490x305.
How to correct this ? The ideal is to get a bigger image, and also an optimized one. The most optimezed format for web is .webp. Check on THIS link what is this.
Another important thing when comes to resize image is to keep the aspect ratio, but I don't think you are experiencing any issue with that, although I will let a LINK talking about it.
I'm trying to build a zoom feature on images. To do so, I'm using Jquery Zoom, the script is simple:
$(document).ready(function(){
$('img')
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block')
.parent()
.zoom();
});
There are 2 problems with this:
While this works correctly on images larger than the enclosing div's dimensions, it doesnt work on images which are smaller that the div dimensions. Ideally, I expect irrespective of the image dimensions, the image zooms nonetheless.
Right now, there is no control over the extent of zooming. I want that there probably be + and - buttons (something like this) on the bottom of the image which give the user control over the scale of the zoom while showing the current zoom percentage.
I've made a codepen of my case here: https://codepen.io/anon/pen/gJEdxm
How should these 2 changes be effected? I'm novice at Javascript so not sure how this would work out. Reading the documentation, I see there is a possibility to specify the zoom percentage (magnify attribute). Is there someway to give the input to magnify from the UI?
I have my magnifier set up. Take a look.
http://www.omarhabash.com/twyla
Looks like all works except it is not magnifying... Can some one tell me exactly what I am missing to magnify the image in the magnifier cursor?
It looks like you're using Bootstrap's "magnify" plugin.
Its docs say "If you want to show the large preview at a 200% ratio, just use an image twice the size of its container." In your website, you are already displaying the image at its full size, which is why the "magnified" version is identical to the original.
Just use a larger image and in the html set its size to the same pixel dimensions you currently have; the plugin will do the rest for you.
I am doing on a webpage for display a large amount of pictures/thumbnails. What I am looking for is to auto-resize the pictures, make each line has fixed height, and the right margin of each line is also equal. Even the images are reformatted when I change the size of window, the above mentioned style is kept.
That is quite similar with what google did when displaying their images search results:
Google image example (resize your browser window and you may find what I'm trying to say :-) )
Anyone has idea on this would be much appreciated! Thanks
According to me there 2-ways, 1)by css 2)by js
1)CSS: you can add this in your css, this will resize your thumbnail accordingly.
img{max-width:100%;}
2)JS: Using js you can resize the thumbnails based on the available space and also decide on how many images do you want to show in one row.
Has anyone got to some good code to zoom into an image using javascript?
I know I could just resize it etc but was being lazy and looking for something clever to zoom to different levels, move around when zoomed etc
Check this:
jQZoom
Zoomimage - jQuery plugin
jQuery ImgZoom
FancyBox
How big are the images?
If they are huge images you do them like google map style using this http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp
This really depends on what quality you are after. If you need a hires hiquality image with detailed zoom levels and proper interpolation you will need to write a backend service to serve up zoomed portions of your images. If you have no care for quality or speed, you could download the entire image and fit it to display inside a div absolutely positioned, offset for the area you want to view and sized as determined by your zoom level.
I would say you are probably after the first option. There are some tools already made for this, I persoanlly havnt used any of the tools; I am sure othes will post links to others you can try; I have written my own service and client. I cant go into the exact details as its proprietary, but I can give you an overview of what I do.
I have an asp.net generic handler that takes a query string denoting which image (by an id) and the coordinates to zoom on and the target image size. I have the service load the image and crop and resize it (its more complicated than that as I have many optimizations and preparsing when the file is originally uploaded, such as multiple cross sections of the file for faster serving when zooming, but what I describing here is the basics).
That service simply returns type image/jpeg and sends the image.
On the client side I have written a marquee box control that allows the user to marquee an area on the image they want to zoom in on. they marquee the area and click zoom. This then calculates the offsets into the image of the selected coordinates based on the original image size and the viewable image size. I send hese coords to the handler previously mentioned.I load the the url with query string of the srvice into an Image object, and handle onload. If all went well i then swap that to the viewed image and updates all my client side variables for determining where on the image I am zoomed into and then it can be zoomed again or zoomed out or panned further from there.
Now i understand your lazy requirement, but i need to say that writing this is actually quite easy to do to get the basics going. the hardest part you will find is doing a select box. But then even that can be as simple as tracking two click. Top left of the zoom select marque and bottom right. Or not having a select box at all and have a zoom in and out only at predetermined intervals. I on my projects required a zoom box as its a fairly complex image analysis solution.
I hope this at least helpful and leads you to something useful.