0

私は何日も座って、問題の解決に役立つブログ、コード、フォーラムを調べていました。

私がやろうとしているのは、情報の要約を含むページにthum画像を表示することです。クリックすると、大きな画像がfancyboxで開きます。

しかし、私はmysqlデータベースとそれらを呼び出すphpページにすべての画像を持っています.これが私が使用しているコードとスクリプトです.

<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

<script type="text/javascript">
$(document).ready(function() {
$.fancybox({ href: "/images/big_pic.php?id=905", type: "image"})
});
</script>

<a class="fancybox" rel="group" href="/images/big_pic.php?id=905"><img src="h/images/small_pic.php?id=905" alt="" /></a>

サムが表示されていて、ページを更新するとファンシーボックスに移動しますが、クリックすると/images/big_pic.php?id=905に移動します。

ファンシーボックスを複数のサイトで使いたいのでライセンスを購入したいのですが、使えなければ買う意味がありません！これで絶対に気が狂います。

誰かが私を助けてくれることを願っています。

4

2 に答える 2

1

1)。少なくとも次の jQuery コードが必要です。

<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox({
      type: "image"
    }); 
  });
</script>

2)。ページの読み込み時にファンシーボックスを表示するリンクも必要な場合はtrigger、click同じセレクターで次のようにします。

<script type="text/javascript">
 $(document).ready(function () {
     $(".fancybox").fancybox({
         type: "image"
     }).trigger("click"); // <-- show fancybox on page load. Then after every click on the link
 });
</script>

...そして、あなたが探している二重の機能が得られます。

3)。一方、ギャラリーがあり、ページの読み込み時にトリガーする場合は、メソッド.eq()を使用して、ギャラリーの最初の要素が次のようにトリガーされるようにします。

<script type="text/javascript">
 $(document).ready(function () {
     $(".fancybox").fancybox({
         type: "image"
     }).eq(0).trigger("click"); // <-- show fancybox on page load starting from the first element
 });
</script>

JSFIDDLEを参照してください

于 2013-07-17T23:50:14.160 に答える
0

$.fancybox({...行がロード時にライトボックスをトリガーすると確信していますが、実際にはまだ特定のリンク「ライトボックス」リンクを作成していません。この問題を解決するには、以下に示す余分な行を JS セクションに追加します。

<script type="text/javascript">
$(document).ready(function() {
$.fancybox({ href: "/images/big_pic.php?id=905", type: "image"});
$(".fancybox").fancybox(); // <--- this line should do the trick
});
</script>
于 2013-07-17T07:25:50.027 に答える