我希望在这里http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm将缩放功能添加到类似于演示 1 的 fancybox
fancybox 中可用的按钮助手是不够的，因为放大按钮只能达到图像的最大尺寸。
尽管我已经对其进行了硬编码，但fancybox-manual-b如果我让它工作，我将动态地这样做。
首先，我尝试为出现在 fancybox 中的每个图像添加一个 id 并将其添加到其中，jQuery(‘#Pic_1, #Pic_2, #Pic_3, #Pic_4’).addpowerzoom但我认为这不起作用，因为鼠标悬停动作已经被 fancybox 占据，因此发生冲突。
理想情况下，这就是我想要实现的方式，但还没有让它工作
所以现在我试图将图像参考传递到 iframe
单击“Zoom in 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 建议之后更新代码
我整天都在玩这个并且正在努力让它工作
<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>