jquery - How to make link to zoom a pic -

jquery - How to make link to zoom a pic -

i have great script works well.

when click image, zoom function works.

but need create separate link zoom.

any suggestions.

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"); homecoming 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"); homecoming 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 photograph of louis 2 loving sisters in 1969.</div> </div> </div> <div id="large1"></div> <div id="background1"></div>

try (this pattern)

$(function () { $("img") .on("click", function (e) { var info = ["<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"); homecoming 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>"); // 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/

jquery image zoom