Question

我的代码需要认真的帮助。我对JavaScript很陌生，所以它可能非常简单。

我想使用名为ElevateZoom的Jquery插件。

我下载了插件，链接了jquery和elevatezoom文件（jquery工作正常）并复制了demo的代码。该演示工作正常，所以我没有得到的是完全相同的浏览器，但在我的页面上它不起作用。我一直在摸不着头三个小时，尝试了多种方法，比如在内部实现脚本，尝试不同版本的jquery，使用不同的图像等。我的HTML和JavaScript代码如下（注意我的第一个javascript块工作）：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="Jeff/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="Jeff/script.js"></script>
        <script src="Jeff/jquery.elevatezoom.js"></script>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <div class="test"></div>
        <div class="logo"></div>

        <nav>
            <div class="container">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                    <li><a href="deals.html">Deals</a></li>
                    <li><a href="store.html" style="font-size: 30px; color: #FFD700;">Store</a></li>
                    <li><a href="basket.html">Basket</a></li>
                    <li><a href="">Coming soon</a></li>
                    <li><a href="">Support</a></li>
                </ul>
            </div>
            </nav>

        <div class="main-container">
            <div class="content">
                <br>


                    <div class="ws_shadow"></div>
                <hr>

                <div class="contentbox-big2" style="margin-left: 0px;">
                <div class="titlebox">
                    ADS
                    <div class="titleinfo"></div>
                </div>
                <div class="newscontent">

                <img src="img/brit.png" alt="image" style="width:167px;height:258px;">
                <br> <br> <hr> <br> <br>
                <img src="img/coke.jpg" alt="image" style="width:167px;height:258px;">
                <hr>


              </div>
           </div>


          <div class="contentbox-big3" style="margin-left: 0px;">
                <div class="titlebox">
                    Deals
                    <div class="titleinfo"></div>
                </div>
                <div class="newscontent2">
                <img id="zoom_01" src="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png"  data-zoom-image="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png"/>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pokemon Sun 3DS - £14.99. &nbsp;&nbsp;&nbsp;&nbsp; Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
                <br> <br> <hr> <br> <br>
                <hr>

                <img src="https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/20171029_pubg_logo.jpg" alt="image" style="width:300px;height:350px;">
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Player Unknown's Battlegrounds - £19.99. &nbsp;&nbsp;&nbsp;&nbsp; Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
                <br> <br> <hr> <br> <br>
                <hr>

                <img src="http://sm.ign.com/t/ign_in/cover/b/battlefiel/battlefield-1_9ufa.250.jpg" alt="image" style="width:300px;height:350px;">
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Battlefield 1 - £24.99. &nbsp;&nbsp;&nbsp;&nbsp; Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
                <br> <br> <hr> <br> <br>
                <hr>


           </div>   
        </div>
          </div>
            </div>

        <div class="footer"></div>

                  </div>
    </body>
 </div>

 <div class="soundcloud"> 
            <iframe width="100%" height="80" scrolling="no"  
frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/184695140&amp;color=%23ff5500&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true"></iframe>

</html>

JavaScript代码：

function myFunction() {
    if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
        window.location.href='basket.html';
    };
}

function myFunction() {
if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
        window.location.href='basket.html';
    };
}

$('#zoom_01').elevateZoom({
  zoomType: "inner",
  cursor: "crosshair",
  zoomWindowFadeIn: 500,
  zoomWindowFadeOut: 750
});

简单的Elevate Zoom插件不起作用？

0 个答案: