Question

我是JQuery中彩盒的新用户。我一直试图让我的计算机上的示例代码工作，当我点击他们刚刚在新窗口/标签中打开的链接时，图像将不会显示在'colorbox'中。所以我会告诉你我的代码。我需要帮助你可能很明显的事情，因为我是初学者。谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 <link href="colorbox.css" rel="stylesheet" type="text/css" />
        <script src="jquery.min.js"></script>
        <script src="jquery.colorbox-min.js"></script>

</head>
<title>Untitled Document</title>

<body>
<!--JQuery library-->
<a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
      var foo = "bar";
    </script>


<!--Colorbox Call-->



    <a class='gallery' href='images/DSC_0114.JPG'>Photo_1</a>
        <a class='gallery'     href='images/34180_1473822933002_1456544245_1218149_7765685_n.jpg'>Photo_2</a>
        <a class='gallery'     href='images/26577_1337288319722_1456544245_897498_8319969_n.jpg'>Photo_3</a>

        <script>
            jQuery('a.gallery').colorbox();
        </script>

</body>



<link href="test.css" rel="stylesheet" type="text/css" />
<div class="box" id="box">Content for  class "box" id "box" Goes Here</div>

这些是我用来帮助的网站，但他们没有回答这些非常小的问题。

http://www.jacklmoore.com/colorbox/guide http://learn.jquery.com/about-jquery/how-jquery-works/

我是否需要将网站上传到网络以使彩色框工作？

Answer 1

您第二次附加了jquery.js，我认为这会破坏代码jquery.colorbox-min.js，因此无效。删除第二个。

你应该删除这一行，

<script src="jquery.js"></script>

jsFiddle DEMO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link href="colorbox.css" rel="stylesheet" type="text/css" />
  <script src="jquery.min.js"></script>
  <script src="jquery.colorbox-min.js"></script>
</head>
<title>Untitled Document</title>
<body>
    <a class='gallery' href='images/DSC_0114.JPG'>Photo_1</a>
    <a class='gallery' href='images/34180_1473822933002_1456544245_1218149_7765685_n.jpg'>Photo_2</a>
    <a class='gallery' href='images/26577_1337288319722_1456544245_897498_8319969_n.jpg'>Photo_3</a>

    <script>
        jQuery('a.gallery').colorbox();
    </script>

    <link href="test.css" rel="stylesheet" type="text/css" />
    <div class="box" id="box">Content for  class "box" id "box" Goes Here</div>
</body>
</html>

UPDATE：

以下是您分享的最新代码

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link href="colorbox.css" rel="stylesheet" type="text/css" /> 
<script src="Colorbox/jquery.colorbox-min.js"></script>
<script src="Colorbox/jquery.min.js"></script> 
<link href="test.css" rel="stylesheet" type="text/css" /> 
</head> 
<title></title> 
<a class='gallery' href='images/money2.jpg'>Photo_1</a> 
<a class='gallery' href='images/money2.jpg'>Photo_2</a> 
<a class='gallery' href='images/money2.jpg'>Photo_3</a> 
<script> jQuery(document).ready(function() { jQuery('a.gallery').colorbox(); }); </script>

Colorbox文件夹中必须有这些文件，

jquery.min.js
jquery.colorbox-min.js

点击链接后，图像不会显示在Colorbox中;它们只是在新窗口/标签中打开

1 个答案:

UPDATE：