javascript "Lytebox" 導入について

TAKYのサイト: 高安山写真散歩 http://takayasuyama.jugem.jp
"Lytebox" オートスライドショー導入例: しおんじやま古墳 フォトアルバム( 写真大量です・・・(;´_`)\ )

単独画像としての使用サンプル:サムネイル画像をクリック しおんじ山古墳    

"Lytebox"とはhtmlページで動く写真のアルバム、スライドショーの表示用ジャヴァスクリプトです。
手動送りやオートスライドショーもできます。 hhttp://lytebox.com にて配布されています。

1= まず「Lytebox v3.22」 (May 2009)zipファイルをダウンロード、解凍、保存します。
フォルダーには「 javascriptファイル」  「cssカスケードスタイルシート ドキュメント」 「 images 画像ファイル」が含まれ、すべてそのままサーバーのhtmlと同じディレクトリーにアップします。 同じでないとimagesのURIが変わってしまうためcssの編集等のカスタマイズが必要になります。

2= 以下の javascript(.js)と スタイルシート(.css)のリンクの記述をhead内に記入。

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />


3= 以下の例のように、それぞれの目的に合った rel属性を <a タグに記入する。
*A 単独画像としての使用例  aタグに rel="lytebox" を記入。   写真1枚を画面中央に表示。

<a href="img/0001.jpg" rel="lytebox" title="画像-0001">写真001ここをクリック</a>
( title="画像-0001"は任意文字 写真の下に表示されます    写真001ここをクリックの文字リンクは画像の使用も可)
    単独画像としての使用サンプル:右上サムネイル画像をクリック

      *B グループ画像としての使用例  aタグに rel="lytebox[groupphoto]" を記入。
   手動送りのスライドショー。

<a href="img/0002.jpg" rel="lytebox[groupphoto]" title="グループ画像-002">グループ画像</a>
<a href="img/0003.jpg" rel="lytebox[groupphoto]" title="グループ画像-003">グループ画像</a>
( [groupphoto]の文字は任意文字  画像の枚数は何枚でも )
    グループとしての使用サンプル:テキストをクリック >>グループ画像-2 グループ画像-3 グループ画像-4

      *C スライドショー画像としての使用例  aタグに rel="lyteshow[slidephoto]" を記入。
   オートスライドショー、手動送りも可能。  インターバル時間変更はJSファイルを編集。

<a href="img/0005.jpg" rel="lyteshow[slidephoto]" title="スライドショー画像-0005">スライドショー画像</a>
<a href="img/0006.jpg" rel="lyteshow[slidephoto]" title="スライドショー画像-0006">スライドショー画像</a>
( [slidephoto]の文字は任意文字)
    スライドショーとしての使用サンプル:テキストをクリック >>スライドショー画像-5 スライドショー画像-6 スライドショー画像-7 スライドショー画像-8

      *D HTML内容としての使用例  aタグに rel="lyteframe" を記入。
    インラインフレーム iframeのように別の htmlページを呼び出して中央表示。

<a href="http://**********myblog.jp" rel="lyteframe" title="Welcom my Blog" 
   rev="width: 550px; height: 450px; scrolling: yes;">MY BLOG</a>
( rev="*****" によって開くページの大きさを指定できる  yesは noに変更も可 )
    フレームとしての使用サンプル:テキストをクリック >>Sample html Page http://sample17.jugem.cc/


* sep. 2014確認の最新版は: Lytebox v5.5 Latest Release Date: 01/26/2012
* Win8.1(Fx32 GC37 IE11)にて動作確認済み


inserted by FC2 system