-2

私はこのようなコードを持っています

<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
<a href="">View Large Image</a>
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
<a href="">View Large Image</a>
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
<a href="">View Large Image</a>

大きな画像リンクをクリックすると、画像は大きく表示され、他の画像の場所を邪魔しないようにする必要があります。

4

2 に答える 2

3

http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.6.zip

パート 1 - セットアップを取得する

1.上記からライトボックスをダウンロードして解凍します。

2. js フォルダー内を調べて、jquery-1.10.2.min.js と lightbox-2.6.min.js を見つけ、これらのファイルの両方を HTML ページからロードします。最初に jQuery をロードします。

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>

3. css フォルダー内を調べて lightbox.css を見つけ、html ページからロードします。

<link href="css/lightbox.css" rel="stylesheet" />

4. img フォルダー内を調べて、close.png、loading.gif、prev.png、および next.png を見つけます。これらのファイルは、lightbox.css で使用されます。デフォルトでは、lightbox.css はこれらの画像を img というフォルダーで探します。

-------------------------------------------------- --------------------------------------------

パート 2 - 電源を入れる

1.データライトボックス属性を画像リンクに追加して、ライトボックスを有効にします。属性の値には、画像ごとに一意の名前を使用します。例えば：

<a href="img/image-1.jpg" data-lightbox="image-1" title="My caption">image #1</a>

オプション: キャプションを表示する場合は、タイトル属性を設定します。

2. 1 つのセットに結合したい関連する画像のグループがある場合は、すべての画像に同じ data-lightbox 属性値を使用します。例えば：

<a href="img/image-2.jpg" data-lightbox="roadtrip">image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">image #4</a>
于 2013-08-28T08:01:26.113 に答える
0

私は通常、これらの目的のためにfancybox jQuery プラグインを使用しています。古い無料の 1.34 バージョンも簡単な目的で使用できます。プロ ライセンスは必要ありません。リンク先のサイトにもたくさんの作例などがあります。

于 2013-08-28T07:49:50.817 に答える