Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


PHP Image Viewer with Pan and Zoom

Posted on 2004-09-13
Medium Priority
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 1000 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?
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Assisted Solution

harveykane earned 1000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

715 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