preview.js 1.1 KB

123456789101112131415161718192021222324252627282930313233343536
  1. /* Image preview script
  2. * powered by jQuery (http://www.jquery.com)
  3. * written by Alen Grakalic (http://cssglobe.com)
  4. * for more info visit
  5. * http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
  6. */
  7. this.imagePreview = function(){
  8. // you might want to adjust to get the right result
  9. horOffset = -100;
  10. verOffset = 0;
  11. /* END CONFIG */
  12. $("a.preview").hover(function(e){
  13. this.t = this.title;
  14. this.title = "";
  15. var c = (this.t != "") ? "<br/>" + this.t : "";
  16. $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
  17. $("#preview")
  18. .css("top",(e.pageY - verOffset) + "px")
  19. .css("left",(e.pageX + horOffset) + "px")
  20. .fadeIn("fast");
  21. },
  22. function(){
  23. this.title = this.t;
  24. $("#preview").remove();
  25. });
  26. $("a.preview").mousemove(function(e){
  27. $("#preview")
  28. .css("top",(e.pageY - verOffset) + "px")
  29. .css("left",(e.pageX + horOffset) + "px");
  30. });
  31. };
  32. // starting the script on page load
  33. $(document).ready(function(){
  34. imagePreview();
  35. });