HTML

CSS

JavaScript

ightboxここ最近画像アルバム機能として主流になっているLightboxの導入方法を記載します。
下記のURLをご覧いただければ丁寧な解説があるのですが私が行った流れにて御説明します。

まずは作者であるLokesh Dhakar氏のサイトからLightbox自体をダウンロードできます。
現時点でVer.は2.04でした。そうするとlightbox2.04.zipフォルダが入手できますので解凍しましょう。
するとlightbox2.04フォルダに変化します。 中身はCSSフォルダ、imagesフォルダ、Jsフォルダ、index.htmlです。

①管理サイトの中にCSSフォルダ、imagesフォルダ、Jsフォルダの3点をコピーする。
※index.htmlは当然所有しているでしょうから不要です。

②下記タグをLightboxを使用したいページの<head></head>内に貼り付けます。そのままコピーでOKです。
<!--lightbox開始 -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"> </script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<!--lightbox終了 -->

③次に画像を好きな場所に挿入します。私の場合はリンク元になる画像は小さめの画像で、リンク先を大きめの画像にしています。
よって小さめの画像=A画像、大きめの画像=B画像と仮定します。 A画像を挿入したら、リンクをつけましょう。リンク先はB画像です。

④次に rel="lightbox" title=""というタグをそのまま、リンク先になっている画像Bの後ろへ貼り付けます
。こんな感じになります。もうこれで完成です。
<a href="images/画像B" rel="lightbox" title=""><img src="画像A" alt="" width="" height=""></a>

⑤このままだと1枚づつでの表示になるので、BackやNextをアルバム上に表示したい場合は、先ほどのrel="lightbox"にグループ名を追加しましょう。
例えば、rel="lightbox"[グループA]で設定したら、2枚目3枚目の写真画像にも全く同じ処理をすれば完成です。参考URL
http://journal.mycom.co.jp/articles/2007/06/14/lightbox/index.htmlを参考のこと。

 

  • ※smoothpackとlightboxの相性が悪いみたい。。。グループ化するとずれる。
J
avaScriptを利用した簡易パスワードの記載方法を下記に記します。
ただしこの簡易パスワードはJavaScriptの知識が少しでもある人にとっては用意に見破る(ログインできてします)ことが可能なため、
推奨としては .htaccess を使用することが望ましいです。

<!--パスワードJava開始 -->
<SCRIPT language="JavaScript">
<!--
var keyword = "ここにパスワードを入れる。"
function checkKey(){
var key = prompt("ここにコメントを入れる。パスワードいれてね。とか。","")
if(keyword != key)
history.go(-1)
}
checkKey()
//-->
</SCRIPT>
<!--パスワードJava終了 -->

CGI

SEO Web Tool

Blog Parts

Icon

Texture

Web Design

Colour Chart

Font

Rental Server

Usefull Site

Icon

Texture

Usefull Site

Web Design

WEB Ex.

colour chart

Font

Fireworks

Flash

DreamWeaver

 

 

 

inserted by FC2 system