如何使用WP内置的Thickbox进行图像处理?

时间:2011-08-06 作者:Jeremy Jared

我一直在寻找一种更好的方法来利用内置的Thickbox功能处理图像。我已经使用我的方法几个月了,但我认为这不是最好的方法。以下是我一直在使用的代码(我不记得在哪里找到代码或链接到文章):

<?php
if (!is_admin()){
/*
add a word found in your domain name
*/
$mydomain = ".com";
/*
The css selector
.entry-content a img 
*/
$myselector = "p a img";
wp_enqueue_style(\'thickbox\'); //include thickbox .css
wp_enqueue_script(\'jquery\');  //include jQuery
wp_enqueue_script(\'thickbox\'); //include Thickbox jQuery plugin
    // Function that will write js
    function thickbox_js(){
        global $mydomain, $myselector;
        ?>
        <script type=\'text/javascript\'>
         var tb_closeImage = "<?php bloginfo(\'wpurl\'); ?>/wp-includes/js/thickbox/tb-close.png";
         var tb_pathToImage = "<?php bloginfo(\'wpurl\'); ?>/wp-includes/js/thickbox/loadingAnimation.gif";
         jQuery(document).ready(function() {
             jQuery("<?php echo $myselector; ?>").parent("a[href*=<?php echo $mydomain; ?>]").addClass("thickbox");
         });
        </script>
    <?php
    }
add_action(\'wp_footer\', \'thickbox_js\'); // use wp_footer hook to write our generated javascript into page footer.
}
?>
如有任何建议,将不胜感激。我尝试了教程中列出的几种不同的方法,但都没有奏效。谢谢

To be more specific, this is the part in question:

<?php bloginfo(\'wpurl\'); ?>

What I\'m using now:

<?php
    function add_themescript(){
     if(!is_admin()){
     wp_enqueue_script(\'thickbox\',null,array(\'jquery\'));
     wp_enqueue_style(\'thickbox.css\', \'/\'.WPINC.\'/js/thickbox/thickbox.css\', null, \'1.0\');
     }
}
 add_action(\'init\',\'add_themescript\');

define("IMAGE_FILETYPE", "(bmp|gif|jpeg|jpg|png)", true);
function wp_thickbox($string) {
$pattern = \'/(<a(.*?)href="([^"]*.)\'.IMAGE_FILETYPE.\'"(.*?)><img)/ie\';
$replacement = \'stripslashes(strstr("\\2\\5","rel=") ? "\\1" : "<a\\2href=\\"\\3\\4\\"\\5 class=\\"thickbox\\"><img")\';
  return preg_replace($pattern, $replacement, $string);
}

function wp_thickbox_rel( $attachment_link ) {
$attachment_link = str_replace( \'a href\' , \'a rel="thickbox-gallery" class="thickbox" href\' , $attachment_link );
  return $attachment_link;
}
add_filter(\'the_content\', \'wp_thickbox\');
add_filter(\'wp_get_attachment_link\' , \'wp_thickbox_rel\');
?>
我认为这样会好一点,但我仍然不确定这是不是最佳的方式。接下来,我需要学习如何向ThickBox弹出图像添加导航。

2 个回复
最合适的回答,由SO网友:zac 整理而成

如果您尝试将其添加到函数中会怎么样。php

function tb(){
    wp_enqueue_script(\'thickbox\',null,array(\'jquery\'));
    wp_enqueue_style(\'thickbox.css\', \'/\'.WPINC.\'/js/thickbox/thickbox.css\', null, \'1.0\');
}
add_action(\'wp_enqueue_scripts\',\'tb\');
并保留您的jQuery(不确定您需要这些php变量做什么):

 jQuery(document).ready(function() {
             jQuery("img").parent("a").addClass("thickbox");
         });

SO网友:Tom Auger

上述公认的答案有点过时,从那时起,在默认WordPress网站上添加Thickbox图库就变得容易多了

1: 将thickbox JS和CSS排队现在可以使用内置的WordPress默认句柄轻松完成:

add_action( \'wp_enqueue_scripts\', \'wpse25112_scripts\' );
function wpse25112_scripts(){
  // enqueue the thickbox scripts and styles
  wp_enqueue_script( \'thickbox\' );
  wp_enqueue_style( \'thickbox\' );

  // enqueue your own JavaScript
  wp_enqueue_script( \'my-thickbox-script\', \'path/to/my-thickbox-script.js\', array( \'jquery\', \'thickbox\' ), \'1.0.0\' );
}
激活WordPress Gallery图像上的Thickbox这可以在自定义JavaScript文件中使用一点jQuery来完成,我们在上面的代码中加入了该文件:

;jQuery(function($){
    $(".gallery a").addClass("thickbox");
});
这确保了我们只将Thickbox功能添加到WordPress gallery图像中(不是每个img 包装在a 根据其他示例进行标记)。

3: 创建您的多媒体资料

这是通过任何帖子或页面上的WordPress添加媒体按钮完成的。只需查找“Gallery”选项卡。Important: 确保选择“链接到媒体文件”而不是“链接到附件”,以便在Thickbox模式中正确弹出图像(否则会弹出网页副本!)。

4: 奖金!确保你只在页面上有WordPress图库的时候才把这些东西排队这是有趣的部分。当你不需要的时候,为什么要把16K的脚本和CSS(好吧,这真的不是很多,但仍然如此)排在队列中?我们来看看[gallery] 在我们实际排队之前,在内容中的某个地方进行快捷编码。。。

修改上述排队功能如下:

function wpse25112_scripts(){
    /** @var WP_Post $post */
    $post = get_post();

    // Short circuit if something goes wrong
    if ( ! is_a( $post, \'WP_Post\' ) ){
        return;
    }

    // Does this Post have the default WordPress [gallery] shortcode?
    if ( preg_match( "/\\[\\s*gallery(?:\\s|\\])/i", $post->post_content ) ){
        // enqueue the thickbox scripts and styles
        wp_enqueue_script( \'thickbox\' );
        wp_enqueue_style( \'thickbox\' );

        // enqueue your own JavaScript
        wp_enqueue_script( \'my-thickbox-script\', \'path/to/my-thickbox-script.js\', array( \'jquery\', \'thickbox\' ), \'1.0.0\' );
    }
}

结束

相关推荐

在管理员模式下不能使用JavaScript

当我登录到我的站点的管理部分时,似乎所有javascript都不起作用。我不能做任何需要javascript或AJAX的事情:Nextgen缩略图、小部件组织,甚至管理菜单都不起作用。站点前端的javascript正常工作。我在firebug中查找脚本,发现了以下内容(显然是在页脚中加载的):<script src=\"http://kainielsen.web44.net/wp-admin/load-scripts.php?c=1&load=jquery-ui-core,jquery-ui