Добавление возможности масштабирования в Fancybox
Я хочу добавить возможность масштабирования в fancybox, похожую на демонстрацию 1, здесь http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm
Помощник кнопки, доступный в fancybox, не подходит, так как кнопка увеличения идет только до максимального размера изображения.
Хотя я жестко закодировал это fancybox-manual-b если я получу это, я буду делать это динамически.
Сначала я попытался добавить идентификатор для каждого изображения, которое появляется в fancybox, и добавить их в jQuery(‘#Pic_1, #Pic_2, #Pic_3, #Pic_4’).addpowerzoom но это не сработало, я думаю, потому что действие при наведении мышки уже занято fancybox, поэтому конфликтует.
В идеале это то, как я хотел бы реализовать это, но не получил его работать
Так что теперь я пытаюсь передать ссылку на изображение в 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
я играю с этим весь день и изо всех сил пытаюсь заставить его работать
<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>