在Wordpress中結合Swinxyzoom插件和Fancybox

我想要實現的是在響應式網站上的Fancybox lightbox中激活Swinxyzoom Wordpress插件（它使用jQuery來允許用戶放大圖像的一部分）。在Wordpress中結合Swinxyzoom插件和Fancybox

與Swinxyzoom插件作者聯繫取得後，他sugested如下：

要SwinxyZoom用燈箱集成，您需要創建在燈箱完成顯示被觸發一些自定義代碼其內容，例如。在fancybox這個事件是'onComplete'。

此時你需要用燈箱的內容圖像與一個錨標記針對大型全圖像，然後初始化 swinxyzoom爲$（元素）.swinxyzoom（）;

任何幫助將不勝感激！

上我已經既可單獨使用上述插件的網站的測試頁http://www.mcemcourses.org/radiology-test

來源

2013-05-07 Shaun

根據您所提供的信息，該代碼應該做的伎倆：

<script type='text/javascript'> 
jQuery.noConflict(); 
jQuery(document).ready(function ($) { 
    jQuery('a.myfancybox').fancybox({ 
     'zoomSpeedIn': 500, 
     'zoomSpeedOut': 500, 
     'overlayShow': true, 
     'overlayOpacity': 0.3, 
     'onComplete': function() { 
      $("#fancybox-img").wrap("<a class='myZoom' href='http://www.mcemcourses.org/wp-content/uploads/9-Orbital-floor-.jpg' />"); 
      $("a.myZoom").swinxyzoom({ 
       mode: 'lens' // or your preferred mode 
      }); 
     } 
    }); 
}); 
</script>

注意，你將需要3張圖片：

你的縮略圖，一個你點擊打開的fancybox。
一箇中等大小的圖像，您在打開fancybox的鏈接的href中定位的圖像，實際上，圖像在fancybox中打開。
一個大尺寸的圖像，您在onComplete回調中的環繞錨點的href中設置的圖像。

另請注意，選擇器#fancybox-img僅指v1.3.x fancybox中打開的圖像。

注意：最流行的fancybox WordPress插件使用v1.3.4。

見JSFIDDLE

來源

2013-05-07 19:05:34 JFK

謝謝你們的迴應。原諒我的無知，但我會將此JavaScript添加到mcemcourses.org/wp-content/plugins/nextgen-gallery-optimizer/fancybox/jquery.fancybox-1.3.4.js文件中的onComplete事件？ – Shaun 2013-05-08 12:30:57

@Shaun：你不需要混淆原來的fancybox js或css文件。您可以在您的頁面的「」部分中的現有自定義腳本（您在其中定義'.myfancybox'選擇器）中設置此項。 – JFK 2013-05-08 15:49:24

在Wordpress中結合Swinxyzoom插件和Fancybox

回答

相關問題