jquery - 複数の JQuery スクリプトの使用

Question

複数の JQuery スクリプトを実行する必要がある Web ページがあります。1 つはライトボックスイメージビューア用で、もう 1 つは石積みレンガのレイアウトをイメージに追加するためのものです。どちらのスクリプトも単独ではうまく機能しますが、一緒に使用するとライトボックスは機能しません。私は何を間違っていますか？

私はここに問題のデモを持っています: 石積みの場合: http://shareit.me/jquery.fancybox-1.3.4/scrapbook.html 石積みのない場合: http://shareit.me/jquery.fancybox-1.3.4/スクラップブック2.html

サングラスをクリックして問題を確認してください。

これは、両方のスクリプトを持つソースのソースです。いくつかの html を削除したことに注意してください。

<!doctype html>
<html>

<head>
<title> Scrapbook </title>
<link rel="stylesheet" type="text/css" href="styles/scrapbook.css"/>
<link rel="stylesheet" type="text/css" href="styles/navbar.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.4 | Demonstration</title>
<script type="text/javascript"    
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
    !window.jQuery && document.write('<script src="jquery-1.4.3.min.js">  
<\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js">
</script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js">
</script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" 
media="screen" />
<script type="text/javascript">
    $(document).ready(function() {
        /*
        *   Examples - images
        */

        $("a#example1").fancybox();
</script>
</head>

<body>

<div id="page-title">
    <p> Colin's Scrapbook </p>
</div>
<div id="new-album-button">
    <div id="btn" class="create-album">
        <p><a href="createalbum.html"> + create album </a></p>
    </div>
</div>

<div id="container">
            <div id="brick" class="event">
        <div class="event-top">
            <img src="http://www.destination360.com/north-
america/us/florida/images/s/south-florida-beaches.jpg"/>
        </div>
        <div class="event-bottom">
            <div class="event-bottom-pic">
                <img 
src="http://cbsmiami.files.wordpress.com/2010/11/bill_baggs_beach.jpg"/>
            </div>
            <div class="event-bottom-pic">
                <img src="http://www.best-beaches.com/images/best-
florida-vacations/florida-best-vacations.jpg"/>
            </div>
            <div class="event-bottom-pic">
                <img src="http://www.destin-florida-
mls.com/images/destin12.jpg"/>
            </div>
            <div class="event-bottom-pic">
                <img src="http://www.rachelmarks.com/wp-
content/uploads/2009/10/Beach-Florida.jpg"/>
            </div>
        </div>
        <div class="event-title">
            <p> Florida 2012 </p>
        </div>
    </div>
    <div id="brick" class="moment">
        <a id="example1" href="./example/1_b.jpg"><img alt="example1" 
src="./example/1_b.jpg" /></a>
    </div>  
</div>

<script src="jquery/jquery-1.7.1.min.js"></script>
<script src="jquery/jquery.masonry.min.js"></script>
<script>
  $(function(){

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '#brick'
  });
});

});
</script>

</body>

</html>

score 0 · Accepted Answer

JS にいくつかのエラーがあります。

あなた$(document).ready(function() {はこのタグを閉じるのを忘れていました。
jQuery の 2 つのインスタンスが含まれていますが、これらは競合しています (そして、おそらく互いに打ち消し合っています)。私の提案は、jQuery 1.7 をロードすることです。テストしましたが、Fancybox で問題なく動作するようです。

これが正しい、テスト済みの動作するコードです（ローカルでテストしていたので、すべてが絶対パスではありません）

<!doctype html>
<html>
<head>
<title> Scrapbook </title>
<link rel="stylesheet" type="text/css" href="http://shareit.me/jquery.fancybox-1.3.4/styles/scrapbook.css"/>
<link rel="stylesheet" type="text/css" href="http://shareit.me/jquery.fancybox-1.3.4/styles/navbar.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.4 | Demonstration</title>
<script src="http://shareit.me/jquery.fancybox-1.3.4/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="http://shareit.me/jquery.fancybox-1.3.4/fancybox/jquery.mousewheel-3.0.4.pack.js">
</script>

<script type="text/javascript" src="http://shareit.me/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>
<link rel="stylesheet" type="text/css" href="http://shareit.me/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" 
media="screen" />
<script type="text/javascript">
    $(document).ready(function() {
        /*
        *   Examples - images
        */
        $("a#example1").fancybox();

    });
</script>
</head>

<body>

<div id="page-title">
    <p> Colin's Scrapbook </p>
</div>
<div id="new-album-button">
    <div id="btn" class="create-album">
        <p><a href="createalbum.html"> + create album </a></p>
    </div>
</div>

<div id="container">
            <div id="brick" class="event">
        <div class="event-top">
            <img src="http://www.destination360.com/north-
america/us/florida/images/s/south-florida-beaches.jpg"/>
        </div>
        <div class="event-bottom">
            <div class="event-bottom-pic">
                <img 
src="http://cbsmiami.files.wordpress.com/2010/11/bill_baggs_beach.jpg"/>
            </div>
            <div class="event-bottom-pic">
                <img src="http://www.best-beaches.com/images/best-
florida-vacations/florida-best-vacations.jpg"/>
            </div>
            <div class="event-bottom-pic">
                <img src="http://www.destin-florida-
mls.com/images/destin12.jpg"/>
            </div>
            <div class="event-bottom-pic">
                <img src="http://www.rachelmarks.com/wp-
content/uploads/2009/10/Beach-Florida.jpg"/>
            </div>
        </div>
        <div class="event-title">
            <p> Florida 2012 </p>
        </div>
    </div>
    <div id="brick" class="moment">
        <a id="example1" href="http://shareit.me/jquery.fancybox-1.3.4/example/1_b.jpg"><img alt="example1" 
src="http://shareit.me/jquery.fancybox-1.3.4/example/1_b.jpg" /></a>
    </div>  
</div>
<script src="http://shareit.me/jquery.fancybox-1.3.4/jquery/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '#brick'
  });
});

});
</script>
</body>
</html>

jquery - 複数の JQuery スクリプトの使用

1 に答える 1

Related

Reference