Náhled obrázku při najetí

Ukázkové použití skriptu:

<script>
/*
 * Image preview script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */

this.imagePreview = function(){ 
 /* CONFIG */

 xOffset = 110;
 yOffset = 30;

 // these 2 variable determine popup's distance from the cursor
 // you might want to adjust to get the right result

 /* END CONFIG */
 jQuery("a.preview").hover(function(e){
 this.t = this.title; 
 this.title = ""; 
 var c = (this.t != "") ? "<br/>" + this.t : "";
 jQuery(".presspreviewappend").append("<p id='presspreview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>"); 
 jQuery("#presspreview")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px")
 .fadeIn("fast"); 
 },
 function(){
 this.title = this.t; 
 jQuery("#presspreview").remove();
 }); 
 jQuery("a.preview").mousemove(function(e){
 jQuery("#presspreview")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px");
 }); 
};
jQuery(document).ready(function(){
 imagePreview();
});
</script>
<style>
 .presspreviewappend {
 position:relative;
 }
 #presspreview{
 position:fixed;
 border:1px solid #333;
 background:#bbbbbb;
 display:none;
 color:#fff;
 }
</style>
<div class="presspreviewappend"></div>
<a href="big-image.jpg" class="link-image preview"><img src="small-image.jpg" alt="" title=""></a>

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *