ライトボックス JS 画像コントロールは、複雑な画像説明_JavaScript スキルをサポートするように変更されました。-jsチュートリアル-php.cn

ライトボックス JS 画像コントロールは、複雑な画像説明_JavaScript スキルをサポートするように変更されました。

WBOY

リリース： 2016-05-16 18:32:00

オリジナル

846 人が閲覧しました

変更されたライトボックスのバージョンはバージョン 2.04 です。
ライトボックスを使用して画像を表示するときに使用する基本設定は次のとおりです:

コードをコピーしますコードは次のとおりです。 :

コンテンツ
🎜>
主に rel="lightbox" 属性を接続に追加します

上記のテストで接続が設定され、接続をクリックすると、ライトボックスに接続上の画像が表示され、タイトルが使用されます画像の説明として接続の属性を使用する場合、画像の詳細な説明を追加し、フォントサイズや色などの画像の説明の形式を設定する場合は使用できません。 title 属性で説明情報を設定します。
顧客がこの機能を必要とするため、ライトボックスのソースコードをチェックして、このニーズを満たすように変更できるかどうかを確認する必要がありました。幸いなことに、ライトボックスのメインコードのサイズはそれほど大きくなく、変更することができます。小さな変更でこのニーズを満たすことができます。これは主に、私が JS フレームワークのprototype.js に慣れていないためです。
以下は変更プロセスです:
lightbox.js ファイルを開きます。元の 218 行のコードは次のとおりです:
this.imageArray.push([imageLink.href, imageLink.title]); > ここでは、接続オブジェクトの title 属性を直接読み取っているため、imageLink.title:
this.imageArray.push([imageLink.href, document.getElementById(imageLink.contentId). innerHTML ]);

imageLink.title を document.getElementById(imageLink.contentId).innerHTML;
この文からわかるように、接続オブジェクトに contentId 属性を設定する必要があります。属性値は特定の DOM 要素の ID 番号で、画像の説明はこの要素の内容です。
変更後、次のように HTML で画像の説明を設定できます:

コードをコピーしますコードは次のとおりです。

コンテンツ