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/

カラー ボックスを機能させるには、サイトを Web にアップロードする必要がありますか?

4

1 に答える 1

0

あなたはjquery.js二度目に追加しました。それはコードを壊していると思うjquery.colorbox-min.jsので、うまくいきません。2 番目のものを削除します。

この行を削除する必要があります。

<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 に答える