Home > 20080516


20080516

Shadowbox応用：複数のWebページをグループ化してまとめる
以下の記事で実装方法やサンプルを掲載しました。
●Shadowbox実装手順

今回は、このShadowboxを使った応用として、複数のWebページをグループ化してまとめる手法を紹介したいと思います。ページをグループ化することで、拡大した画像の下に「Close」だけではなく、「Previous」と「Next」リンクを付けてページ遷移を容易にし、ユーザビリティを向上させることもできます。

サンプル（テキストリンク）とコードは以下の通りです。
Google
Yahoo! JAPAN
MSN Japan
<a href="http://www.google.co.jp/" rel="shadowbox[hogehoge]" title="Google">Google</a>
<a href="http://www.yahoo.co.jp/" rel="shadowbox[hogehoge]" title="Yahoo! JAPAN">Yahoo! JAPAN</a>
<a href="http://jp.msn.com/" rel="shadowbox[hogehoge]" title="MSN Japan">MSN Japan</a>
※[]内のhogehogeは任意ですが、グループ化するには同じ文字を入力ください

次にサンプル（画像リンク）とコードはテキスト同様、以下の通りです。
Google
20080516_1.png
Yahoo! JAPAN
20080516_2.png
MSN Japan
20080516_3.png
Google
<a href="http://www.google.co.jp/" rel="shadowbox[hogehoge]"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/20080516_1s.png" alt="20080516_1.png" border="0" align="left"/></a><br clear="all" />Yahoo! JAPAN
<a href="http://www.yahoo.co.jp/" rel="shadowbox[hogehoge]"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/20080516_2s.png" alt="20080516_2.png" border="0" align="left"/></a><br clear="all" />MSN Japan
<a href="http://jp.msn.com/" rel="shadowbox[hogehoge]"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/20080516_3s.png" alt="20080516_3.png" border="0" align="left"/></a><br clear="all" />
今回はWebページに絞りましたが、次回はFlashやYouTubeなどの動画をオーバーレイさせる方法を紹介したいと思います。

Home > 20080516

Search
Adsense

Calendar
« 2008/05 »
S M T W T F S
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Categories
Tagcloud
Archives
Recent Comments
Recent Trackback
Feeds

↑Page Top