Solved

PHP Image Viewer with Pan and Zoom

Posted on 2004-09-13
7
8,534 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
Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

 
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

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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 …

773 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