19 Jun 2011
Implementing Nivozoom in Blogger

Nivo Zoom is a Lightbox-like but simpler image zooming jQuery plugin from the developers of the popular Nivo Slider.

The plugin is lightweight (4kb compressed), focused only on images and comes with a bunch of settings.It supports 5 different zoom types and can show image captions (long texts are handled well).Nivo Zoom, by default, doesn't use overlays but can display the bigger image with an overlay where the opacity and colors of it can be customized.

Steps to Add it to Blogger:

1.Login to the Blogger account.

For Multiple Usage
For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it.

<link href="http://dl.dropbox.com/u/27675057/nivozoom.pack1_.0/nivo-zoom.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/nivozoom.pack1_.0/jquery.nivo.zoom.pack.js" type="text/javascript">
</script>

2.Go to the Post/Page you want to add Nivo Zoom and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<link href="http://dl.dropbox.com/u/27675057/nivozoom.pack1_.0/nivo-zoom.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/nivozoom.pack1_.0/jquery.nivo.zoom.pack.js" type="text/javascript">
</script>

4.Now for adding the images into Nivo Zoom ,Firstly add the image normally using Insert Image button

Now When you see the code in the edit HTML window it would be something like this

<a href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a>

Make it like this

<a class="nivoZoom" href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a>

As you see we only added a class="nivoZoom"

Now add a javascript snippet after it:

<script type="text/javascript">
$(window).load(function() {
 $('body').nivoZoom();
});
</script>

It has many options which can are customizable

Here is a customized snippet:

<script type="text/javascript">
$(window).load(function() {
 $('body').nivoZoom({
  speed:500,
  zoomHoverOpacity:0.8,
  overlay:false,
  overlayColor:'#333',
  overlayOpacity:0.5,
  captionOpacity:0.8
 });
});
</script>

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.

Til next time,
Prayag Verma at 18:20

scribble

19 Jun 2011 Implementing Nivozoom in Blogger

19 Jun 2011
Implementing Nivozoom in Blogger