新しい記事を書く事で広告が消せます。
Comments
What say you?
Track backs
http://digdagdig.blog117.fc2.com/tb.php/179-e18c5185
画像、サムネイルの拡大表示を素敵にするjavascript
ページにたくさんの画像をアップしたい時、サムネイルで小さくアップしておき、必要に応じてリンクから拡大表示させたいという事がありますね。
通常、画像にリンクを貼って元画像を表示させると、別ウインドウが立ち上がります。
これを元のページ上でカッコよく拡大表示させる事ができます。
まずはサンプルを見てください。
加工前の通常の画像リンク
このサムネイル画像をクリックすると、別ウインドウが開き元画像が表示されます。
もうひとつブラウザが立ち上がり上のような味気ない画面になってしまいます。
編集後の画像リンク
上の画像をクリックしてもらうと、カッコよく画像拡大の画面が表示されます。
ブラウザが立ち上がる事もありません。
こんな風に素敵な拡大表示が出来ます。
FC2での導入方法は以下に詳しく・・・
プログラムをダウンロード
Lightbox2のサイトに行き、Lightboxv2.03.3をダウンロードします。
サンプルも置いてあるので参考にしてください。
zipファイルですので解凍してください。
解凍したフォルダを開くと、
ファイルをアップロード
3つのフォルダとhtmlファイルがあります。
まずimagesフォルダの中にある画像をアップロードします。
image-1.jpg、thumb-1.jpgはサンプルなのでアップロードする必要はありません。
次にcssフォルダの中のlightbox.cssをテキストエディタ（Windowsのメモ帳など)で開きます。
下はその一部ですが、先ほどアップロードしたイメージのURLを指定しなおさなくてはいけません。（赤字の部分)
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }上の３箇所をそれぞれ
アップロードしたURLに書き換えます。
書き換えたらlightbox.cssもアップロードします。
次にjsフォルダの中にあるlightbox.jsファイルをテキストエディタで開きます。
先ほどのCSSと同じように
var fileLoadingImage = "アップロードしたloading.gifのURL";
var fileBottomNavCloseImage = "アップロードしたcloselabel.gifのURL"; と書き換えます。
書き換えたら、
jsフォルダの中にあるファイルを全てアップロードします。
HTMLに少し書き加える
アップロードしたらHTMLを編集します。
<head>タグと</head>の間に。
<script type="text/javascript" src="アップロードしたprototype.jsのURL"></script>
<script type="text/javascript" src="アップロードしたscriptaculous.jsのURL?load=effects"></script>
<script type="text/javascript" src="アップロードしたlightbox.jsのURL"></script>
<link rel="stylesheet" href="アップロードしたlightbox.cssのURL" type="text/css" media="screen" />
と書き加えます。
画像のリンクのタグに少し書き加える
あとは拡大したい画像のリンクタグの中に
rel="lightbox"
と書き加えればOKです。
また、title="写真のタイトル"
とすると、写真のタイトルも表示されます。
<a href="http://元画像のURL" target="_blank" rel="lightbox" title="写真のタイトル"><img src="http:サムネイルのURL" /></a>
また、複数の画像をアップしている場合は
rel="lightbox[グループ名]"
とすることによって、prev、nextボタンが表示され、わざわざ閉じてクリックし直さなくても次の画像、前の画像に移動できます。
たくさん写真を見てもらいたいときにはかなり使えますね
- posted：2007/11/15：Thu
- 22 ： 09： 22
- ：JavaScript
- ：Design Javascript image
- ：RSS
- comments : 0
- trackbacks : 0
- ：edit
Comments
What say you?
Track backs
http://digdagdig.blog117.fc2.com/tb.php/179-e18c5185
