Question

我是制作自己的WP主题的新手。现在我正试图弄清楚如何为它添加灯箱类型功能。我广泛搜索了这个主题，我能找到的唯一体面的教程是：http://code.tutsplus.com/tutorials/add-a-responsive-lightbox-to-your-wordpress-theme--wp-28100

它使用FancyBox。我一遍又一遍地试着按照说明 - 没用。我没有在我的图像上获得FancyBox功能 - 如果我点击图像，它只会打开完整图像的路径，而不是灯箱。

无法弄清楚我做错了什么。在谈到正确的事情时，我远离专家。

如果有更好的方法，或者Lightbox被认为比Fancybox更好 - 我会接受各种建议和指示。

这是我的测试页 - http://www.aspenwebsites.com/lothlorien/gallery/

基本上，我创建了一个＆＃39;灯箱＆＃39;我主题中的文件夹＆＃39; inc＆＃39;文件夹并转储我从Fancybox Github下载的所有源文件。

根据教程，我创建了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，但教程如上所示。

就查询本身而言 - 我假设这是以我用作基础的二十四个主题来完成的，但说实话，我不确定如何验证这一点。

Answer 1

正如我们在对话中发现的那样，删除wp_enqueue_scripts调用中的最后一个值（false，true）就可以了。

为WP主题添加精美的盒子

1 个答案: