Slider Pro

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-01-02 (金) 17:53:43 | 最終更新:2015-01-03 (土) 13:07:21

多機能スライドショー。
公式サイト
デモも同サイトにある。

【環境】
[jQuery] 1.11.0
[Slider Pro] 1.1.0
DL

公式TOP の中ほど下にある「Get the jQuery plugin」
または、GitHub の Slider Pro のプロジェクトページ から DL。
同 GitHub プロジェクトページにコマンドによる DL(インストール)手法も紹介されている。

 

セッティング
head
  1. <link rel="stylesheet" href="css/slider-pro.min.css" />

 

body
本体
  1. <div class="slider-pro" id="my-slider">
  2.     <div class="sp-slides">
  3.         <!-- Slide 1 -->
  4.         <div class="sp-slide">
  5.             <img class="sp-image" src="img/image1.jpg"/>
  6.         </div>
  7.  
  8.         <!-- Slide 2 -->
  9.         <div class="sp-slide">
  10.             <img class="sp-image" src="img/image2.jpg"/>
  11.         </div>
  12.  
  13.         <!-- Slide 3 -->
  14.         <div class="sp-slide">
  15.             <img class="sp-image" src="img/image3.jpg"/>
  16.         </div>
  17.     </div>
  18. </div>

 

実行

フッタ部分(body 最下部)へ記述。

  1. <script src="js/jquery-1.11.0.min.js"></script>
  2. <script src="js/jquery.sliderPro.min.js"></script>
  3. <script type="text/javascript">
  4.     // 実行部分
  5.     jQuery( document ).ready(function( $ ) {
  6.         $( '#my-slider' ).sliderPro();
  7.     });
  8.  
  9.     // JavaScript API。オプション(プロパティ)設定
  10.     $( '#my-slider' ).sliderPro({
  11.         width: 960,
  12.         height: 500,
  13.         arrows: true,
  14.         buttons: false,
  15.         waitForLayers: true,
  16.         fade: true,
  17.         autoplay: false,
  18.         autoScaleLayers: false
  19.     });
  20. </script>

オプション一覧
JavaScript API

オプション名 内容 デフォルト値
備考
width スライダーの横幅 500
px(数値のみ) か %(クォーテーションで括る)で指定。
height スライダーの高さ 300
px(数値のみ) か %(クォーテーションで括る)で指定。
responsive true
aspectRatio アスペクト比 -1
imageScaleMode 画像自動拡縮モード ‘cover’
‘cover’:スライド全体に合うようにリサイズ
‘contain’:画像全体がスライドの中に納まるように?
‘exact’:スライドのサイズに合わせる
‘none’:何もせず
centerImage true
autoHeight 高さの自動調節 false
スライドに合わせた高さの自動調節
startSlide 開始スライド番号 0
shuffle シャッフル false
orientation スライド方向 ‘horizontal’
‘horizontal’:水平方向
‘vertical’:垂直方向
buttons マーカーボタンの表示 true
スライド下部に表示される、現在地を示す、スライドを切り替えるボタンを表示する
keyboard キーボード操作 true
左右キー(← →)を有効にする
thumbnailWidth サムネイル幅 100
thumbnailHeight サムネイル高さ 80
thumbnailsPosition サムネイル配置場所 ‘bottom’
スライドの ‘top’, ‘bottom’, ‘right’ and ‘left’
thumbnailPointer アクティブマーカー false
アクティブなサムネイルにマーカーを付ける
thumbnailArrows false
fadeThumbnailArrows false
thumbnailTouchSwipe true

※まだまだいっぱいあるけど、力尽きた・・・
訳間違いも可能性大なので、公式サイト(JavaScript API) を参照のこと。
 

サムネイル付
  1. <div class="slider-pro" id="my-slider">
  2.     <div class="sp-slides">
  3.         <!-- Slide 1 -->
  4.         <div class="sp-slide">
  5.             <img class="sp-image" src="img/image1.jpg"/>
  6.         </div>
  7.  
  8.         <!-- Slide 2 -->
  9.         <div class="sp-slide">
  10.             <img class="sp-image" src="img/image2.jpg"/>
  11.         </div>
  12.  
  13.         <!-- Slide 3 -->
  14.         <div class="sp-slide">
  15.             <img class="sp-image" src="img/image3.jpg"/>
  16.         </div>
  17.     </div>
  18.  
  19.     <!-- サムネイル部分 -->
  20.     <div class="sp-thumbnails">
  21.         <img class="sp-thumbnail" src="img/thumbnail/image1.jpg"/>
  22.         <img class="sp-thumbnail" src="img/thumbnail/image2.jpg"/>
  23.         <img class="sp-thumbnail" src="img/thumbnail/image3.jpg"/>
  24.     </div>
  25. </div>

 
次はオプション。
関係がありそうなもののデフォルト値を並べてみた。

  1. <script type="text/javascript">
  2.     $( '#my-slider' ).sliderPro({
  3.         thumbnailWidth: 100,
  4.         thumbnailHeight: 80,
  5.         thumbnailsPosition: 'bottom',
  6.         thumbnailPointer: false,
  7.         thumbnailArrows: false,
  8.         fadeThumbnailArrows: true,
  9.         thumbnailTouchSwipe: true
  10.     });
  11. </script>

 

参考元サイト

coliss:[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
Gimmick log:万能スライダー Slider Pro の使い方
→具体例がたくさんあって、参考になる
STERFIELD:クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン
→オプションの説明がある

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-01-02 (金) 17:53:43 | 最終更新:2015-01-03 (土) 13:07:21

blueberry

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-01-02 (金) 14:55:51 | 最終更新:2015-01-02 (金) 14:58:24

画像を準備するだけで簡単だった♪

【環境】
[jQuery] 1.6.1
DL

公式サイト から DL。
デモも同サイトTOPにある。
 

セッティング
head
  1. <link rel="stylesheet" href="css/blueberry.css" />
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  3. <script src="js/jquery.blueberry.js"></script>

 

body
本体
  1. <div class="blueberry">
  2.     <ul class="slides">
  3.         <li><img src="img/slide1.jpg" /></li>
  4.         <li><img src="img/slide2.jpg" /></li>
  5.         <li><img src="img/slide3.jpg" /></li>
  6.         <li><img src="img/slide4.jpg" /></li>
  7.     </ul>
  8. </div>

上記だけ記載すれば、blueberry 側でオプションを自動でくっつけてくれ
実際のコードは下記のように出力される。

  1. <div class="blueberry">
  2.     <ul class="slides">
  3.         <li><img src="img/slide1.jpg" /></li>
  4.         <li><img src="img/slide2.jpg" /></li>
  5.         <li><img src="img/slide3.jpg" /></li>
  6.         <li><img src="img/slide4.jpg" /></li>
  7.     </ul>
  8. <!-- Optional, see options below -->
  9.     <ul class="pager">
  10.         <li><a href="#"><span></span></a></li>
  11.         <li><a href="#"><span></span></a></li>
  12.         <li><a href="#"><span></span></a></li>
  13.         <li><a href="#"><span></span></a></li>
  14.     </ul>
  15. <!-- Optional, see options below -->
  16. </div>

 

実行
  1. <script>
  2.     $(window).load(function() {
  3.         $('.blueberry').blueberry();
  4.     });    
  5. </script>

 

CSS

スライドショーのサイズは親エレメントに依存するので
下記のような設定は任意。

  1. .blueberry { max-width: 960px; }

 

jquery.blueberry.js
  1. var defaults = {
  2.     interval: 5000,
  3.     duration: 500,
  4.     lineheight: 1,
  5.     height: 'auto', //reserved
  6.     hoverpause: false,
  7.     pager: true,
  8.     nav: true, //reserved
  9.     keynav: true
  10. }

 

参考元サイト

coliss:[JS]実装は簡単、機能は最小限、Responsiveデザイン対応の超シンプルなスライダーのスクリプト -Blueberry

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-01-02 (金) 14:55:51 | 最終更新:2015-01-02 (金) 14:58:24

jQuery Index

Posted by muchag | jQuery |
初回投稿:2011-08-05 (金) 18:01:50 | 最終更新:2018-11-04 (日) 12:36:54

JavaScript ってとても便利なんだけど
以前はあんまり使わない方がいいよ~っていうノリだったはずなのに
いつの間にか Google までもが Ajax になっていた。

慌てて再び JavaScript を使い始めてみたら
とても便利なライブラリがあり、その1つである jQuery について
学習したことをまとめていこうと思う。

丸っきりの書きかけ項目は Not found になる。

基本
  1. 書式
  2. CDN
  3. ウィンドウ情報
  4. 文字列
    1. 検索
    2. (部分一致)

 

メソッド
  1. Deferred Object
  2. Effects
    1. Custom
      1. .animate()
  3. Miscellaneous
    1. Collection Manipulation
      1. Traversing
        1. .each()
  4. Traversing
    1. Filtering
      1. .first()
  5. Utilities
    1. jQuery.parseJSON()

 

Ajax
  1. 基本
  2. フォームデータの送信
  3. ページの読込

 

plugin
  1. jquery.shapeshift.js (要素を DnD で並べ替える)
  2. jquery.tile.js(タイル状に配置)
  3. アニメーション
    1. 動作パターン
      1. jQuery Easing Plugin
    2. スロット
      1. jSlots
  4. ツリービュー
    1. jsTree
    2. Fancytree
      1. Tutorial
        1. Theming(style)
      2. Extensions
        1. dnd
        2. dnd5
      3. API Reference
        1. Fancytree
        2. FancytreeNode
    3. Treeview
  5. フォーム
    1. form
    2. バリデーション
      1. validate
    3. 入力支援
      1. datetimepicer

 

UI
  1. 概要
  2. Widgets
    1. dialog

 

ナビゲーションメニュー
  1. CSS MenuMaker

 

スライドショー
  1. blueberry
  2. Slider Pro

 

フォーム
  1. jquery.combobox.js

 

Ajax
  1. jquery.pjax.js (defunkt 版)
    1. フォームの値の受け渡し

 

Tips
  1. prop メソッドと attr メソッドの違い
  2. remove メソッドと empty メソッドの違い
  3. 画像ファイルの存在チェック
  4. ファイルの存在チェック(Ajax)
  5. タブメニュー
    1. タブメニュー 横その1
  6. ナビゲーションメニュー
    1. メニュー 縦その1
  7. フォーム
    1. 値処理

 

がい~ん!(はまったこと)
  1. 解決済み(たぶん)
    1. JSON 文字列をオブジェクト化できない
    2. 要素の指定記法
  2. 未解決
    1. pjax(defunkt 版)で、差し替え先の指定

 

参考

公式
jQuery API
jQuery 入門

Posted by muchag | jQuery |
初回投稿:2011-08-05 (金) 18:01:50 | 最終更新:2018-11-04 (日) 12:36:54