jquery - 完整响应式背景图片

Question

我尝试了解如何才能响应完整的背景图像。起初我使用 jQuery Anystretch。

代码。

functions.php

wp_register_script( 'jquery.anystretch', get_template_directory_uri() .'/js/jquery.anystretch.js', array( 'jquery'));
wp_enqueue_script( 'jquery.anystretch');

main.css

.imgheader { background: url("images/image.png")  height:450px; width:100%; background-repeat: no-repeat; background-size: cover; overflow: hidden; position: relative}

index.php

<figure class="container imgheader"> </figure>

header.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<?php wp_enqueue_script('jquery'); ?> 
<script type="text/javascript">
jQuery(document).ready(function($)
{
(function() 
{
$('.imgheader').anystretch("images/image.png");
})
});
</script>

另外，我尝试使用:

   $('figure.imgheader').anystretch("images/image.png");

来自文档:

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('.imgheader').anystretch("images/image.png", {speed: 150});
});
</script>

第三次编辑:

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('figure.imgheader').anystretch("images/image.png", {speed: 150});
});
</script>

第四次更新:问题与 jquery-backstretch 相同。我正在加载完整背景图像和容器内图像的插件，但不起作用。在 Firebugs 的帮助下，我看到 js 正在页面中加载。我又看了几个小时，然后我回来了。

但问题是一样的，脚本无法加载。我做错了什么？

提前致谢。

Answer 1

有几件事，不需要将 jquery 排入队列，它与 WordPress 核心捆绑在一起，如果正确设置 JavaScript，所有文件都将可用它。在您的functions.php中，确保将其包装在添加操作调用中，如下所示:

add_action('wp_enqueue_scripts','my_scripts_function');
function my_scripts_function() {
    wp_register_script( 'jquery.anystretch.js', get_template_directory_uri() .'/js/jquery.anystretch.js'); // you don't need the third parameter here
    wp_enqueue_script( 'jquery.anystretch.js');
}

理想情况下，您只需将自己的另一个 javascript 文件放入队列，而不是放入 header.php，但有时这样做会起作用。您的问题是附加的 function() 包装，我认为没有任何必要。

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.imgheader').anystretch("images/image.png");
});
</script>

如果这不起作用，请确认 jquery 和 anystretch 正在您尝试运行它们的页面上加载。