3

ライトボックス 2 では、「ロードトリップ」(かなり標準) と呼ばれるギャラリーを作成する一連のリンクがありますが、ページのギャラリーに既にイメージのより大きなバージョンがあり、これで「ロードトリップ」ギャラリーを開きたいと考えています。既存のイメージに別のインスタンスを追加することなく。

追加のインスタンスを作成せずに、「ロードトリップ」ギャラリーも開きたい「大きな画像を表示」というボタンもあります。

これらを追加した時点で、href="" が完全に削除されていても、ギャラリーで空白のインスタンスが引き続きトリガーされます。何も追加しようとせずにギャラリーを開くには、他に 2 つのリンクが必要です。

例えば：

<a href="image1.jpg" rel="lightbox[roadtrip]">Image One</a>
<a href="image2.jpg" rel="lightbox[roadtrip]">Image Two</a>
<a href="image3.jpg" rel="lightbox[roadtrip]">Image Three</a>
<a href="image4.jpg" rel="lightbox[roadtrip]">Image Four</a>

<a rel="lightbox[roadtrip]">View Large Images</a>

問題は、「大きな画像を表示」でライトボックスギャラリーが開きますが、「大きな画像を表示」をクリックするとライトボックスが開き、そのリンクから実際に何かをレンダリングしようとしないことです (これは自動的に行われます)。ギャラリーの 5 番目のインスタンスにハングアップし、左または右をクリックして実際の画像を表示できますが、[大きな画像を表示] をクリックすると、[画像 1] でライトボックス [ロードトリップ] が開くようなものをお勧めします。

私が物事を適切に説明したことを願っています。これを行う方法があるに違いありません。

これを達成する方法を知っている人はいますか？あなたの助けに感謝します。

4

1 に答える 1

5

少しjQueryの調査を使用して自分で解決しました。以下は私が使用したソリューションです。

ライトボックス 2 に付属している jQuery を開始する必要があります。

HEAD セクション データ:

<script type="text/javascript">

    $(document).ready(function() {

        $('#click-to-enlarge').click(function() {

            $('#gallery-image-1').trigger('click');

        });

    });

</script>

BODY セクションのデータ:

<a href="image1.jpg" id="gallery-image-1" rel="lightbox[roadtrip]">Image One</a>
<a href="image2.jpg" rel="lightbox[roadtrip]">Image Two</a>
<a href="image3.jpg" rel="lightbox[roadtrip]">Image Three</a>
<a href="image4.jpg" rel="lightbox[roadtrip]">Image Four</a>

<a href="#" id="click-to-enlarge">View Large Images</a>

ここで質問に答えるのはこれが初めてなので、誰かが理解できるようにコード例をもう少し「きれい」にしたいと思うかもしれません。

これが私の状況で他の人に役立つことを願っています:)

于 2013-08-09T04:24:28.327 に答える