在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主题中添加花式框

回答

相关问题