スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Javascriptで画像をかっこよく表示させる

例えばサムネイル画像をクリックして拡大表示させる場合、

画像タグにtarget="_blank"を指定して新しい画面で表示させても味気なくて美しくないですね。

画面上にかっこよくポップアップ表示させる方法を紹介します。


20140205_1.jpg

作成する上でのポイント
1.スクリプトをダウンロード。
2.HTML上でスクリプトを紐付ける。
3.HTMLタグ記述

1.スクリプトをダウンロード
Lightbot2を使用するので、下記サイトからV2.6(2/5現在)をDownLoadし解凍後任意のフォルダに置いておく。
Lightboxサイト

2.HTML上でスクリプトを紐付ける。
スクリプトを紐付けてHTMLから呼び出せる様にします。

HTMLファイルのソースの head 内に以下の3行を追記する。

<script src="lightbox/js/jquery-1.7.2.min.js"></script>
<script src="lightbox/js/lightbox-2.6.min.js"></script>
<link href="lightbox/css/lightbox.css" rel="stylesheet" />




ファイルのパスは自分が任意で置いた場所を指定してください。

3.HTMLタグ記述

HTML上で表示させたいリンク部分「a href...」に 「rel="lightbox"」属性を追記する。

例)
<a href="images/sample.jpg" rel="lightbox" title="画像タイトル">リンク</a>

表示させたい画像が複数あり手動でスライドさせたい場合は
先ほどのrel属性の中に  [グループ名] を追記する。グループ名は任意の文字を設定する。

例)
<a href="images/picture01.jpg" rel="lightbox[group]" title="タイトル01">リンク1</a>
<a href="images/picture02.jpg" rel="lightbox[group]" title="タイトル02">リンク2</a>
<a href="images/picture03.jpg" rel="lightbox[group]" title="タイトル03">リンク3</a>


これで完成です。




トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。