http://lokeshdhakar.com/projects/lightbox2/と本「Murach's JavaScript and jQuery」(320 ページと 321 ページ) の両方の手順に従って、サイトにライトボックス機能を追加しようとしています。
lightbox.css (および screen.css、これも必要かもしれないと思います) を Content フォルダーに追加し、lightbox.js と jquery.smooth-scroll.min.js の両方を (ライトボックスのダウンロードに含まれていたため) 追加しました。ライトボックスが必要だと考えた) を Scripts フォルダーに追加します。
また、ライトボックスのダウンロードに含まれる次の画像を Images フォルダーに追加しました: close.png、loading.gif、next.png、および prev.png。
私はこの html と jQuery コードを持っています (これはこの時点での Default.cshtml 全体です):
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "el Garrapata - Spoon!!!";
}
<div id="tabs">
<ul>
<li><a href="#tabs-1">Spring</a></li>
<li><a href="#tabs-2">Summer</a></li>
<li><a href="#tabs-3">Fall</a></li>
<li><a href="#tabs-4">Winter</a></li>
</ul>
<div id="tabs-1">
<a href="Images/Fullsize/Landscapes/Spring_2013 04 06_2293.jpg" rel="lightbox" ><img src="Images/Thumbnails/Landscapes/Spring_2013 04 06_2293_th.jpg" width="300" height="200"></a>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
...しかし、それは機能しません: その 1 つのサムネイル画像が [Spring] タブに表示されますが、それをクリックすると、画面がほとんど暗くなり、ほとんど不透明になるまで「グレー表示」されます。
ライトボックスのダウンロードには、jquery-1.7.2.min.js と jquery-ui-1.8.18.custom.min.js も含まれています
_SiteLayout.cshtml で新しいバージョンを参照しています。
<script src="~/Scripts/jquery-2.0.0.min.js"></script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>
これが問題でしょうか？ライトボックスを使用したい場合、古いバージョンの jQuery および jQueryUI を使用して「立ち往生」していますか?
ところで、これをライトボックスの内部フォーラムに投稿しようとしましたが、Fakebook と Google のどちらでもログインできませんでした (ただし、(前者の場合はしぶしぶ) 両方のアカウントを持っています。OpenID ジャズも試しましたが、 URL を期待しているようです...???)
アップデート
注: この質問にはできるだけ早く 100 ポイントを付与します。それより前に回答を得た場合は、回答後に報奨金を授与します。
更新 2
fancyBox に切り替えましたが、「サムネイル」をクリックすると、中央ではなくページの左側に大きな (href) 画像が表示されます。Razor、HTML、および jQuery のすべてを次に示します (簡潔にするために一部のイメージ コードを省略しています)。
_SiteLayout.cshtml から選択:
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script src="~/Scripts/jquery-2.0.0.min.js"></script>
<!-- May want to replace the above before deploying with use of a CDN:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
OR: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
..and similar for jquery-ui -->
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
Default.cshtml から:
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Garrapata";
}
<div id="tabs">
<ul>
<li><a href="#tabs-1">Spring</a></li>
<li><a href="#tabs-2">Summer</a></li>
<li><a href="#tabs-3">Fall</a></li>
<li><a href="#tabs-4">Winter</a></li>
</ul>
<div id="tabs-1">
<a class="fancybox" rel="group" href="Images/Fullsize/Landscapes/Spring_2013 04 06_2293.jpg"><img src="Images/Thumbnails/Landscapes/Spring_2013 04 06_2293_th.jpg" width="294" height="196" alt="" /></a>
<a class="fancybox" rel="group" href="Images/Fullsize/Landscapes/Spring_2013 04 06_2295.jpg"><img src="Images/Thumbnails/Landscapes/Spring_2013 04 06_2295_th.jpg" width="294" height="196" alt="" /></a>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$(".fancybox").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic'
});
});
</script>
また、NE コーナーに「閉じる」ボタンが表示されません。おそらく、「上部」スペースをすべて占有する大きな画像が表示される余地を残していないためです。
更新 3
_SiteLayout.cshtml で参照していた .css および .js ファイルが /fancybox/source にあるはずであることがわかりました。
私が今持っているものの代わりに、つまり次のように思えます：
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
...何が動作するはずです:
<link rel="stylesheet" href="~/Content/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="~/Scripts/jquery.fancybox.js"></script>
...これらのファイルをそれらの場所にコピーしたためです。
それは本当にあなたが言及したその特定の方法でなければならないのですか？
私が持っているものに基づいてcssとjsがまったく見つからないように見えるので、それがうまく機能することに驚いています...
