Home > スポンサー広告 > Shadowbox応用:複数の画像をグループ化してまとめる


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/195-160bd7a4
Listed below are links to weblogs that reference
スポンサーサイト from TRASH

Home > スポンサー広告 > Shadowbox応用:複数の画像をグループ化してまとめる

Home > IT Tips > Shadowbox応用:複数の画像をグループ化してまとめる


Shadowbox応用:複数の画像をグループ化してまとめる

以下の記事で実装方法やサンプルを掲載しました。
●Shadowbox実装手順

今回は、このShadowboxを使った応用として、複数の画像をグループ化してまとめる手法を紹介したいと思います。グループ化することで、拡大した画像の下に「Close」だけではなく、「Previous」と「Next」リンクを付けてスライドショーのような演出をすることができます。

サンプル画像とコードは以下の通りです。
hamu_1.jpghamu_2.jpgneko_1.jpgneko_2.jpg

画像1つ分のコードを以下に記載します。
<a href="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/neko_2.jpg" rel="shadowbox[group]" title="ハムスターとクロネコ"><img src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/neko_2s.jpg" alt="neko_2.jpg" border="0" align="left"/></a><br clear="all" />

赤文字部分のShadowboxを扱うrel属性に[]を使うことでグループ化できます。
※[]内の文字はユニークで良いが、グループ化するには同じ文字を入力ください

青文字部分のtitleは、付けても付けなくても問題ありません。詳細は以下ご参照。
●Shadowbox応用:画像にタイトルを付加する
スポンサーサイト

 Comments:0

Comment Form

 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

Home > IT Tips > Shadowbox応用:複数の画像をグループ化してまとめる

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。