缩放图像脚本不起作用答案

【问题标题】：Zoom image script not working缩放图像脚本不起作用
【发布时间】：2011-12-08 10:12:01
【问题描述】：

我正在尝试让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。

【问题讨论】：

标签： javascript zooming

【解决方案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 文件丢失。确保您也上传它。

【讨论】：