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

変更されたライトボックスのバージョンはバージョン 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 で画像の説明を設定できます:

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

コンテンツ

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。