NOTICE

Adfly Links not working Find Direct Links HERE

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.





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 :)





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="http://3.bp.blogspot.com/_JUJEXEamsyU/Ss4HdULBaJI/AAAAAAAAApo/afAirasKRfk/s320/1s.jpg"/></a>




If you like the post please comment below : )

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

13 comments :

  1. the HTML wan put at where? i dont understand.

    ReplyDelete
  2. Re : @ Ck Leong

    Thanks for visiting Ck Leong .You want to know where to put HTML?

    You can use it in your post.Its simply a code like hyperlink.we can use it any where .Just try this code <a href="yourlink.com" class="preview"><img alt="gallery thumbnail" src="http://3.bp.blogspot.com/_JUJEXEamsyU/Ss4HdULBaJI/AAAAAAAAApo/afAirasKRfk/s320/1s.jpg"/></a>

    and reply :)

    ReplyDelete
  3. well its not working.

    Plzzzz check the class type again :-o

    ReplyDelete
  4. I am Really Happy for you @abcute .Thanks for commenting with positive result also :)

    ReplyDelete
  5. @grawpo Welcome to P n P .I am not able to understand your problem.Its very easy to apply.If you can show the page where you used it :)

    Thank you ...

    ReplyDelete
  6. Hello..
    can I publish back your article in my blog in my language then give credit to here?

    ReplyDelete
  7. You can publish this article.But please link to this post.

    And also send me link after your publish

    Thank you :)

    ReplyDelete
  8. Hi ,my image not preview but it show word "undefine"

    can you help me

    http://math-sci-dusit.blogspot.com

    THK

    ReplyDelete
  9. Hellow ...can you make a tooltip jquery that load flv?

    Sample site:
    http://videocopilot.net/tutorials/all/

    ReplyDelete
  10. Can you suggest me a method to show the original image of my image just over a particular image. e.g., www.chromasia.com/iblog Can i do it for my blog too?

    ReplyDelete

Feel free to leave comment if you like above widget, have any questions or just say Hi! :)