【发布时间】：2013-10-06 17:24:33
【问题描述】：
我不想在我的 wordpress 主题中包含这个脚本，让它根据当前窗口高度调整帖子中所有图像的大小：
https://github.com/gutierrezalex/photo-resize
我在我的文本编辑器中制作了一个基本的测试页面，它可以很好地调整图像的大小。但是，当我尝试在我的 wordpress 主题中应用/包含它时，我根本无法让它工作。
请，任何帮助将不胜感激！
这是我的头部标签之间的内容：
<head><!-- HEAD BEGINS -->
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta name="description" content="<?php bloginfo( 'description' ); ?>">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery-photo-resize.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("img").photoResize({
bottomSpacing: 15
});
});
</script>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic' rel='stylesheet' type='text/css'>
<?php wp_head(); ?>
</head><!-- HEAD ENDS -->
这是位于同一文件夹中的脚本（文件名：jquery-photo-resize.js）：
/// <reference path="jquery-1.5.1.min.js" />
/*
* Adjust photo on browser window resize
*
* @example: $('selector').photoResize();
*
* @example:
$('selector').photoResize({
bottomSpacing:"Bottom Spacing adjustment"
});
*/
(function ($) {
$.fn.photoResize = function (options) {
var element = $(this),
defaults = {
bottomSpacing: 10
};
$(element).load(function () {
updatePhotoHeight();
$(window).bind('resize', function () {
updatePhotoHeight();
});
});
options = $.extend(defaults, options);
function updatePhotoHeight() {
var o = options,
photoHeight = $(window).height();
$(element).attr('height', photoHeight - o.bottomSpacing);
}
};
}(jQuery));
我当前的functions.php：
<?php
add_theme_support( 'post-thumbnails' );
add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
return $html;
}
function register_my_menu() {
register_nav_menu('top-menu',__( 'Top Menu' ));
}
add_action( 'init', 'register_my_menu' );
function righter_filter_ptags($content) {
$content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
$content = preg_replace('/<p>\s*(<iframe .*>*.<\/iframe>)\s*<\/p>/iU', '\1', $content);
$content = preg_replace('/<p>\s*(<samp .*>*.<\/samp>)\s*<\/p>/iU', '\1', $content);
return $content;
}
add_filter('the_content', 'righter_filter_ptags');
【问题讨论】：
-
发布您迄今为止尝试过的内容非常重要，这样我们就可以找出您可能做错了什么或错过了什么。没有它，它只是异端。能发一下代码吗？
-
你是如何包含 js 文件的？一些代码plzz
-
@zillaofthegods 抱歉，我刚刚编辑了帖子并添加了代码！
-
@Vaibs_Cool 抱歉，刚刚用代码更新了帖子！
-
感谢您发布它，这应该会有所帮助。
标签： javascript jquery image wordpress resize