How to Auto Show Full Image or Original Image in Tooltip on Hover Its Thumbnail or Small Image Using jQuery In Blogger

Easy Image Preview with jQuery.This is a very Powerful and light jQuery widget .I really love this one Just see the Demo to see its working.By using this you can automatically view the original Image of a small thumbnail by simple hover over its thumbnail.

Demo

Installation:



Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

• 
  Download Scripts!

Java script

Step 1 : Login your BLOGGER account And click on Layout in the sub menu click EDIT HTML

Step 2: Now find ]]></b:skin>


Paste the below code Below ]]></b:skin> code

<script src='http://teckzest.bravehost.com/jquery.js' type='text/javascript'/><script src='http://teckzest.bravehost.com/main.js' type='text/javascript'/>

Step 3:

CSS

Now comes the CSS part

Find ]]></b:skin>


Paste below code ABOVE ]]></b:skin>

#preview{ position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; }

Step 4:

HTML

This HTML part will be used where you want to show Thumbnails / Images .Just use Below Format of code where you want to shoe Image on link hover

<a href="yourlink.com" class="preview"><img alt="gallery thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWQ5qbrVqbC-eZgIpz-2QAWMD1SDmuVi-QsP8UCvLpSEQn9GhKZT8Uf8fnLK3NQSfrJIC7iucziFVoOMpuJn2M2zP366WKoWgnLMna12cmtkFBU8oGre6QjZoJfGoOqjvHGJ10BC6Gok/s320/1s.jpg"/></a>

If you like the post please comment below : )

Credits : Author: Css Globe Distributed for Blogger Blogger Plug n Play