lightbox JSイメージコントロールを改造し、他の複雑な画像説明をサポートします.

1184 ワード

修正されたライトboxバージョンは2.04版です.
以下は私達がlightboxを使って写真を表示する時の基本設定です.
 
  
content
主に接続にrel=lightbox属性を追加しました.
上のテストで接続を設定した場合、この接続をクリックすると、lightboxは接続された画像を表示し、接続されたtitle属性を画像として説明します.画像に詳細な画像説明を追加する場合、フォントのサイズや色などのフォーマットを設定します.これらの説明情報をtitleという属性で設定するのは無理です.
お客様は必ずこの機能を必要としますので、lightboxのソースコードを確認して、それを改造することができるかどうかを確認します.これを満たすために、幸いなことに、lightboxの主要なコード量はそんなに大きくないです.そして、小さい修正を行うことができます.これは必要です.主にprototype.jsというJSフレームワークにあまり詳しくないです.
以下は修正の過程です.
lightbox.jsファイルを開くと、元の218行のコードは次の通りです.
this.imagAray.push([imaglink.href,imagLink.title]);
ここは接続先のtitle属性を直接読み取るために見られます.imagLink.titleを変更するだけでいいです.
this.imagAray.push([imaglink.href,document.getElement ById(imaglink.com.com ntid).innerHTML])
imagLink.titleをdocument.getElement ById(imagLink.com ntId).innerHTMLに変更しました.
この文から分かるように、接続対象にcontentId属性を設定したいです.この属性の値はあるDOM元素のID番号です.画像の説明はこの元素の内容です.
修正後はHTMLのように画像を設定することができます.
 
  
description content