- 締切済み
lightboxの画像表示を画像切り替えの画面に組み込みたい
ttp://designm.ag/tutorials/jquery-display-switch/ の画像一覧の切り替えと litboxの画像表示をしたくて ttp://www.lateralcode.com/create-a-simple-picture-gallery-using-php/ の出力結果のコードをそのまま書き写して実行しましたが 実行すると「ページでエラーが発生しました」 ライン11文字2 nullはNULLまたはオブジェクトではありません となってしまいます。 ソースが以下の様になっています。 どこを直していけばいいのか教えてください。 ライン１１は「$(document).ready(function(){」です。 <script type="text/javascript" src="js/jquery-latest.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript"> $(document).ready(function(){ $("a.switch_thumb").toggle(function(){ $(this).addClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").addClass("thumb_view"); }); }, function () { $(this).removeClass("swap"); $("ul.display").fadeOut("fast", function() { $(this).fadeIn("fast").removeClass("thumb_view"); }); }); }); </script> <style type="text/css"> body { margin: 0; padding: 50px 0 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; background: #000 url(body_bg.jpg) no-repeat center top; color: #fff; } h1 { font: 5em normal Georgia, 'Times New Roman', Times, serif; text-align:center; margin-bottom: 20px; } h1 span { color: #000000; } h1 small{ font: 0.2em normal Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing: 1.5em; display: block; color: #000; } .container { width: 758px; margin: 0 auto; padding-bottom: 100px; overflow: hidden; } ul.display { float: left; width: 756px; margin: 0; padding: 0; list-style: none; border-top: 1px solid #000; border-right: 1px solid #000; background: #000000; } ul.display li { float: left; width: 754px; padding: 10px 0; margin: 0; border-top: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; } ul.display li a { color: #000000; text-decoration: none; } ul.display li .content_block { padding: 0 10px; } ul.display li .content_block h2 { margin: 0; padding: 5px; font-weight: normal; font-size: 1.7em; } ul.display li .content_block p { margin: 0; padding: 5px 5px 5px 245px; font-size: 1.2em; } ul.thumb_view li{ width: 250px; } ul.thumb_view li h2 { display: inline; } ul.thumb_view li p{ display: none; } a.switch_thumb { width: 122px; height: 26px; line-height: 26px; padding: 0; margin: 10px 0; display: block; background: url(./images2/switch.gif) no-repeat; outline: none; text-indent: -9999px; } a:hover.switch_thumb { filter:alpha(opacity=75); opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; } a.swap { background-position: left bottom; } </style> </head> <body> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <div id="contents"> <a href="#" class="switch_thumb" >Switch Display</a> <p> <ul class="display" id="pictures"> <li> <div class="content_block"> <a href="./images/1.gif" rel="lightbox[16530]"><img src="./images/2.gif" alt="" /></a> <h2><a href="#"></a>Image Name</h2> <p><!―Description here--></p> </div> </li> <li> <div class="content_block"> <a href="./images/3.gif" rel="lightbox[16530]"><img src="./images/4.gif" alt="" /></a> <h2><a href="#"></a>Image Name</h2> <p><!―Description here--></p> </div> </li> <li></li> </ul> </p> </div>
- haraharu1
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
お礼
ありがとうございます。 リンク先を参考に修正をしてみます。