Zooming Photos, Ads and HTML Content
In the recent years, digital photography is shaping the Web's landscape where anyone with a digital camera can instantly publish photos on the Web. Many use photo-sharing services like Flickr, but many publish photos on their own Web sites or on their social networking sites. Everyone wants to make his or her photos look nice.
Displaying photos on a Web site is relatively simple. A link to the photo file within the HTML code and you are all set. However, if you want to add effects and handle volumes of photos then things become little more complicated and more fun.
We recently stumbled upon a jQuery plugin that really impressed us. It adds zoom effects to photos. The user clicks on a thumbnail and a box opens that zooms in on a larger photo. Inserting this plugin into a Web page is relatively easy with few lines of code within the jQuery "ready" function. Everything else is pure HTML. There is also an option to show HTML or textual content within the boxes, which makes it an alternative for showing ads with a twist.
Text Box Zoom
You can use FancyZoom to show boxes with HTML/text content. Great for help windows and user messages. The size of the box is adjustable within the calling function.
Required downloads for the above example:
Java Script code to start this example.
$(document).ready(function() {
$('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true});
$('#medium_box_link').fancyZoom({width:200, height:200});
});