ホームページ用無料素材/Blog

2009/10/19

画像をカッコよくポップアップ表示させる方法　Ajax Lightbox2

FC2 Blog ランキング参加中　応援ポチはココから＞＞

今日は、先日ドロップショッピングサイトで商品画像の表示方法で使用してみたLightbox2について書いています。

とても簡単に、商品画像をかっこよくポップアップ表示することが出来ます♪

参考はこちらをご覧下さい(105運営ショップ)

「洗剤革命Ⅱ」の商品ページが開いたと思います♪

商品画像の小さい方をクリックすると、

どうでしょう～

かっこよく表示されていますね～＾＾こんな感じに誰でも簡単に画像表示できます。

CSS Lecture さんのサイトを参考に使用してみました☆

まずは、Lokesh Dhakarさんのさいとからライブラリをダウンロード

ダウンロードしたファイルを解凍すると、

lightbox2.04フォルダの中に、ｃｓｓ、ｊｓ、imagesフォルダが入っていますので

そちらを全てアップロード（同じ名前のフォルダがある場合はそのフォルダに中身をアップロード）

imagesフォルダにはクローズボタンなどの画像が入っています。

ポップアップ表示させたい画像のページのタグ内に下記を追記

<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>

あとはポップアップ表示させたい画像のタグ内にrel="lightbox"を追記するだけです♪

例えば

<a href="image/0058200000112/1/l.jpg">
<img src="image/0058200000112/1/m.jpg" />
a>

を以下のようにrel="lightbox"を追記する

<a href="image/0058200000112/1/l.jpg" rel="lightbox">
<img src="image/0058200000112/1/m.jpg" />
a>

以上です☆

簡単でかっこよく画像をポップアップ表示出来ました！

是非試してみてください

コメント : 2 :| ホームへ戻る｜このページのトップへ

ランキングに参加中です

2009/09/19

ショッピングサイトオープン！第816回「がんばれ！と応援したい人・モノ」

FC2 Blog ランキング参加中　応援ポチはココから＞＞

今日は「がんばれ！と応援したい人・モノ」というテーマで書いてみました☆
がんばれ！と応援したい人・・・

今は自分かな～

コソコソ作っていたサイトをやっとオープン！
今は毎日のようにサイトの更新、集客作業に追われています。

ちょこっとサイトの紹介

ネットでショッピングの際には一度覗いてくださいネ！
↓↓↓携帯サイトも一緒にオープンしています☆

↑↑↑こちらも宜しく～

このショッピングサイトで作成した素材を今後またお配りしたいと思ってます♪

こんにちは！FC2ブログトラックバックテーマ担当ほうじょうです。
本日のトラックバックテーマはプレゼントつき！
そんな今日のテーマは「がんばれ！と応援したい人・モノ」です。
今回のトラックバックテーマは、映画「風が強く吹いている」の試写会ご招待のプレゼントつきです
映画「風が強く吹いている」は、普段マラソンとあまり関係のなかった8...
FC2 トラックバックテーマ:「がんばれ！と応援したい人・モノ」