Wednesday, April 20, 2011

FanzyZoom

FancyZoom is a Javascript to zoom images inline. There are 2 javascript files to run FanzyZoom effect. You can use webhosting or online data storage encryption to host the js files.

All javascript files and background images include in Monte cristo blogger template zip file.

1. FanzyZoom.js
2. FanzyZoomHTML.js

the form of code :
<a href="/image.jpg"><img src="/image.jpg" /></a>

Originally, the form of code when you upload an image in blogspot are like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-che6gkT_FF8/Ta_G-bMFftI/AAAAAAAABHw/XSKJCsKZi60/s1600/fancy.JPG"><img style="cursor:pointer; cursor:hand;width: 320px; height: 214px;" src="http://4.bp.blogspot.com/-che6gkT_FF8/Ta_G-bMFftI/AAAAAAAABHw/XSKJCsKZi60/s320/fancy.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5597911637597454034" /></a>

So, you need to change the source image as same as the link image. Like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-che6gkT_FF8/Ta_G-bMFftI/AAAAAAAABHw/XSKJCsKZi60/s1600/fancy.JPG"><img style="cursor:pointer; cursor:hand;width: 320px; height: 214px;" src="http://4.bp.blogspot.com/-che6gkT_FF8/Ta_G-bMFftI/AAAAAAAABHw/XSKJCsKZi60/s1600/fancy.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5597911637597454034" /></a>

What a different between this images?



Image 1 without background styles.
Image 2 with background styles.
How to make the FanzyZoom background styles work?
1. Upload the FanzyZoom background images to your images hosting.

Example using photobucket.com:
1. Create FancyZoom images folder.
2. Upload the images.
3. Open FanzyZoom.js files (can use wordpad) then find this code
var zoomImagesURI = '/images-global/zoom/';
You only need to change "/images-global/zoom/" with your "images folder link" like this.
var zoomImagesURI = 'http://s530.photobucket.com/albums/dd341/fbtemplate/fancyzoom/';
4. upload the javascript files to your files hosting.