- 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応用：画像にタイトルを付加する
- Next Entries : Shadowbox応用：Webページに実装させる
- Prev Entries : Shadowbox応用：画像にタイトルを付加する
Comments:0
Trackback+Pingback:0
- TrackBack URL for this entry
- http://blackcat13numbers.blog31.fc2.com/tb.php/195-160bd7a4
- Listed below are links to weblogs that reference
- Shadowbox応用：複数の画像をグループ化してまとめる from TRASH