Add image magnifier To Images in Blogger Post

Add image magnifier in Blogger/Blogspot using jquery. If your blog has too much images in it, you can use this widget as this widget will helps you to arrange your images. If your blog posts width is less then you have a problem in posting large images. By using this code, the larger images appear to be small and when you click on that image it pop out and original image will apear on the screen

Image Magnifier Demo



Live Demo



How To Put image magnifier in Blogger/Blogspot

  • Go to Blogger Dashboard 
  • Click on DropDown Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML --> Proceed --> Expand Widget Templates
  • Press Ctrl + F and search the code shown below

</head>

  • Now Paste the Code shown below just before/above it

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://latesthack.googlecode.com/svn/mywidgets/magnifire/magnifier.js"> </script>

Now HTML Part

  • Use the code shown below in your post to add this effect

<img class="magnify" style="width: 210px; height: 250px;" src="YOUR IMAGE URL" />

Like it? Share it.

No Comments

Click to Add a New Comment

  • If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
  • Do NOT add links to the body of your comment as they will not be published.
  • Only the comments posted in ENGLISH will be approved.
  • If you have a problem check first the comments , maybe you will find the solution there.

Subscribe to: Post Comments ( Atom )