1

我是 JQuery 中颜色框的新用户。而且我一直在尝试让示例代码在我的计算机上运行，​​并且当我单击它们只是在新窗口/选项卡中打开的链接时，图像不会显示在“颜色框”中。所以我会告诉你我的代码。因为我是初学者，所以我需要一些对你来说显而易见的事情的帮助。谢谢！

<!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/

我是否需要将网站上传到网络才能使彩盒正常工作？

4

1 回答 1

0

你已经jquery.js第二次附加了，我认为那是破坏代码jquery.colorbox-min.js，所以这不起作用。删除第二个。

你应该删除这一行，

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

jsFiddle 演示

<!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>

更新：

这是您分享的最新代码，

<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
于 2013-01-16T16:48:34.873 回答