如何使链接放大图片

Question

我目前有一个很好的脚本，效果很好。

当我点击图像时，缩放功能起作用。

但我需要创建一个单独的链接来缩放。

有任何建议。

jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    this.css("top", ($(window).height() - this.height())/2+$(window).scrollTop() + "px"); 
    this.css("left", ($(window).width() - this.width())/2+$(window).scrollLeft() + "px"); 
    return this; 
} 

$(document).ready(function() {  
    $("#profile_pict_lifesign img").click(function(e){ 

     $("#background1").css({"opacity" : "0.7"}) 
         .fadeIn("slow");    

     $("#large1").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"") 
        .center() 
        .fadeIn("slow");   

     return false; 
    }); 

    $(document).keypress(function(e){ 
     if(e.keyCode==27){ 
      $("#background1").fadeOut("slow"); 
      $("#large1").fadeOut("slow"); 
     } 
    }); 

    $("#background1").click(function(){ 
     $("#background1").fadeOut("slow"); 
     $("#large1").fadeOut("slow"); 
    }); 

    $("#large1").click(function(){ 
     $("#background1").fadeOut("slow"); 
     $("#large1").fadeOut("slow"); 
    }); 

}); 




<div id="profile_pict_lifesign"><img src="pic_memory.jpg" alt="" rel=""><a href="pic_memory.jpg">zoom</a> 


        <div id="profile_specs_wrap"> 
          <div id="profile_specs_1">LIFESIGN #203</div> 
          <div id="profile_specs_2">Louis Tharp</div> 
          <div id="profile_specs_3">Born:&nbsp;&nbsp;September 20, 1964</div> 
          <div id="profile_specs_4">Home City & State:&nbsp;&nbsp;Indianapolis, Indiana</div> 
          <div id="profile_specs_5">Homeless Status:&nbsp;&nbsp;"Still Homeless"</div> 
          <div id="profile_specs_6">Homeless Timer:&nbsp;&nbsp;4 Years, 3 Months, & 4 Days</div> 
        </div> 

        <div id="profile_specs_wrap2"> 
        <div id="profile_specs_7">This is a photograph of Louis with his two loving sisters in 1969.</div> 

        </div> 

       </div> 


        <div id="large1"></div> 
        <div id="background1"></div>   

Answer 1

尝试（这种模式）

$(function() { 
    $("img") 
    .on("click", function (e) { 
     var data = ["<img class=zoom />"]; 
     $.when(data) 
     .done(function (data) { 
      var center = function() { 
       this.css("position", "absolute"); 
       this.css("top", ($(window).height() - this.height())/2 
         + $(window).scrollTop() + "px"); 
       this.css("left", ($(window).width() - this.width())/2 
         + $(window).scrollLeft() + "px"); 
       return this; 
      }; 
      if ($(data[0]).is(".zoom")) { 
       setTimeout(function() { 
        var z = window.open("", "z"); 
        z.center = center; 
        z.document.write(data[0]); 
        z.document.write("<style>" + $("style").text() + "</style>"); 
        z.document.write("<scr" 
        + "ipt>" 
        + "(function() { var script=document.createElement('script');" 
        + " script.src = 'http://code.jquery.com/jquery-1.11.1.min.js';" 
        + "var head = document.getElementsByTagName('head')[0];" 
        + "head.appendChild(script)})()</scr" 
        + "ipt>"); 
        // do stuff in new window 
        z.document.write("<scr" 
         + "ipt>(function()" 
         + "{ setTimeout(function() {" 
         + "if (window.jQuery) {" 
         + " jQuery.fn.center = window.center;" 
         + "jQuery('.zoom').center()}},50)}())</scr" 
         + "ipt>"); 
       }, 250); 
      }; 
     }); 
    }); 
}); 

的jsfiddle http://jsfiddle.net/guest271314/aBDRD/