11 Jun 2011
Implementing ImageZoom in Blogger
ImageZoom is based on Mootools, and is perfect for photo galleries.It can display large images on top of a page, and has the ability to group multiple photos in one set.
There are numerous advantages to use ImageZoom :
Images can be dragged around.
Multiple images can be open at the same time.
Visitors can still access the underlying content of the page.
It's easier for visitors to find the navigation buttons.
Steps to Add it to Blogger:
1.Login to the Blogger account.
2. Now Go to Design > Edit HTML.
3.Now search for the </head> tag and paste the following code just Above/Before it.
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/mootools-1-2-1.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/mootools-1-2-more.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/main.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/imagezoom.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/ImageZoom/imagezoom.css" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/demos.js" type="text/javascript">
</script>
2.Go to the Post/Page you want to add the ImageZoom and go to Edit HTML tab .
3.Now copy the code from below and paste it there.
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/mootools-1-2-1.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/mootools-1-2-more.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/main.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/imagezoom.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/ImageZoom/imagezoom.css" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/27675057/ImageZoom/demos.js" type="text/javascript">
</script>
4.Now for adding the images into ImageZoom Firstly add the image normally using Insert Image button
Now When you see the code in the edit HTMLwindow 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 href=" " rel="imagezoom" ><img src=" " /></a> |
As you can see we added only a rel="imagezoom".
For Gallery , add the following code
| <a href=" " rel="imagezoom[Gallery_Name]" ><img src=" " /></a> |
<a href=" " rel="imagezoom[Gallery_Name]" ><img src=" " /></a>For overlaying the items the code is
<a href="javascript: openImageZoomOverlay();"><img id="demo_overlay" src="http://dl.dropbox.com/u/27675057/floatbox/zion_valley_thm.jpg" alt="Speed" width="100; height="100;/></a>
In the code ,the src image should be the small one and the link to the larger image should be given in the demos.js file
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 10:35
