Jquery Image Maginfier For Blogger Blogs

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 13 Comments

I recently came across a blog that had the effect of image magnification. That is, once you click on the picture in a post, it magnifies. So, I found a hack to implement the same on blogger blogs. The script and the hack original was developed by Dynamic Drive. I modified a little bit of the code and have implemented in my post here.

I feel this trick will be very helpful to those people who post a lot of photos in their blog and for those who post payment proofs in their blog post. Fine, enough of all bla bla's. Let me straight away explain you how to implement this technique in your blog. Follow these simple steps.
1. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.
2. Now, expand your template, that is, make sure that you have a tick mark in that "Expand Widget Template". Now, do a search using "CTRL+F" for the following line: </head>
3. Place the following piece of code on top of the above line(</head>).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/careerfreelife/magnify/Magnifier.js?attredirects=0' type='text/javascript'>
/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

4. Now, when you include any picture in your blog post. Go to the "Edit Html" section and just include class="magnify" and also include this piece of code with the <img src="URL"/>. Just see the syntax of the code here.

<img class="magnify" magnifyby="3" style="width: 200px; height: 150px;" src="YOUR IMAGE URL" alt="YOUR ALTERNATE TEXT" id="BLOGGER_PHOTO_ID_19numbers" border="0" />

5. Also, remove the link pointing to that picture. That is, remove the href code before the image HTML. If it is pretty confusing, just take a look at the following piece of code.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"> <img class="magnify" magnifyby="3" style="width: 200px; height: 150px;" align="left" src="http://alturl.com/53eg" alt="sm_VistaWallpaper" id="BLOGGER_PHOTO_ID_5364892650738529362" border="0"/></a>

This is what, I used for uploading the picture shown above. You can change the width or height of the picture and even change s200 to s400 or s800 in the image URL for bigger images. Note: You cannot find s200 in the above code because I have shorten my URL due to the page width constraints. Any help regarding this trick, you may leave a comment and I will solve your problem.

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• Blogger Tutorials