2012-09-16 165 views
0

我很難找到哪個jQuery插件或Wordpress中不允許使用fancybox加載iframe的其他內容。jQuery fancybox在較少的HTML頁面中加載iframe但在Wordpress中加載iframe

容易的fancybox剝去HTML作品及以下的工作版本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html><head> 

<!-- Add jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 

<link rel='stylesheet' id='easy-fancybox.css-css' href='http://www.wp-responsive-themes.com/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4' type='text/css' media='screen' /> 

<script type='text/javascript' src='http://www.wp-responsive-themes.com/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.4.pack.js?ver=1.3.4'></script> 
</head> 
<body> 
<a href="http://wp-responsive-themes.com/" data-fancybox-type="iframe" title="preview" class="preview fancybox-iframe">Preview</a> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
     $("a.preview").fancybox({ 
      'Width' :  960 , 
      'Height' :  640, 
      'hideOnContentClick': false, 
      'type':'iframe' 
     }); 
}); 

</script> 
</body> 
</html> 

但的fancybox無法在這個網頁(WordPress的)上加載的iframe。

iframe的應該打開的時候被點擊 下頁

http://www.wp-responsive-themes.com/2012/myapp-adaptive-wp-theme-for-app-developers-429/

「iPhone 5的垂直方向預覽」 需要幫助

親切的問候

+0

在同一頁面加載fancybox但不加載iframe – AnupRaj

回答

1

WordPress是安裝在jQuery的使用方式沒有衝突。這意味着$不是現成的。

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

jQuery(document).ready(function($) { 
     $("a.iphone4_vertical").fancybox({ 
      'Width' :  960 , 
      'Height' :  640, 
      'hideOnContentClick': false, 
      'type':'iframe' 
     }); 
}); 

添加$作爲函數參數應該解決您的問題。

+0

@AnupRaj:還要確保'width'和'height'沒有大寫字母(js參數區分大小寫) – JFK

相關問題