Solved

PHP Image Viewer with Pan and Zoom

Posted on 2004-09-13
7
8,509 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 2

Assisted Solution

by:harveykane
harveykane earned 250 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Consider the following scenario: You are working on a website and make something great - something that lets the server work with information submitted by your users. This could be anything, from a simple guestbook to a e-Money solution. But what…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

744 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now