03 Jul 2011
Implementing Fancy Zoom in Blogger
Fancy Zoom works with any html (images, text, headings, flash). The only caveat is it doesn't currently work with AJAX. Whatever you want to zoom to must be html already on the page.Width and height of zoom box are configurable through optional setting or css.Note: This tutorial requires that you either have a free Dropbox account or some other file hosting which provides a folder options.
Steps to Add it to Blogger:
1.Login to the Blogger account.
2. Now Go to Design > Edit HTML.
A little tweaking is required for the proper functioning of this plugin
-Firstly Open the fancyzoom,js file and find var directory in it ,It would appear something like this:
var directory = options && options.directory ? options.directory : 'images';
Make it like this
var directory = 'http://dl.dropbox.com/u/27675057/FancyZoom/jquery/images/';
Where images folder contain the various images like Close button,etc (This is where DropBox helps)
3.Now search for the </head> tag and paste the following code just Above/Before it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/FancyZoom/jquery/js/fancyzoom.js"></script>
-Firstly Open the fancyzoom,js file and find var directory in it ,It would appear something like this:
var directory = options && options.directory ? options.directory : 'images';
Make it like this
var directory = 'http://dl.dropbox.com/u/27675057/FancyZoom/jquery/images/';
Where images folder contain the various images like Close button,etc (This is where DropBox helps)
2.Go to the Post/Page you want to add FancyZoom and then go to Edit HTML tab .
3.Now copy the code from below and paste it there.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/FancyZoom/jquery/js/fancyzoom.js"></script>
A little tweaking is required for the proper functioning of this plugin
-Firstly Open the fancyzoom,js file and find var directory in it ,It would appear something like this:
var directory = options && options.directory ? options.directory : 'images';
Make it like this
var directory = 'http://dl.dropbox.com/u/27675057/FancyZoom/jquery/images/';
4.Now adding images into FancyZoom is little bit different from other scripts
First add a image as shown
<div class="photo">
<a href="#abc">
<img src="small.jpg" />
</a>
</div>
Now add this div tag containing the larger version of the image
<div id="abc">
<img src="Large.jpg" />
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true});
});
</script>
Here are Some Example Codes:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true});
$('#medium_box_link').fancyZoom({width:400, height:300});
$('#large_box_link').fancyZoom();
$('#flash_box_link').fancyZoom();
});
</script>
<style type="text/css" media="screen">
#large_box {width:800; height:600;}
</style>
<div id="photos">
<h3>
Images</h3>
<div class="photo">
<a href="#github">
<img src="http://farm4.static.flickr.com/3250/2765022017_356efe6a25_s.jpg" alt="Github helmet" />
</a>
</div>
<div class="photo">
<a href="#hotdog">
<img src="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0_s.jpg" alt="Github helmet" />
</a>
</div>
<div class="photo">
<a href="#turtles">
<img src="http://farm4.static.flickr.com/3088/2709825025_fb6d71b455_s.jpg" alt="Github helmet" />
</a>
</div>
<div id="github">
<img src="http://farm4.static.flickr.com/3250/2765022017_356efe6a25.jpg" alt="helmet" />
</div>
<div id="hotdog">
<img src="http://farm4.static.flickr.com/3150/2726282580_05ed83e3c0.jpg" alt="Hot dog" />
</div>
<div id="turtles">
<img src="http://farm4.static.flickr.com/3088/2709825025_fb6d71b455.jpg" alt="Turtles" />
<p id="turtles_caption">
It's true, they do bite!</p>
</div>
</div>
<div id="text">
<h3>
Text</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. <a href="#medium_box" id="medium_box_link">Here is a medium box</a> blandit rhoncus. Ut a pede ac neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac, ante. <a href="#large_box" id="large_box_link">Here is a large box</a>. Morbi sit amet mi. Ut magna. Curabitur id est. Nulla velit. Sed consectetuer sodales justo. Aliquam dictum gravida libero. Sed eu turpis. Nunc id lorem. Aenean consequat tempor mi. Phasellus in neque. Nunc fermentum convallis ligula. <a href="#flash_box" id ="flash_box_link">You can even embed flash</a>.</p>
<div id="medium_box">
<h2>
Here is a medium box</h2>
<p>
<strong>The width and height of this box are set in the options for this fancy zoom.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
</div>
<div id="large_box">
<h2>
Here is a large box</h2>
<p>
<strong>The width and height for this box are inferred from css. See the style tag in the <head> of this document.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus.</p>
</div>
<div id="flash_box">
<object type="application/x-shockwave-flash" width="400" height="300" data="http://www.flickr.com/apps/video/stewart.swf?v=59154" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="flashvars" value="intl_lang=en-us&photo_secret=1869930911&photo_id=2756538377">
</param>
<param name="movie" value="http://www.flickr.com/apps/video/stewart.swf?v=59154">
</param>
<param name="bgcolor" value="#000000">
</param>
<param name="allowFullScreen" value="true">
</param>
<embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/video/stewart.swf?v=59154" bgcolor="#000000" allowfullscreen="true" flashvars="intl_lang=en-us&photo_secret=1869930911&photo_id=2756538377" height="300" width="400"></embed></object>
</div>
5.Now save the Post/Page and see the magic.
Note: Please Host all the files on free hosting service like DropBox or Blogspot itself !
Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.
Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.
Til next time,
Prayag Verma
at 12:54
