Таким образом, я некоторое время играю с этим, но не могу получить событие привязанного щелчка, чтобы запустить его из элемента jqzoomed.
HTML:
<div class="product-clicktozoom-image">
<div class="product-clicktozoom-image-main">
<a href="http://example.com/image.jpg" class="jqzoom" title="Image" rel="gall"><img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/></a>
</div>
</div>
JS:
jQuery(document).load(function() {
jQuery('#mainimage').bind('click',function(){
var fancyImage = jQuery('#mainimage').attr('src');
jQuery.fancybox.open(fancyImage);
});
});
jqzoom создает пару дополнительных div, поэтому окончательная структура страницы выглядит так:
<div class="product-clicktozoom-image-main">
<a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;">
<div class="zoomPad">
<img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;">
<div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"></div>
<div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;">
<div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;">
<div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div>
<div class="zoomWrapperImage" style="width: 100%; height: 355px;">
<img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;">
</div>
</div>
</div>
<div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;">Loading zoom</div>
</div>
</a>
</div>
Я попытался привязать событие click к #mainimage вместе с классом zoomPad, а также img в элементе zoomWrapperImage, поскольку это выглядит как верхний элемент при наведении на изображение.
Все, что я хочу сделать, это открыть полное изображение в fancybox, если они нажмут на зум (в настоящее время масштабирование происходит при наведении курсора мыши). Я знаю fancybox.open(fancyImage); работает, я могу запустить код в функции щелчка непосредственно в консоли успешно, я просто не могу заставить его запускать из самого события клика.
Помогите!
Это оказалось довольно простым в конце, событие click необходимо связать на.zoomPad, и я использовал window.load вместо (document).ready, поскольку это гарантирует, что все элементы загружены.
Финал JS:
jQuery(window).load(function() {
jQuery('.zoomPad').bind('click',function(){
var fancyImage = jQuery('.zoomWrapperImage img').attr('src');
jQuery.fancybox.open([{href : fancyImage}], {closeClick : true});
});
});