ここのデモ 1 に似たファンシーボックスにズーム機能を追加したいと思いますhttp://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm
拡大ボタンは画像の最大サイズまでしか移動しないため、fancybox で利用可能なボタン ヘルパーは適切ではありません。
これが機能する場合はハードコーディングしましたfancybox-manual-bが、これを動的に実行します。
最初に、ファンシーボックスに表示される各画像にIDを追加して追加しようとしましたjQuery(‘#Pic_1, #Pic_2, #Pic_3, #Pic_4’).addpowerzoomが、マウスのホバーアクションがファンシーボックスによって既に占有されているため、競合していると思います。
理想的には、これは私がこれを実装したい方法ですが、機能していません
だから今、私は画像参照をiframeに渡そうとしています
「Fancybox でズーム」をクリックすると、新しい空白のタブが開き、Fancybox が親で開きますが、Hello Holly だけの画像はありません。
問題を複雑にするために、WordPress 内で使用されている jquery バージョン 1.4.4 を使用してこれを機能させる必要があります。
私が間違っていることを提案してください
親 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>