JQuery парения эффект изображения

Question

это мой JQuery код

this.imagePreview = function(){ 

    xOffset = 8; 
    yOffset = 20; 

    $("a.preview").hover(function(e){ 
     this.t = this.title; 
     this.title = "";  
     var c = (this.t != "") ? "<br/>" + this.t : ""; 
     $("body").append(
      "<p id='preview'><img src='" 
      + this.href 
      + "' alt='Image preview' />" 
      + c 
      + "</p>" 
     );        
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px") 
      .fadeIn("fast");       
    }, 
    function(){ 
     this.title = this.t;  
     $("#preview").remove(); 
    }); 
    $("a.preview").mousemove(function(e){ 
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px"); 
    });   
}; 

// starting the script on page load 
$(document).ready(function(){ 
    imagePreview(); 
}); 

это HTML код

<a href="1.png" target="_blank" class="preview"><img src="1s.png"></a> 

это CSS код

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

все это в этой скрипкой http://jsfiddle.net/56wk9/ (хотя я не смог найти изображения, чтобы поместиться в этой скрипке этот код работает отлично)

что делает этот код, он отображает 1.png изображения при наведении курсора мыши на другое изображение 1s.png

, но поскольку этот код использовать изображение, которое будет отображаться в качестве

<a href="1.png" target="_blank" class="preview"> 

при нажатии на базовое изображение открывается это увеличенное изображение в новом окне .. что вместо этого я хочу, чтобы другой веб-сайт открывался не таким увеличенным изображением. Когда я помещаю ссылку на веб-страницу, она не показывает эффект зависания.

вся помощь является золотой.

Answer 1

Используйте данные в своей ссылке вместо href.

Например

<a href=""http://www.somesite.com data="image-1s.png"><img ...></a> 

Затем, вместо того, чтобы использовать this.href использовать данные

$("body").append("<p id='preview'><img src='"+ $(this).attr('data') +"' alt='Image preview' /> 

Here's the updated fiddle

HTML

<a href="http://www.google.com" target="_blank" class="preview" data="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg"></a> 

Javascript

this.imagePreview = function(){ 

     xOffset = 8; 
     yOffset = 20; 

    $("a.preview").hover(function(e){ 
     this.t = this.title; 
     this.title = "";  
     var c = (this.t != "") ? "<br/>" + this.t : ""; 
     $("body").append("<p id='preview'><img src='"+ $(this).attr('data') +"' alt='Image preview' />"+ c +"</p>");         
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px") 
      .fadeIn("fast");       
    }, 
    function(){ 
     this.title = this.t;  
     $("#preview").remove(); 
    }); 
    $("a.preview").mousemove(function(e){ 
     $("#preview") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px"); 
    });   
}; 


// starting the script on page load 
$(document).ready(function(){ 
    imagePreview(); 
}); 

CSS

#preview{ 
    position:absolute; 
    background:#333; 
    padding:5px; 
    display:none; 
    color:#fff; 
    /*box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);*/ 
}