Question

我正在努力让this脚本正常工作，但遇到了一些麻烦。

这是我的website。

我按照脚本网站上的说明进行了操作：

将脚本的引用添加到head。
在头部引用脚本后立即添加<script type="text/javascript">$(window).load(function() {$('body').nivoZoom(); });</script>。我应该在其他地方调用该功能吗？
将较小的图片包含在<a>个标记内，并添加了nivoZoom的类。图像的所有链接都在工作。

我网站的问题是脚本无效。相反，如果点击较小的图像，它只会导致较大的图像地址，并且不会像预期的那样进行缩放。

更新

这是我的整个<head>，~~我没看到第二次加载jQuery的位置~~ ~~好的，我看到它加载但是我找不到代码是~~：

<head>

<script type="text/javascript" src='/wp-content/themes/thefalltheme/js/example.js'></script>

<link rel="stylesheet" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/js/nivo-zoom.css" type="text/css" media="screen" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.2.1'></script>
<script src="/wp-content/themes/thefalltheme/js/jquery.nivo.zoom.pack.js"></script>

<script type="text/javascript">
$(window).load(function() {
$('body').nivoZoom();
});
</script>

<meta charset="<?php bloginfo('charset'); ?>" />

<?php if (is_search()) { ?>
   <meta name="robots" content="noindex, nofollow" /> 
<?php } ?>

<title>
       <?php
          if (function_exists('is_tag') && is_tag()) {
             single_tag_title("Tag Archive for &quot;"); echo '&quot; - '; }
          elseif (is_archive()) {
             wp_title(''); echo ' Archive - '; }
          elseif (is_search()) {
             echo 'Search for &quot;'.wp_specialchars($s).'&quot; - '; }
          elseif (!(is_404()) && (is_single()) || (is_page())) {
             wp_title(''); echo ' - '; }
          elseif (is_404()) {
             echo 'Not Found - '; }
          if (is_home()) {
             bloginfo('name'); echo ' - '; bloginfo('description'); }
          else {
              bloginfo('name'); }
          if ($paged>1) {
             echo ' - page '. $paged; }
       ?>
</title>

<link rel="shortcut icon" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/images/favicon.png?force=1">
<!-- <link rel="shortcut icon" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/images/favicon_blue.png?force=1"> 
<link rel="shortcut icon" href="http://india.thefalljourney.com/wp-content/themes/thefalltheme/images/favicon_flag_india.png?force=1"> -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

<?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>

<?php wp_head(); ?>
</head>

更新2：

找到了额外的加载，它位于functions.php。

Answer 1

在页面顶部，加载jQuery + nivoZoom：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="/wp-content/themes/thefalltheme/js/jquery.nivo.zoom.pack.js" type="text/javascript"></script>

下面几行，你再次加载jQuery，导致以前对jQuery框架的扩展被撤消：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.2.1'></script>

你应该在加载jQuery后包含nivo缩放脚本：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.2.1'></script>
<script src="/wp-content/themes/thefalltheme/js/jquery.nivo.zoom.pack.js"></script>

另一个注意事项：您的CSS文件丢失了。确保您也上传它。

缩放图像脚本不起作用

1 个答案: