次の仕様を持つクライアント用のコンテンツ ギャラリーを構築する必要があります。
- ページには 2 つのギャラリーがあります。
- それらはライトボックス内にあり、ユーザーがリンクをクリックすると、ギャラリーがモーダル ウィンドウで開きます。
- ギャラリーには、スライド コンテンツの上に配置される次/前のボタンがあります。
- ギャラリーには、各スライド内の画像とテキスト/その他のコンテンツの両方が含まれます。
私が構築した 3 つのギャラリーの例があります。
1:ギャラリー試行 1、恐れのないフライヤー スライダーに基づく:デモはこちら
これでうまくいかないこと：ボタンは各リスト項目の中にあります。実際のリンクの上に絶対位置の画像を偽のボタンとして配置することでこれを修正しようとしましたが、これにより Internet Explorer で Z-Index を解決できない問題が発生しました。くそ。
私の JQuery チョップは、ボタンが LI から独立し、ボタンがクリックされた回数をカウントすることによってスライドをトリガーできるように、新しい関数を作成するまでには至らなかったので、別の解決策を試しました。
2. TinyCarousel に基づくGallery Attempt Two : DEMO HERE
これについて何が機能するか：すべて！それは素晴らしい！その「前へ」ボタンの自動有効化/無効化が気に入っています。カルーセルの数に制限はありません。素晴らしい。を除外する...
うまくいかないこと:なんらかの理由で、TinyCarousels をモーダル ウィンドウ内に配置すると、ボタンが非アクティブになります。ボタンは文字通り「無効」のクラスを取得し、機能しなくなります。なんで？いいえ。removeClass を使用して「無効化」クラスを削除することで修正を試みました。修正しませんでした。アイデアがありません。
うまくいかないこと: これはページ上の 2 つのギャラリーでうまく機能し、モーダル ウィンドウ内で機能しますが、... JQuery 全体が LI ではなく IMG を具体的にターゲットにしているため、追加のギャラリーでは機能しません。テキストコンテンツ。
したがって、誰でも次のいずれかの解決策または提案を提供できますか?
- ギャラリーへの静的ボタンの追加 試行 1
- モーダル ウィンドウ内のギャラリーを無効にする TinyCarousel のバグを修正
- Gallery Attempt Three を変更して、IMG だけでなく、LI 内のすべてのコンテンツを対象とするようにする、または
- あなたが知っているライトボックス + ギャラリー ソリューションは、箱から出してすぐにこれらすべてを実行し、簡単な CSS カスタマイズを可能にしますか?
さらなるギャラリーの試み:
- BXgallery: コンテンツのサイズを動的に検出し、それに応じてサイズを変更し、モーダル ウィンドウでコンテンツが最初に非表示になると、高さと幅が 0px になるため、機能しません。デモはこちら