ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

PhotoCradle

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。

サムネイルを自動生成

プラグインが自動的にサムネイルを設置してくれます。

画像ギャラリーを実装できる「Galleria」
色々なタイプの画像ギャラリーが実装できる「Rondell」

http://showcase.awkwardgroup.com/index2.html
Awkward Showcase
#サムネイル縦並び
Awkward Showcase サイト

http://spaceforaname.com/galleryview/demo-captions.html
GalleryView
#title属性をキャプション
GalleryView サイト

http://pgwjs.com/pgwslideshow/

http://www.pikachoose.com/
Pikachoose
#キャプションはspan要素で生成(tooltip) #IE7+
Pikachoose サイト

http://tikslus.com/tiksluscarousel/demo

Tikslus Carousel

#レスポンシブ #フルスクリーン
Tikslus Carousel サイト


サムネイルを設置できるギャラリー

ナビゲーションにサムネイルを設置できますが、サムネイル画像は用意する必要があります。

シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
表示パターン豊富なスライダー「flexslider 2」
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

http://www.twospy.com/galleriffic/example-2.html

http://jgallery.jakubkowalczyk.pl/demo.php
jGallery
jGallery

http://www.jqueryslidershock.com/
jQuery Slider Shock
#サムネイル縦並び,

http://yevhentiurin.github.io/jsphotocradle/
PhotoCradle
#JSON対応
PhotoCradle サイト

http://steverydz.github.io/simpleGal/demo/

http://www.electricprism.com/aeron/slideshow/example5.html
Slideshow 2!
#サムネイル縦並び
Slideshow 2! サイト

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

関連記事

n__1087

親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head

n__998

様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)

Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際

1049

selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

n__998

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

631

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

n__1059

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

n__1051

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

n__1036

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

Kicksend

入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」

「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

PAGE TOP ↑