PHP Image Viewer with Pan and Zoom

Posted on 2004-09-13
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.

Question by:micamedia
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
LVL 11

Accepted Solution

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.
LVL 11

Expert Comment

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.

Author Comment

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?
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.


Assisted Solution

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).

Author Comment

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?

Expert Comment

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.
LVL 11

Expert Comment

ID: 12127730
iframe support is pretty prevalent ( 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.

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

626 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