2011-11-27 12 views
0

jqueryで初めてダブリングしています。単純な写真エフェクトを行う必要があります。jqueryライトボックスの問題

問題は、私はチュートリアルで言いたいことすべてを行いますが、ライトボックス効果はありません。ここで

は(headタグなし)私のHTMLドキュメントのヘッドである:ここで

<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8" /> 
    <script src="jquery.js" type="text/javascript"></script> 
    <script src="js/assignment.js" type="text/javascript"></script> 
    <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" /> 
    <script type="text/javascript"> 
     $(function() { 
     $("a.lightbox").lightBox(); 
    }) ; 
     </script> 

は私のリンクです:

<aside id="comment"> 
    <h2>The Apes!</h2> 
    <span>Lead Singer</span><span>Drums</span> 
    <span>Guitar</span><span>Bass</span> 
     <a href="images/Bill.jpg" class="lightbox"><img src = "images/Bill.jpg" rel="lightbox" alt="Lead Singer" title="Band member 1" /></a> 
     <a href="images/Ryan.jpg" class="lightbox"><img src = "images/Ryan.jpg" rel="lightbox" alt="Guitar" title="Band member 2" /></a> 
     <a href="images/Kerry.jpg" class="lightbox"><img src = "images/Kerry.jpg" rel="lightbox" alt="Drums" title="Band member 3" /></a> 
     <a href="images/Bob.jpg" class="lightbox"><img src = "images/Bob.jpg" rel="lightbox" alt="Bass" title="Band member 4" /></a> 
     </aside> 

私は何をしないのですか?私が理解するように、私はリンクする画像のhref(Bill画像 - フルサイズ)とリンクを提供します。これは私のCSSで縮小された同じ写真です。

Aaarrgh。

+2

あなたはWebKitのブラウザにFirefoxやインスペクタでのFirebugを実行する場合は、まったくコンソールウィンドウにすべてのエラーを見ていますか?私はファイルの1つが読み込まれないかもしれないと思います。 –

+0

すっごくいいですが、どうすればいいですか? –

+1

SafariまたはChromeの場合は、ページを右クリックして[要素の検査]に移動し、[コンソール]タブをクリックします。問題が発生しているページを更新し、赤いメッセージがあるかどうかを確認しますコンソール。 –

答えて

0

CSSのサムネイルバージョンをどこかで縮小していないと仮定すると、img srcとhrefは同じ画像を指しています。ライトボックスはイメージのサイズを増やさず、単に表示します。あなたが同じイメージ名を使用したいのであれば(私はそうです)、小さなイメージを大きなイメージとは別のフォルダに入れてください。

例:

`<a href="images/large/Bill.jpg" class="lightbox"><img src = "images/thumbs/Bill.jpg" rel="lightbox" alt="Lead Singer" title="Band member 1" /></a>`