Home > 20080509
20080509
Shadowbox応用：複数の画像をグループ化してまとめる
- 2008-05-09 (Fri)
- IT Tips
- Tips
- JavaScript
- CSS
- Shadowbox
Category :
Tags :
以下の記事で実装方法やサンプルを掲載しました。
●Shadowbox実装手順
今回は、このShadowboxを使った応用として、複数の画像をグループ化してまとめる手法を紹介したいと思います。グループ化することで、拡大した画像の下に「Close」だけではなく、「Previous」と「Next」リンクを付けてスライドショーのような演出をすることができます。
サンプル画像とコードは以下の通りです。
画像1つ分のコードを以下に記載します。
赤文字部分のShadowboxを扱うrel属性に[]を使うことでグループ化できます。
※[]内の文字はユニークで良いが、グループ化するには同じ文字を入力ください
青文字部分のtitleは、付けても付けなくても問題ありません。詳細は以下ご参照。
●Shadowbox応用：画像にタイトルを付加する
●Shadowbox実装手順
今回は、このShadowboxを使った応用として、複数の画像をグループ化してまとめる手法を紹介したいと思います。グループ化することで、拡大した画像の下に「Close」だけではなく、「Previous」と「Next」リンクを付けてスライドショーのような演出をすることができます。
サンプル画像とコードは以下の通りです。
画像1つ分のコードを以下に記載します。
<a href="http://blog31.fc2.com/b/blackcat13numbers/file/neko_2.jpg" rel="shadowbox[group]" title="ハムスターとクロネコ"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/neko_2s.jpg" alt="neko_2.jpg" border="0" align="left"/></a><br clear="all" />
赤文字部分のShadowboxを扱うrel属性に[]を使うことでグループ化できます。
※[]内の文字はユニークで良いが、グループ化するには同じ文字を入力ください
青文字部分のtitleは、付けても付けなくても問題ありません。詳細は以下ご参照。
●Shadowbox応用：画像にタイトルを付加する
Home > 20080509
- 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
-
- とりもち:綺麗な風景壁紙 vol2 (06/12)
- TomomiX:綺麗な風景壁紙 vol2 (06/12)
- とりもち:綺麗な風景壁紙 vol2 (06/11)
- TomomiX:Greybox実装手順 (05/28)
- aco_oca:Greybox実装手順 (05/28)
- aco_oca:Greybox実装手順 (05/28)
- TomomiX:Office2003・Office2007の共存方法 (05/27)
- ｴ:Office2003・Office2007の共存方法 (05/26)
- TomomiX:Shadowbox応用：Webページに実装させる (05/15)
- ハムネコ:Shadowbox応用：Webページに実装させる (05/14)
- Recent Trackback
- Feeds