我希望将缩放功能添加到fancybox，类似于此处的演示1 http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm
fancybox中可用的按钮辅助功能不足，因为放大按钮仅达到图像的最大尺寸。
虽然我已经对这个fancybox-manual-b进行了硬编码，但如果我开始工作，我将动态地执行此操作。
首先，我尝试为fancybox中显示的每个图片添加一个id并将其添加到jQuery(‘#Pic_1, #Pic_2, #Pic_3, #Pic_4’).addpowerzoom，但这不起作用我认为因为鼠标悬停操作已被fancybox占用，因此存在冲突。
理想情况下，这就是我想要实现这个但是没有让它工作的方式
所以现在我试图将图片ref传递给iframe
点击“放大Fancybox”后，会打开一个新的空白标签，并在父级中打开fancybox，但不会只显示Hello Holly。
使用jquery 1.4.4版本需要使这项工作复杂化，因为这是在WordPress中使用的。
请建议我做错了什么
家长html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Add jQuery library -->
<script type='text/javascript' src='../js/jquery/jquery.js'></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.0.6" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<script type="text/javascript" src="../js/ddpowerzoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a').each(function(){
var Href = $(this).attr('href');
if ((Href.match(/jpg/i)) || (Href.match(/jpeg/i)))
{
$(this).attr('class', "fancybox");
}
else
{
alert ("jessica");
$(this).attr('target', 'blank');
}
});
$('a > img').each(function(){
if($(this).parent('td'))
{
if($(this).parents().attr('target') == 'blank')
{
alert("Hello Holly " + $(this).attr('target'));
$(this).removeAttr('target');
}
$(this).parent().attr('class', "fancybox-buttons");
$(this).parent().attr('data-fancybox-group', "gallery" );
}
});
$('.fancybox').fancybox();
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'hollyframe.html?1_b.jpg',
type : 'iframe',
padding : 5
});
});
});
</script>
</head>
<body>
<div>
<table>
<tr>
<td><a id="pic_1" href="1_b.jpg" title="Lorem ipsum dolor sit amet"><img src="1_s.jpg" alt="" /></a>
</td>
<td><a id="pic_2" href="2_b.jpg" title="Etiam quis mi eu elit temp"><img src="2_s.jpg" alt="" /></a>
</td>
</tr>
<tr>
<td><a id="pic_3" href="3_b.jpg" title="Cras neque mi, semper leon"><img src="3_s.jpg" alt="" /></a></td>
<td><a id="pic_4" href="4_b.jpg" title="Sed vel sapien vel sem uno"><img src="4_s.jpg" alt="" /></a></td>
</tr>
</table>
</div>
<div>
<h3>Etiam quis mi eu elit</h3>
<p>
Lorem ipsum dolor sit amet, <a href="http://localhost/dweb/2692.htm">www.fancyapps.com/fancybox/</a> consectetur adipiscing elit. Etiam <a id="pic_5" href="5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">Graphic A</a> quis mi eu elit tempor facilisis id et neque.
</p>
<p>
<a href="jessica-alba-102.JPEG" title="Jessica Alba">Graphic A</a>
</p>
<p>
<a id="fancybox-manual-b" href="javascript:;">Zoom in Fancybox</a>
</p>
</div>
</body>
</html>
hollyframe.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<script type="text/javascript">
var myPic;
function GetPic(){
var url= window.location.href;
var bits =url.split("?");
myPic = bits[1];
}
jQuery(document.createElement("img")).attr({src: myPic, id: 'Pic'});
jQuery('#Pic').addpowerzoom({ defaultpower: 2,
powerrange: [2,5],
largeimage: null,
magnifiersize: [100,100] //<--no comma following last option!
});
</script>
</head>
<body>
<p>Hello Holly</p>
</body>
</html>
更新JFK sugestions后的代码
我整天都在玩这个游戏并且正在努力让它运转起来
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#Pzoom').fancybox(
beforeShow: function(){
$('#fancybox-img').wrap(
$('<a />')
.attr('href', this.href) // this.href gets the "href" of the current image
.addClass('power-zoom')
.attr('rel', "position: 'inside'")
$(this.href).addpowerzoom({
defaultpower: 2,
powerrange: [2,5],
largeimage: null,
magnifiersize: [100,100] //<--no comma following last option!
});
); // wrap
};
);
}); // ready
</script>