Question

I am using Lightview 3 to display an image within an iframe. This has a form that allows the user to zoom in and out of the image and submit the form to generate a thumbnail based on the image in view when the form has been submitted.

The issue I have is that we have to use massive images (width 1100px+) etc.. so having this open in a lightview doesn’t really look great as you have scrolling bars within the iframe.

What is the best way to have the image displayed at half of its size and using some form of scaling when it does create the thumbnail of the fullsize image correctly. Can anyone suggest some methods to do this?

Answer 1

I have done this type of thing many times. My environment is ASP.NET using Visual Basic and the technologies I used to achieve my desired result where FancyBox, JCrop, and Uploadify.

First I set up FancyBox (haven’t used FancyBox2 yet) to open a modal popup window with a iframe with a page that has a preview area (344×270 in my case) and a place to upload an image using uploadify.

Once an image is uploaded, validated, and thumbnail created I create an object that holds information about this image. This includes file name, extension, original width and height, and a new width and height to scale the image to fit my 344×270 preview (cropbox) area.

To find this new width and height I use the following code written in VB.NET:

Dim objImage As System.Drawing.Image = System.Drawing.Image.FromFile(path)
Dim orig_h = objImage.Height
Dim orig_w = objImage.Width
Dim cropbox_width, cropbox_height As Integer
If objImage.Width > objImage.Height Then
    cropbox_width = 344
    cropbox_height = (344 / objImage.Width) * objImage.Height

    If cropbox_height > 270 Then
        Do Until cropbox_height <= 270
             cropbox_width = cropbox_width - 1
             cropbox_height = (cropbox_width / objImage.Width) * objImage.Height
         Loop
     End If
 Else
    cropbox_height = 270
    cropbox_width = (270 / objImage.Height) * objImage.Width

    If cropbox_width > 344 Then
        Do Until cropbox_width <= 344
               cropbox_height = cropbox_height - 1
               cropbox_width = (cropbox_height / objImage.Height) * objImage.Width
         Loop
     End If
  End If

Basically, I’m trying to determine if its portrait or landscape then find the aspect ratio to scale it down to fit my preview (cropbox) area.

Once this is determined I add them to my object, serialize it and send it back to the upload page (FancyBox iframe), set the image path of the preview (cropbox) area, set it’s height and width from the returned object, store the original height and width, and then initiate JCrop.

From here they can crop the image for which I have code to crop the original based on how they have cropped the preview image. I won’t go over this code and technique because you didn’t ask about cropping.

I know this isn’t exactly what you asked for since it sounds like there will be no uploading or cropping going on, but I thought my code for scaling the image down might point you in the right direction.