在WP主題中添加花式框

我對製作自己的WP主題相當陌生。現在我試圖找出如何添加一個燈箱類型的功能。我廣泛搜索了這個話題，我能找到的唯一體面的教程是：http://code.tutsplus.com/tutorials/add-a-responsive-lightbox-to-your-wordpress-theme--wp-28100 在WP主題中添加花式框

它使用FancyBox。我一遍又一遍地嘗試按照指示 - 沒用。雖然我沒有在我的圖像上獲得FancyBox功能 - 如果我點擊圖像，它只是打開完整圖像的路徑，而不是一個燈箱。

無法弄清楚我做錯了什麼。當談到保證一切正確時，我遠非專家。

如果有更好的方法去做，或者如果Lightbox被認爲比Fancybox更好 - 我願意接受各種建議和指導。

這裏是我的測試頁 - http://www.aspenwebsites.com/lothlorien/gallery/

基本上，我在主題的「INC」文件夾中創建一個「收藏夾」文件夾和傾銷那裏所有我從Github上的fancybox下載的源文件。

每教程然後創建lightbox.js文件，內容如下：

(function($) { 

// Initialize the Lightbox for any links with the 'fancybox' class 
$(".fancybox").fancybox(); 

// Initialize the Lightbox automatically for any links to images with extensions .jpg, .jpeg, .png or .gif 
$("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']").fancybox(); 

// Initialize the Lightbox and add rel="gallery" to all gallery images when the gallery is set up using [gallery link="file"] so that a Lightbox Gallery exists 
$(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").attr('rel','gallery').fancybox(); 

// Initalize the Lightbox for any links with the 'video' class and provide improved video embed support 
$(".video").fancybox({ 
    maxWidth  : 800, 
    maxHeight  : 600, 
    fitToView  : false, 
    width   : '70%', 
    height   : '70%', 
    autoSize  : false, 
    closeClick  : false, 
    openEffect  : 'none', 
    closeEffect  : 'none' 
}); 

})(jQuery);

然後在我的functions.php我說：

function m31_add_lightbox() { 
wp_enqueue_script('fancybox', get_template_directory_uri() . '/inc/lightbox/jquery.fancybox.pack.js', array('jquery'), false, true); 
wp_enqueue_script('lightbox', get_template_directory_uri() . '/inc/lightbox/lightbox.js', array('fancybox'), false, true); 
wp_enqueue_style('lightbox-style', get_template_directory_uri() . '/inc/lightbox/jquery.fancybox.css'); 
} 
add_action('wp_enqueue_scripts', 'm31_add_lightbox');

我使用的HTML標記是：

<a href="http://www.aspenwebsites.com/lothlorien/wp-content/uploads/2014/09/M31-Efremov-2.jpg"><img src="http://www.aspenwebsites.com/lothlorien/wp-content/uploads/2014/09/M31-Efremov-2.jpg"></a>

根據教程，它需要的一切。我以爲我會被要求添加一些類來觸發jQuery，但是這個教程就像上面顯示的一樣。

至於enqueing查詢本身 - 我假設這是由我用作基地的二十四個主題完成的，但說實話，我不確定如何驗證。

來源

2014-09-22 hanazair

那麼你可以在wordpress中添加一個插件https://wordpress.org/plugins/easy-fancybox/ 因爲你的頁面只有一個鏈接到圖像，沒有更多，你想如何工作？並告訴我們一些代碼，你正在嘗試做什麼:) – 2014-09-22 22:20:10

對不起...我認爲，因爲我對開了教程，鏈接到它將足以顯示代碼位......但我應該直接粘貼到我的問題。我剛剛編輯了問題並添加了代碼位。關於插件 - 我想學習如何自己做，所以試圖找出這一切。 – hanazair 2014-09-22 23:07:45

以及您的JavaScript沒有實際加載。雖然你的CSS文件。第一件事就是讓他們加載。 – manishie 2014-09-22 23:37:03

正如我們在對話中想到的那樣，刪除了wp_enqueue_scripts調用中的最後一個值（false，true）。

來源

2014-09-23 05:03:44 manishie

在WP主題中添加花式框

回答

相關問題