スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

[JavaScript]bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第19回目の授業です。

サイト制作中の生徒さんから、

サムネイルをクリックすると画像が拡大するギャラリーページを作りたい。
◆その際、たくさんのサムネイル画像を一覧で全て表示させるのではなく、縦スクロールが必要ないよう横にスライドさせたい

との要望がありました。

なるほど、拡大画像はlightBox、スライダーはbxSliderというjQueryの有名プラグインでできそうですね。

ニーズにぴったりなプラグインを新たに探すというのも一つの手ですが、使い慣れたプラグインで実装できれば、それも良いですよね!

ということで、今回は既知のプラグインを組み合わせて、コンパクトなギャラリーページを作ってみましょう!

完成イメージはこんな感じ。

bxSliderとlightBoxを組み合わせて、コンパクトなギャラリーページを作る

サンプルページはこちらです。

続きを読む

スポンサーサイト
このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

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