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

記事タイトル枠

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

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

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

との要望がありました。

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

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

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

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

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

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

続きを読む

スポンサーサイト



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

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

ページトップへ戻る