Home > IT Tips > Shadowbox応用：複数のWebページをグループ化してまとめる


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などの動画をオーバーレイさせる方法を紹介したいと思います。

 Comments:0

Comment Form

 Trackback+Pingback:0

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/199-56a41098
Listed below are links to weblogs that reference
Shadowbox応用：複数のWebページをグループ化してまとめる from TRASH

Home > IT Tips > Shadowbox応用：複数のWebページをグループ化してまとめる

Search
Adsense

Calendar
« 2008/07 »
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