ホームページ > 記事 > ウェブフロントエンド > JS は、画像をクリックして拡大して閉じるという美しい効果を現在の page_javascript スキルで実現します
Lightbox JS は、現在のページに画像をオーバーレイするためのシンプルで謙虚なスクリプトです。すぐにインストールでき、すべての一般的なブラウザで動作します。
デモを表示するにはここをクリックしてください。 🎜>使用方法:
ステップ 1 - インストール
1. Lightbox v2.0 は、Prototype フレームワークと Scriptaculous エフェクト ライブラリを使用します。これら 3 つの Javascript ファイルを外部で調整する必要があります。
2. ライトボックス CSS ファイルを外部から読み込みます (または、ライトボックス スタイルを現在のスタイル シートに追加します)。 🎜>
3. CSS を確認し、呼び出された prev.gif ファイルと next.gif ファイルが正しい場所にあることを確認します。また、呼び出されたloading.gif ファイルと close.gif ファイル、および lightbox.js ファイルが正しい場所にあることを確認します。
ステップ 2 -
をアクティブ化する 1. ライトボックスをアクティブ化するには、rel="lightbox" 属性を追加します。 >画像 #1
オプション: title 属性を使用して説明を追加します。2. グループ化する関連画像のセットがある場合は、前の手順を続行して、 rel 属性 Name に角かっこを付けてグループ化します。例:
image #1
image #2
image #3
3. 各ページの写真グループの数と写真グループごとの写真の数に制限はありません。
ダウンロード: Lightbox JS v2.02