jQuery Image Magnifier Blogger

C'mon who doesnt Love jQuery effects? yeah its a very easy trick on blogger too. Get ready to rumble with this new hack provided by dynamicdrive.com


As usual login into your Blogger Dashboard > Layout > Edit HTML and check the "Expand Widget Templates" option.

Important Step: Now as a precautionary measure please download your template so that you have an emergency backup if in case you create any errors :)

First locate this code in your blogger template.

<head/>

And replace it with the following code

<head/>
<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>

now search for ]]></b:skin> and replace it with the code below.

dsettings: {
magnifyby: 3, //default increase factor of enlarged image
duration: 500, //default duration of animation, in millisec
mgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(url_of_the_cursor_file), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
]]></b:skin>

You will need Two JavaScript files to make this tweak work for blogger zoom for images. One script used in image magnification and the other one for the cursor to be used on image hover.

Please download these two files and upload into your own server and copy the url because you maynot want to face server overload problems. OS i advice you to do that :)

Now replace the two files by:

url_of_jquery_script and url_of_the_cursor_file


That's all.. now you can save your template. But remember that each time you want to add this zoom to your images you will have to add a " class " in your blog post before publishing it.

BEFORE you used to use this code -

<img style="width: 501px; height: 250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4bO7xCcZAh6qTocj5oCwNYes5wMfKJiF-ASxJ-sQBuuuvOqz1S2tV8fwCO2Z4vcPeS3jCBqo3M3mW0A5P4iYy-0VB3MzyQ9pF15ErVgHf_5ZAzGHK2nHorwbBJPGBt5frfqHFvevkF-B/ List of Power Tweeting Tools.png" alt="jQuery Image Magnifier Blogger" id="BLOGGER_PHOTO_ID_5361650096596248578" border="0" />

Now you will have to add class="magnify" magnifyby="3" please compare both the codes to understand what i mean to say.

<img class="magnify" magnifyby="3" style="width: 501px; height: 250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4bO7xCcZAh6qTocj5oCwNYes5wMfKJiF-ASxJ-sQBuuuvOqz1S2tV8fwCO2Z4vcPeS3jCBqo3M3mW0A5P4iYy-0VB3MzyQ9pF15ErVgHf_5ZAzGHK2nHorwbBJPGBt5frfqHFvevkF-B/ List of Power Tweeting Tools.png" alt="jQuery Image Magnifier Blogger" id="BLOGGER_PHOTO_ID_5361650096596248578" border="0" />

PS: I'm really sorry I am using a different hack on my blog so i cannot show you the live demo. But I advice you to try this in your test blog :) Any problem installing this? feel free t drop a comment and I will be helping you ASAP

You can also get a free subscription to Chethstudios updates. We will be back with more useful content. Get latest hacks and updates on your email