將點擊事件綁定到jqzoom以啓動fancybox

所以我一直在玩這個遊戲一段時間，但無法從綁定的點擊事件中觸發jqzoomed元素。將點擊事件綁定到jqzoom以啓動fancybox

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>

我有tr ied將click事件綁定到#mainimage，以及zoomPad類和zoomWrapperImage元素中的img，因爲當您將鼠標懸停在圖像上時，這看起來是最重要的元素。

我想要做的就是打開fancybox中的完整圖像，如果他們點擊縮放（當前zoomover發生在鼠標懸停）。我知道fancybox.open（fancyImage）;工作，我可以直接在控制檯中直接在點擊功能中運行代碼，我無法從點擊事件本身觸發它。

幫助！

來源

2013-09-23 fracture

你可能有，如果你想在這方面幫助，很插件特定的，問題創造的jsfiddle。 [這是一個預裝配fancybox和jqzoom的小提琴]（http://jsfiddle.net/TBfZ4/）讓你開始。如你所願自定義和'更新'，然後編輯你的問題，併發布其他人的網址。請注意外部資源手風琴 - 這是您爲其他js指定CDN的地方（注意：不是http：） – gibberish

事實證明，這是最終很簡單，單擊事件需要對.zoomPad結合，我在的地方（文件）使用window.load。就緒爲確保所有的元素都被加載。

最後JS：

jQuery(window).load(function() { 
    jQuery('.zoomPad').bind('click',function(){ 
      var fancyImage = jQuery('.zoomWrapperImage img').attr('src');  
      jQuery.fancybox.open([{href : fancyImage}], {closeClick : true}); 
    }); 
});

來源

2013-09-24 10:23:44 fracture

將點擊事件綁定到jqzoom以啓動fancybox

回答

相關問題