| Lightbox_plus の採用 | |
| １． | Javaとcssを利用して、サムネールを開く方法の一つです。 resource という フォルダに javaScriptと css が 入っているのでhtmlと同じディレクトリー（フォルダ）に resource をアップロードすると同時に、htmlにリンクさせて利用することになります。 ＊htmlが全部同じフォルダに置かれている場合には、resource は一箇所にあるだけですべてのhtmlに適用できますが、別のフォルダにhtmlを置くときは、それぞれのフォルダに resource をおく必要がある。  （＊resourceへのパスを絶対パスに変更する方法については未検証）（resource は右の TV アイコンを右クリックでダウンロードできるようにしてある。 lightbox と言う名前のZipに圧縮されているのでクリックして開きます。 展開すると中に resource というフォルダと利用法を載せたreadmeテキストがある。） 機能参照サンプルページ  ← このページに見られるようにサムネールを開くとポップアップとして現在のページの上へ重なって拡大画像が出ます。下になっているページは少し暗くなります。スライドのように次の画像･前の画像への移動ボタンも表示され、窓は一つだけで次の画像と中身だけが入れ替わります。 |
| 2. |
ホームページの Head 内、タイトル の下辺りに 次の2行の記述を書き加えます。ビルダーの場合は HTMLソースを表示してみて下さい。Body の始まる前（上）に記述します。 <link rel="stylesheet" type="text/css" href="./resource/lightbox.css" media="screen,tv"> <script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script> この2行は resource フォルダ にある JavaScript と lightbox.css へのリンクを設定する記述ですので、この機能を適用するページに必須の記述です。 htmlと同じフォルダに resource が置いてあることを前提としたリンクの設定法です。 |
| ３．a | リンク先の開き方（ターゲット指定）については、 rel="lightbox" と 記述すると、サムネールごとにポップアップします。 （例 <a href="xxxxxxxxxxx.jpg" rel="lightbox"><img src="xxxxxxxxxx_thumb.jpg"></a> ） 置き換え機能などを利用して一斉に書き込むことも出来ます。） この場合、次へ・前へ の矢印は出ません。画像にそれぞれ説明が付けられている場合に利用します。 ｘの閉じるアイコンは出ますが、画像のどこをクリックしても閉じます。 左上に出る拡大アイコンをクリックしてから 画像の上でマウスのホイール操作で画像の拡大が可能になり、写真では見えないような文字まで見えるようになります。 また画像をドラッグし中心位置の変更や見たい場所への移動が簡単に可能になるという、優れた機能があります。 上記を適用した参考ホームページ  |
| ３．ｂ | リンクの開き方を前後の矢印をいれて、スライドショーのように移動する場合は ターゲット指定を rel=lightbox" と 前側のダブルコーテイション を 無し にします。 （例 <a href="xxxxxxxxxxx.jpg" rel=lightbox"><img src="xxxxxxxxxx_thumb.jpg"></a> ） 説明の後にサムネールが連続して並べてあるページなどで利用するとよいでしょう。 この機能はたまたま記述ミスが元で発見しました。同ページ内で使い分けることも可能です。 ただし、スライド機能を2度に分けて利用することはだめです。途中に挟まっている単独ポップアップを飛ばして次のスライド機能へ繋がってしまうようです。 こちらを適用した参考ホームページ |
| 4. | ポップアップで開く拡大写真の大きさは元画像が大きい場合はインターネットエクスプローラの画面の大きさに縦横の一方が合う大きさに縮小されてでます。元画像がIEの画面よりも小さい場合はそのままのサイズで表示されます。ホームページ作成に当たっては１，０００ピクセル程度の事前に縮小しておくのがベターです。なお、左肩にでる拡大マークをクリックしてからマウスのホイール操作で拡縮が出来るようになり、ドラッグすることで見たい位置を中心に移動させることが出来る。 |
| 備考 | 既に作成してあるページへの適用は、 hetecre などのテキストエディターを利用すると一度に10ページ以上も置き換えを利用して新機能を適用できるので ビルダー一辺倒の利用者も勉強してみてください。 |
