Jquery Image Magnifier For Blogger

Jquery Effects Part 1




This hack will help you to post elegant magnifying effects to the images you post in blogger.




Here is a preview of what this script can actually do.






The method. - This is actually a very simple hack.



The Scripts for this amazing hack was developed by Dynamic Drive



First of all you will have to download two files.



One is the script that powers the magnification [http://dynamicdrive.com/dynamicindex4/jquery.magnifier.js]


and second one the the cursor that should be displayed when you hover the mouse over the image.

Upload the cursor file(2nd file) somewhere and note down its link.I would suggest you to use http://www.hotlinkfiles.com/


Now Open up the first file(the js file) and find this line in that..

cursorcss: 'url(magnify.cur), -moz-zoom-in',

replace magnify.cur with the url of the cursor that you just uploaded now.

Save this js file and upload it. note down the urls of this file.



Now we have to add the script to our blogger template.


To do that Goto Blogger Template- > Edit Html


Find this code

</head>

and replace it with the following code[change url_of_jquery_script with the actual url]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="url_of_jquery_script">
/***********************************************
* 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>
</head>

Now when you add an image to blogger,use the class magnify..



ie.. use something like

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju7hzL55IaCRVzeWJ_IXBnjWkazi5GC8XfhtQqjfoIjqrHVyG_qLbST9RW41Qp9oBb0_DqU1zWsXM6FTClcHa3hwXFZH1VR2Q-chtblbWF_fCdcdYbRO-tiWSardx2DqOSOoGYtr35j78/s400/aishwarya-rai-politician.jpg" class="magnify" magnifyby="5" style="width: 200px; height: 150px;" />

ie when you upload an image,goto the Edit Html mode and replace the style and class tags of the image with the portion marked in red..and then


The code that i used for this image is

<img class="magnify" magnifyby="3" style="width: 200px; height: 250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju7hzL55IaCRVzeWJ_IXBnjWkazi5GC8XfhtQqjfoIjqrHVyG_qLbST9RW41Qp9oBb0_DqU1zWsXM6FTClcHa3hwXFZH1VR2Q-chtblbWF_fCdcdYbRO-tiWSardx2DqOSOoGYtr35j78/s400/aishwarya-rai-politician.jpg" alt="" id="BLOGGER_PHOTO_ID_5361650096596248578" border="0" />

Changing s400 to s800 will get you a bigger image.. :)

Source: http://www.bloggerplugins.org/2009/07/jquery-image-magnifier-for-blogger.html