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="http://4.bp.blogspot.com/_u4gySN2ZgqE/SmhoWwmO6AI/AAAAAAAAAiE/6_O2xE9vm_8/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="http://4.bp.blogspot.com/_u4gySN2ZgqE/SmhoWwmO6AI/AAAAAAAAAiE/6_O2xE9vm_8/s400/aishwarya-rai-politician.jpg" alt="" id="BLOGGER_PHOTO_ID_5361650096596248578" border="0" />
Changing s400 to s800 will get you a bigger image.. :)

43 comments :

  1. UPrintingJuly 24, 2009 at 9:52 AM

    Cool. Thanks for the code.
    I know there's another way of maximizing photos without clicking on it. I hope you can feature that one next time. :)

    ReplyDelete
  2. AmandaJuly 24, 2009 at 4:35 PM

    That's pretty cool :) I'm on a Mac, and while it DOES work in Safari, there's no indication to the user that it does. In Firefox it turns the cursor into a little magnifying glass, but the cursor remains the same in Safari. Just an FYI in case there's an easy fix :)

    ReplyDelete
  3. Daily PhonesJuly 24, 2009 at 4:44 PM

    Unfortunately Unable files to download

    ReplyDelete
  4. UnknownJuly 24, 2009 at 7:32 PM

    @Amanda will let you know if i find a fix..
    @Daily Phones check again.. :) its fixed..

    ReplyDelete
  5. UnknownJuly 24, 2009 at 11:45 PM

    @Amanda i think its fixed by now.. I have updated the post.. and tested it in IE,Chrome and Firefox.. the cursor is fine now..i don't have Safari and Opera.. So didn't test on them.. But they should work there too..

    ReplyDelete
  6. AmandaJuly 25, 2009 at 12:15 AM

    Yep! Fixed in Safari now! I don't have Opera, so can't test that for you, but otherwise looks great!

    ReplyDelete
  7. UnknownJuly 25, 2009 at 12:17 AM

    @Amanda thanks a lot for the concern..:)

    ReplyDelete
  8. AnonymousJuly 25, 2009 at 12:01 PM

    for me 'script that powers the magnification' link still broken

    ReplyDelete
  9. UnknownJuly 25, 2009 at 12:05 PM

    @jajQo updated it yet again.. copy the link and download it..

    ReplyDelete
  10. UnknownJuly 25, 2009 at 4:07 PM

    Nice Effect! THX ^^

    ReplyDelete
  11. BLOG DO TICHICOJuly 27, 2009 at 8:01 PM

    Tá Valendo, continue

    ReplyDelete
  12. dalethJuly 31, 2009 at 1:32 AM

    its very great

    ReplyDelete
  13. Link Blogger PemulaAugust 1, 2009 at 7:35 PM

    can you give us more complete step by step guideline.
    The last two description make us a little confuse

    Thanks

    ReplyDelete
  14. UnknownAugust 1, 2009 at 8:09 PM

    when you upload an image to blogger,you will get an html code which looks like
    <a href="a url" .....><img src="the image link" ...../></a>
    you have to change that to
    <img src="the image link" class="magnify"/>

    ReplyDelete
  15. Hetal Patil RawatAugust 3, 2009 at 4:35 PM

    Hello Aneesh,

    Sorry to bother you again. As i wanted to have download links for images, i had to opt out of light box image trick (though i personally liked it). I tried this trick, but it does not seem to work well. When i click on the image, the whole page of my blog is cluttered up with the image. Then after it is redirected to another page of image. There seems something to be wrong :( Please help me.

    Is there any other way for creating photo albums on blogger platform. Sometimes i need to post about 50 pictures at one go.

    Thanks in advance.

    ReplyDelete
  16. UnknownAugust 3, 2009 at 4:39 PM

    @Ms Hetal Patil lightbox shows the images in its full size.. So if you use it make sure that you crop big pictures into something smaller(which will fit into the browser window..)

    i don't know of any other good gallery plugin for now.. will let you know if i find any..:)

    ReplyDelete
  17. UnknownAugust 3, 2009 at 4:51 PM

    @Ms Hetal Patil sorry i thought you were talking of lightbox.. :)

    actually the light box code can be modified to include a download link..feel free to contact me if you need help with that..

    ReplyDelete
  18. Hetal Patil RawatAugust 3, 2009 at 10:29 PM

    Hello Aneesh,

    Sorry to confuse you.

    Let me clarify. I did not find download links in light box image, so i tried this magnifier trip. As i said i provide free downloadable wallpapers on blog.

    I would like to have modified code for light box image with download links. I really really liked it a lot and it worked fine too without much trouble :)

    Thanks for lending your helping hand towards me.

    ReplyDelete
  19. UnknownAugust 3, 2009 at 10:33 PM

    @Ms Hetal Patil
    i will try to work on it when i am free and will surely let you know..

    btw why don't you use a custom domain??

    ReplyDelete
  20. Palla SridharAugust 8, 2009 at 10:33 PM

    hye, once again you were superb with this trick. I was looking for this one for so many days. Also i tested this page in Opera and though the cursor isn't showing up, the zoom is working perfect. I implemented this on my blog Windows blog. I post using WLW, and all the images are thumbnail size. When i click on them , they still open as usual. No zoom. Initially they did, but they still open as previous. Can you find the problem? plz help.

    ReplyDelete
  21. UnknownAugust 8, 2009 at 10:54 PM

    @Ramarao
    sorry i wasn't able to figure it out..It might probably be conflicting with some other javascripts that you are using!! Try to figure out what change made it to not work!! :)

    ReplyDelete
  22. UnknownAugust 8, 2009 at 10:55 PM

    @@Ramarao By the way your template looks so messed up!! :)

    if u need some help with this you can contact me at the forums.. :)

    ReplyDelete
  23. Palla SridharAugust 8, 2009 at 11:42 PM

    hi aneesh,
    thanks for trying it out. I checked my code again, but i too couldn't find out. One thing i found is my images are in *.png or *.gif ! Will ur tip work for these image types?

    ReplyDelete
  24. palla sridharAugust 12, 2009 at 12:51 AM

    hi aneesh, once more i need help from you. I have thumb size images on my windows blog.Now when i click on it, it should magnify to its original size, how do i do it? Also i still couldnt figure out the error for my webpage where i implemented your code. Here is the page. windows blog

    ReplyDelete
  25. ebizarAugust 30, 2009 at 4:07 AM

    super

    ReplyDelete
  26. UnknownSeptember 1, 2009 at 9:37 AM

    I found this script on dynamic drive then found your blog. I finally got the script to work on both my web site and on the side bar of my blog. But I cannot seem to figure out why I cannot get the zoom curser to show up in Safari like you did and on IE. It shows up on my firefox only. Can you give me an idea what might be wrong? Or what part I am missing to get the curser to show the zoom image.? Thank you

    ReplyDelete
  27. Nathan DestroSeptember 1, 2009 at 9:37 PM

    Hello, I have added this code to by blogspot blog, and it works very well. At this moment I have a dilemma. You say that the image will zoom to its original size when clicked (as a response to a question of "clutter" above), but that does not seem to be the case. Instead, the image is consistently zooming to larger than I desire. This high level of zoom would be okay if I could get good quality, but a higher res file would create an even larger photo when zoomed if I understand correctly?

    I have tested with various formats of the same file, but they all zoom to the same size. I tried changing this by altering the "magnifyby" variable, but that did not seem to make a difference. Changing s400 to s800 did not give me a bigger image as you state above, but a higher resolution image at the same size.

    Large zooms would be okay if I had optimum quality. Ideally I would like to be able to control the amount of magnification no matter what the file size/resolution. Is this possible? From my playing with the code it seems that the original javascript file it is accessing perhaps controls the zoom to some extent?

    Hopefully I have conveyed my concerns in an efficient manner. Please respond!

    ReplyDelete
  28. UnknownSeptember 1, 2009 at 10:15 PM

    yes it will zoom to sizes greater than the actual image size, you might probably want to use lytebox instead of this one

    See the discussion at the forums http://forums.bloggerplugins.org/topic/lightbox-plugin

    ReplyDelete
  29. Nathan DestroSeptember 9, 2009 at 3:13 AM

    Now I am having troubles with Lytebox. Sorry I have posted these new issues to this thread, but I for some reason cannot login. I believe I have successfully added the code to my html code for the Minima template, but am finding troubles in the implementation of the code in individual posts. I want to display an image as it would usually be displayed if using the traditional uploader, but would come up in the fancy Lytebox window when clicked. Any suggestions?

    ReplyDelete
  30. UnknownSeptember 9, 2009 at 6:33 AM

    @Nathan Destro,
    you can recover the forum password from here

    and lytebox is intended to work on click..

    Did you add the necessary javascript and css?

    ReplyDelete
  31. vasiauviOctober 22, 2009 at 1:33 AM

    Hello!
    This is a great script and I also have put it on my blog!
    I've observed today that this script is not working anymore, and also on your site!
    Do you have any idea about this?
    Thanks!

    ReplyDelete
  32. UnknownOctober 22, 2009 at 2:37 AM

    @VasiaUVI ,
    the script doesnt have any probs.. its not working here because i changed my template recently and i am little lazy to make the changes to the template :)

    ReplyDelete
  33. vasiauviOctober 22, 2009 at 10:44 PM

    I understand, but I really don't know why is not working anymore on my site, although it worked! :(

    ReplyDelete
  34. HarisNovember 9, 2009 at 6:51 AM

    I fixed the cursor problem atleast works for me :)
    My page is like index.php and a folder "js" within the java script and the cursor . So before the fix the url cursor path was just "magnify.cur" after is "http://mydomain/js/magnify.cur" .I just added the full cursor path. Tested with IE 8 , Firefox 3.5 , Chrome 3.0 . Cheers ..

    ReplyDelete
  35. sonyApril 16, 2010 at 12:42 AM

    Really useful post guys

    ReplyDelete
  36. UnknownJune 19, 2010 at 7:44 PM

    What is the use of magnifier if only I can magnify the image but not the viewers of my blog?

    ReplyDelete
  37. topjerNovember 13, 2010 at 3:07 PM

    really beautiful!! the girl i mean :P

    ReplyDelete
  38. AbhishekNovember 22, 2010 at 1:27 AM

    @topjer: She is famous Indian actress: Aishwarya Rai. Here are more pictures for you: http://www.google.com/images?hl=en&q=Aishwarya+Rai&um=1&ie=UTF-8&source=univ&ei=jXnpTL65KpDevQOCq4nDCA&sa=X&oi=image_result_group&ct=title&resnum=6&ved=0CFsQsAQwBQ&biw=1280&bih=604

    ReplyDelete
  39. Admin@resensinemaDecember 17, 2010 at 9:43 PM

    THANX ANEESH
    IT WORKS,, COME SEE THE MAGNIFY WIDGET I APPLIED @ http://resensinema.blogspot.com/ for the latest movie review, trailer & showbiz info updates!

    ReplyDelete
  40. rdharmaFebruary 2, 2011 at 7:55 PM

    I gonna use this image zooming concept in my semester Website project. Thanks for sharing.

    ReplyDelete
  41. DaudaraMarch 9, 2011 at 1:54 PM

    It's working fine on my other blogger templates, but not in my current templates which has some js script. I'm using blogger template which i modified the main into tabbed version (with Abu Farhan script), adding some rainbow.js, jquery/1.3.2/jquery.min.js, stickytooltip.js, FancyZoom.js,FancyZoomHTML.js, jquery/1.4.4/jquery.min.js, stickynote.js, and some sticky note script. Already tried by removing FancyZoom but still not working.

    ReplyDelete
  42. nifanoke.blogspot.comMarch 21, 2011 at 5:38 PM

    Very good for my blog thanks

    ReplyDelete
  43. Top 1 Oli Sintetik Mobil-Motor IndonesiaAugust 4, 2011 at 5:50 AM

    where the live demo?

    ReplyDelete

Subscribe to: Post Comments ( Atom )