Image Zoom using javascript? - javascript

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.

Related

Image to scroll across whole screen

Let's say I have a big image (mine is 3968x3584) and I want to view it zoomed in. OK, well I can usually zoom in and scroll using the scrollbars.
Well that's annoying. Is there a way I can take the image. And just start somewhere and have it "original" size and I can move it by doing the mouse "drag" across the screen.
and if you resize your browser screen, it will act accordingly.
Is there a jquery or such plugin that can do this?
Check if this helps
http://code.google.com/p/panojs/
Here is a copy of what is written there so I can meet the 30 words this form is forcing me to do:
PanoJS is an interactive JavaScript widget for panning and zooming a
panoramic image stitched together dynamically from smaller tiles. This
widget can be used for viewing images that are larger than the
available space in the browser viewport. Examples include maps or high
resolution document scans.

create zoom functionality when we click on sign whole page get zoom and when we click - sign it get zoom out.

I want to create zoom functionality when we click on + sign whole page get zoom and when we click - sign it get zoom out in javascript or in CSS. How it is possible? It will be used in php. It also show Zooming %.
Apparently there is zoom property in CSS3.
You can apply it to body and it should zoom the whole page.
It's kind of bad user experience to zoom in and out a whole page. Users who really have low vision and challenges know already where and how to do it in the browser. Those who don't have any, well they would be shocked a bit when the entire page gets bigger or smaller.
My advise: just try to analyze what exactly you what to zoom in-out, if it is text area, just set bigger font size with js, if its image, just stretch it with js, it if is block, svg etc., just set bigger parameters.
P.S.: the zoom property in not cross-browser and has weird behavior. But you can combine it with the transform property to make a more or less cross-browser solution.

Do I use the canvas element or just a plain div holder for an Interactive image carousel/slider with hotspots?

I need to make a interactive image gallery (or image slider) where some hotspots need be placed on. It has to be possible to click on those hotspots, to update a sidebar with the corresponding info. Some basic animation must also be possible on a slide or scene of the gallery.
Which setup would be the best solution.
I'm currently thinking about the canvas element, but the lack of specific events for drawn hotspots makes me doubt. EaselJS could be a solution though.
An alternative could be just using a regular javascript image gallery and place some fixed positioned hotspots on it.
This is actually a basic mvc-setup, I have the image gallery, hotspots and the sidebar.
Should I use a javascript mvc library like http://javascriptmvc.com/ or backbone.js
So my question actually is, what would be the best setup, with performance and some basic animation in mind?
Thanks.
other interesting links I found:
http://processingjs.org
http://raphaeljs.com
...
If you are displaying large images or expect users to have older browsers or browsers without current GPU acceleration then you should always use standard HTML4 elements to get this done. Using canvas is overkill and will cause you pain later on if you are not overly-experienced with it.
With DOM-based images you already have click events and can even use image maps to do the click-regions. With canvas you need to code your own click detection and map mouse position to a region to check for clicks.
All in all the simplest solution is usually the best one and for performance and ease of dev, canvas is not the way forward in my opinion.

How to simulate magnifying glass on Web-page image (Javascript)?

Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They also turn the mouse into a magnifying glass that can sweep over the picture (the gold ring).
I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).
Looking at their source code, it seems they are using rather basic techniques to achieve this.
Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.
The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.
Here's a sorta minimal reconstructed example.
Another example where we don't hide the div overflow to reveal the entire thing as a square.
Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:
Power Zoomer
Featured Image
Zoomer
Cloud Zoom
Secondly, it's quite easy to achieve. Just load the full-size image, but give it a width smaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-position property to the corresponding scaled x,y coordinate that the user's mouse is currently on.
There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.
Visit http://codeblab.com/glass/ for an real life example and in depth explanation of this technique. Flash and CSS v3 have ample functionality to construct a round magnifying glass.
However, simulate-a-circle-with-overlapping-rectangles works on (many) more platforms.
(DISCLOSURE: codeblab.com is my personal hobby blog with some weak links to my work in The Netherlands.)
There is a full example of magnifying any sort of HTML, including HTML5 at http://www.aplweb.co.uk/blog/js/magnifying-glass/. Works cross-browser too - although rounded corners are a bit iffy on most browsers - so you are going to have to use a box rather than circle.
Here is how to works:
Duplicate the content you want to zoom
Place the duplicated content into another element and set the visible width/height and overflow hidden
Use JavaScript to move the duplicated content so that it moves by the zoom amount * mouse movement. Also move the visible div by the mouse movement.
That is pretty much it too it. There are lots of little things to look out for though to make it work on all browsers.
I don't know how Google does it, since the logo is no longer showing in my area; but this effect can be achieved by clipping the enlarged animated GIF over the regular image using canvas. Alternatively, it is also possible to create create a circular clipping using CSS border-radius (commonly used to implement rounded corners).
EDIT: I've hacked this up together to show the basic technique that you need if you used CSS border-radius: http://jsfiddle.net/yjBuS/
Looks like they're using two images, one for the logo and one for the zoom (the zoomed one is actually sliced, to run the animations separately...?) They probably detect if the mouse is over the normal logo, then show the yellow circle and attach it to the mouse position. Then showing the other image, shifting it opposite of the mouse. Or something similar.

Javascript/JQuery Image Cutter

Okay my last question got no response. I think I didn't ask the way I should do.
Basically my requirement is similar to this one Programmatically Clip/Cut image using Javascript
But following that link will result in a rectangle view of any portion of the image but I want to clip it any direction (polygon). Would that be possible?
There is not a good way to make an arbitrary polygon shape with the HTML 4 DOM. If you were using canvas I'd say you could do it that way. Your other option would be to just have a transparent png (and gif for IE6) on top and then the image underneath that and absolute positioned similarly to the other answer you referenced.

Categories

Resources