In this post I will demonstrate the two ways in which you can zoom into images uploaded to JungleDragon.

First, a little explanation of what happens when you upload a new image to JungleDragon:

• Original image gets uploaded to the JungleDragon web server
• A script runs to intelligently resize the image to different formats:
  • Square: Tiny square thumb
  • Small: Small thumb with aspect ratio respected
  • Medium: Normal size used to display image on image page
  • Large: As the word says, larger than medium :)
  • Original: The untouched, original format
• The resulting images are transferred into Amazon S3
• Exif data is retrieved from the original
• Database records are created for the new image (one main image entry and multiple imagefile entries). When applicable, tag records are created too. Finally, karma is rewarded to the user and their karmalog is updated.

With this in mind, let's have a look at how to zoom in JungleDragon:

View image formats

The simple, static kind of way to look at different image sizes is to hit the button "View sizes" in the image button bar:

This will open the "View Sizes" page (click to enlarge):

From this page, one can select the size to view using the tabs. Additional options include a download button (that downloads the size on screen) and an embed panel, which spits out code to embed the current image size on an external website. Comments, votes, tags and all other controls normally associated with an image are stripped from this page to keep it simple.

Image live zoom

The second way to zoom into an image is to use the live zoom function. This short video demonstrates the effect:

This is what happens in the video:

• User has a normal image page open (displaying the medium sized format)
• User clicks on the image
• Large image is loaded in the background (takes about 0.5 sec in the video so hard to see)
• User hovers over portions of the image and sees increased detail as taken from the larger size image
• User hovers out of the image and sees the original, medium sizes image again

How it's made

Perhaps a little bit of a gimmick, but I find it a nice, unobtrusive effect, since users actually have to click to activate zoom mode. You are probably wondering how this is implemented. Here's how:

• Download MagicZoom (license is only 29£)
• Install the JS library into your project and refer to it on your page
• Install the CSS file into your project (or integrate the rules into your main CSS file)

Next, create the appropriate markup on your page. This will consist  of a normal image tag which points to your medium sized image, surrounded by a "a href" which points to your larger image size. To set the options of the zoom plugin, the rel attribute of the a tag is used:

<a href="address to your large image" 
class="MagicZoom"  rel="click-to-initialize:true;click-to-activate:true;
zoom-position:inner;zoom-fade:true;">
<img src="address to your smaller image" />
</a>

As you can see, I'm using an inner zoom mode, which overlays the original image with the zoomed one. There are many ways to customize the behavior though. A plugin that just works, I love it. Do you?

RATE THIS CONTENT (OPTIONAL)

	Was this document useful to you?
	Rating:	Awesome  Good  Average  Poor  Useless

CREATE A NEW COMMENT

	Name:
	Email:
	Website:
	Content:	HTML is not allowed. Hyperlinks will automatically be converted.