Solved

PHP Image Viewer with Pan and Zoom

Posted on 2004-09-13
7
8,549 Views
Last Modified: 2008-01-09
I know i could code this my self with a bit of work, but before I do I wanted to know if anyone knows of any prebuilt image view that does that following:

1. Allows the user to zoom in on the image
2. allows the user to pan the image.

If i did code this my self using the GD graphic library and php, how feasable would it be? Would it be very slow as php would have to re-write the image each time a pan/zoom was executed?

IF anyone can give me suggestions on how I might approach coding it myself, for optimum speed, that would be very helpful as well.

Thank you in advance.

Dan
0
Comment
Question by:micamedia
  • 3
  • 2
  • 2
7 Comments
 
LVL 11

Accepted Solution

by:
shmert earned 250 total points
ID: 12046135
Using GD would indeed need to redraw the image for each page view, and would be pretty slow.  A different alternative would be to use javascript and an iframe.  Simple load the full-res image in the iframe, and use the height and width attributes to scale it to the right size.  Unfortunately, this will rely on the antialiasing on the browser side, which doesn't always look too hot.

You can then have some javascript widgets which adjust the height and width of the image.  Because the image is in an iframe, it will only take up as much space as the iframe, with scrollbars appearing if the image gets bigger than the iframe.
0
 
LVL 11

Expert Comment

by:shmert
ID: 12046155
Actually, a nicer way to do this would be to create multiple thumbnails of the image on the fly, each representing a different zoom level.  You can use the imagemagick libs (also mentioned in your other post) to create very nice-looking thumbnails.  Also the user doesn't need to load the full-res image to see it.
0
 
LVL 1

Author Comment

by:micamedia
ID: 12046383
hmm.. didn't think of the javascript / iframe option.. that might be a good idea.. I'd have to test it out to see how well that might work.

Maybe i could combine that with different thumbnail zoom levels like you said. Then let the browser zoom each of these, and have some script that switches to the next level of zoom image when the users gets to a certain zoom point.

How many browsers support iframes? Would i run into browser compatibility issues?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 2

Assisted Solution

by:harveykane
harveykane earned 250 total points
ID: 12108361
Another option would be to use Flash. I did this a few years back by embedding a jpg into the flash file, and adding a couple of simple flash buttons for zooming and scrolling. Back then, the Jpg had to be hard coded into the swf file, but I'm sure newer versions would let you use a dynamic image (ie one swf file to control as many jpg files as you need).
0
 
LVL 1

Author Comment

by:micamedia
ID: 12108531
yes.. i would like to do that.. use flash.. but how? And yes it would need to be dynamic, i should be able to pass it some information about what image to use.

Can yhou help?
0
 
LVL 2

Expert Comment

by:harveykane
ID: 12108584
I'm not a Flash programmer at all, so I wouldn't be the right person to ask.

But if I was wanting to do what you are asking, I would...

Download the 30 day trial of the latest Flash version
Have a play with it, read the documentation and go through the tutorials
Post in the Flash area "How do I dynamically change images within a flash file?" if you get stuck

I'm pretty sure the new versions of flash are a lot more programmer oriented,  meaning you can now use Flash to access information via files, GET, POST, and maybe even databases.

I'm sorry I can't be of more use, but hopefully this is a starting point if you want to look at this option further.
0
 
LVL 11

Expert Comment

by:shmert
ID: 12127730
iframe support is pretty prevalent (http://webmonkey.wired.com/webmonkey/reference/browser_chart/) so you shouldn't really run into problems there, except maybe netscape 4.x, may it rot in hell for all eternity.

Incremental loading of the thumbnails would be a nice way to reduce bandwidth, particularly if you're dealing with very large images.  If you want to get carried away, you could even create break the larger versions of the image into smaller versions.  So when zoomed all the way out, you're viewing one small thumbnail of the large image.  When you zoom in past a certain point... well, I just realized that this would be a _ton_ of work.  Probably not worth the bandwidth savings.

At any rate, given a starting image, you could make thumbnails for it in a loop, each thumb is say 30% smaller than the one before it, until you get to a thumb that is a little bigger than the smallest version you want to display.  Label these well, and then you should be able to do the incremental resizing thing.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Generating table dynamically is the most common issue faced by php developers.... So it seems there is a need of an article that explains the basic concept of generating tables dynamically. It just requires a basic knowledge of html and little maths…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question