Number slideshow


Description: クロスブラウザ対応のシンプルなイメージギャラリーです。フェードエフェクトで自動で切り替わるほか、ページャにマウスを乗せるだけで切り替える事も出来ます。
Sample:
Tutorial:
License:

Sample

  • slideshow1
  • slideshow2
  • slideshow3
  • slideshow4

Note

 $(function() {
                $("#number_slideshow").number_slideshow({
                    slideshow_autoplay: 'enable',//enable disable
                    slideshow_time_interval: '3000',
                    slideshow_window_background_color: "#ccc",
                    slideshow_window_padding: '1',
                    slideshow_window_width: '550',
                    slideshow_window_height: '332',
                    slideshow_border_size: '1',
                    slideshow_border_color: 'black',
                    slideshow_show_button: 'enable',//enable disable
                    slideshow_show_title: 'disable',//enable disable
                    slideshow_button_text_color: '#CCC',
                    slideshow_button_background_color: '#333',
                    slideshow_button_current_background_color: '#666',
                    slideshow_button_border_color: '#000',
                    slideshow_loading_gif: 'example.gif',
                    slideshow_button_border_size: '1'
                });
            });

jQueryとプラグインを読み込んで上記のような設定を行います。ローディング画像は変更してください

Related snippet :

  • Description: ソート出来るポートフォリオを構築できます。IE6や7でも動作しますが、アニメーションが少々怪しい感じです。class名を振ってソートするシンプルな手 ...
  • Description: マウスオーバーでアイコンがスムーズに拡大し、キャプションもツールチップ的に表示させます。全てのブラウザで動作してくれます。 Sample: ...
  • Description: ビフォーアフターを実装するプラグインです。クロスブラウザで動いてくれますよ。実装にはjqueryUIが必要です。 Sample: dem ...
  • Description: 多くの形に対応できる高機能コンテンツスライダープラグインです。テキストなどや画像ギャラリー、上記画像のようなサムネイルギャラリーなども構築可能。表示 ...
  • Description: 背景をアニメーションさせるjQueryプラグインです。テキストを書くことも出来ますし、透過された画像を重ねて表示させる事も可能です。IE6のために、 ...
  • Description: シンプルなカルーセルを実装するプラグインです。ボタンで進ませることが出来ます。マークアップがとてもシンプルで使いやすそうですね。 Samp ...
  • Description: iTuneライクなスライダーを手軽なコードで実装します。IEだとちょっと微妙ですね・・・サムネイル付きで画像の切り替わりと連動してサムネイルも動きま ...