ここのBlog では、画像をクリックすると画面が黒転し画像が
もわっと大きくなって表示されます。
これは、Lightboxというプラグインを利用しています。 こんな感じ。
その利用方法のTipsです。
�� まずLight boxのサイトへいって、中程のDownloadからLightbox V2.04をダウンロード し解凍します。
�� ここで行うことを大まかに言えば、FC2にはフォルダーのアップロードができないことから、
必要なファイルをべたにアップロードしますので、そのためのリンク先の変更が大部分です。
�� できたホルダーの中のｊｓフォルダにある、lightbox.jsを修正します。
�� lightbox.jsをwordpadで開き、imagesで検索をします。
�� 検索結果の中で、images/～gifという記述が4ヵ所ありますので、そのimageのところを
すべてアップロードされるファイルのデータアドレスにします。
�� ここで、アドレスがわからない方は、アップロードしてある写真等を右クリックしてプロパティーを
見るとそのアドレスが表示されますので、そのファイルの名前の前の部分までをimageの代わり
に貼り付けてやってください。
images/～gif を |
というようにするわけですね。修正を行ったら上書き保存をします。
�� 同様に、cssフォルダにあるlightbox.cssもWordpadで開き、中程の /prevlabel.gif と
/nextlabel.gif の前のアドレス部分も同じように修正し、上書き保存します。
�� 次に、ダウンロードしたファイルのうち、index.html とimages フォルダーのJPG２枚を除く
15ファイルすべてを、FC2へ画像をアップするときと同じようにアップします。
�� ここから次の段階です。アップしたファイルを利用できるようにスクリプトを書き込みます。
�� 管理ページでテンプレートの設定をクリックし、利用中のテンプレートの「編集」をクリック。
�� 出た窓の上のほう、HTMLの編集の方で
head から /head
の間に次のスクリプトをコピペします
<script type="text/javascript" src="http://サイトURL/prototype.js"></script> |
�� このときに、上で赤字で表示してある部分を、先ほどimageの代わりに貼り付けたものを、
ここにも貼り付けます。
�� これで、Lightbox自体の処理はおしまいです。
�� この状態で、写真をサムネイルで表示しクリックで元の大きさで表示するようにアップすると、
そのタグの中に target="_blank" というタグがありますので、それを rel="lightbox"に
書き換えてやると、はい、Lightboxが動くと思います。
�� 数枚の画像をスライドショーのようにしたい場合は、上の様にタグに書き込むときに
rel="lightox[グループ名] " としてやれば、同じグループ名をつけた画像が続けて
表示されるようになります。
ちょっと、難しそうにも見えますが、実際にやってみるとそうでもありません。写真をちょっと
おしゃれに見せたい方等、是非チャレンジしてみてください。
0 件のコメント:
コメントを投稿