--
    --.--

    スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。

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

    FC2ブログにslimbox 2を導入・応用編

    更新が滞ってすみません。
    いろいろありまして^-^;


    臨時でWindowsのiTunesネタを書いたら
    歴代記事の中でこれが一番アクセスが多いという…
    うち、Mac屋さんなんで複雑な気持ち^-^;
    少しでも役に立てたらいっか(笑)


    気を取り直して、前回のslimbox 2導入・基本編に続き、
    今回はslimbox 2導入・応用編として
    ちょっと便利な使い方をご紹介します^-^

    slimbox2・JavaScriptで機能を追加


    slimbox 2のextraフォルダに入っているJavaScriptを使って機能を追加することができます。

    ●autoactivation.js
    <a>タグのhref属性が.jpgか.pngか.gifで終わるものに
    自動的にslimboxを適用してくれます。
    つまり、rel="lightbox"と書き込む必要が無くなります

    ●fix-urls.js
    rel="lightbox"が書き込まれた<a>タグのhrefのURLに
    不適切な文字(スペースとか括弧とか'とか)が含まれている場合、
    slimboxではうまく処理できないことがあります。
    このスクリプトはencodeURIを使ってこれらの文字を自動で修正してくれます。

    ●flickr.js
    Picasaやflickrで作られる画像のhtmlコードでは
    <a>タグのhrefのリンクが画像そのもののリンクではなく、
    画像のあるアルバムへのリンクになっているため
    そのままではslimboxで処理できません

    このスクリプトを使うと
    rel="lightbox"と書き込まなくても
    flickrのサムネイル画像のリンクから
    自動的にslimboxで使うリンクを生成してくれます。

    <a href="がhttp://www.flickr.com/photos/
    で始まるものが対象になります。

    ●picasaweb.js
    Picasa用。やってることはflickr.jsとほぼ一緒。
    <a href="がhttp://picasaweb.google.
    で始まるものが対象になります。
    なお、クリックした時に出てくる画像のサイズは512ピクセルの設定になっています。


    で、どうやってこれを使うかというと…以下の3択

    (1) slimbox.jsのAUTOLOAD CODE BLOCKの部分の書き換えに使う。
    (2) slimbox.jsの後で別途これらのファイルを読み込ませる。
    (3) <script>タグを使ってhtmlにこれらを書き込み。

    (1) Autoload code blockを書き換える方法

    Autoload code blockはslimbox.jsの最後に書き込まれています。
    この部分をお好みのJavaScriptに書き換えればOKです^-^

    デフォルトでは以下のようなグループ化するためのコードが入っています。
    // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
    if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
            jQuery(function($) {
                   $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
                            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
                    });
            });
    }

    2行目から8行目までがAutoload code blockの領域なので、
    ここを使いたいJavaScript(例:先述のautoactivation.jsとか)に差し替えます。
    書き換えたらファイルを保存してアップロードして使いましょう。


    紹介だけだと芸が無いので、autoactivationと元々のグループ化のコードを一体化したものを作ってみました(jpg/gif/pngに自動的にslimboxを適用し、rel="lightbox-グループ名"が書いてあるものはグループ指定)。
    // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
    if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    jQuery(function($) {
    $("a[href]").filter(function() {
    return /\.(jpg|png|gif)$/i.test(this.href);
    }).slimbox({}, null, function(el) {
    return (this == el) || (this.parentNode && (this.parentNode == el.parentNode));
    });
    $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
    return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    });
    });
    }


    (2) slimbox.jsの後で別途読み込む方法

    ブログの表示の際、複数のファイルに分けるよりも
    autoload code blockに書き込んで1つのファイルにした方が読み込みが速いので
    基本的には(1)の方法がベストです。

    それでも訳あって別々のファイルにしておきたい場合は
    テンプレートのhtmlで追加の読み込み設定をしましょう。
    <head>
    <script src="jQueryのURL"></script>
    <!-- slimbox2 -->
    <link rel="stylesheet" href="slimbox.cssのURL" type="text/css" media="screen" />
    <script type="text/javascript" src="slimbox.jsのURL"></script>
    <script type="text/javascript" src="picasaweb.jsのURL"></script>
    <!-- slimbox END -->
    </head>

    6行目:picasaweb.jsを追加で読み込ませる例。ポイントはslimbox.jsの後に読み込ませること!

    (3) テンプレートのhtmlにコードを直接書き込む方法

    ファイル読み込みではなく、テンプレートのhtmlにコードを直接書き込むこともできます。
    メリット:コードをいじりやすい。読み込み速度は(2)より速い。
    デメリット:htmlがゴチャゴチャして見通しが悪くなる


    この例では6-14行目にflickr.jsの内容を書き込んでいます。

    追加のスクリプト次第で他にも

    JavaScriptの知識があれば、この方法を使って自分好みの設定もできます。
    以下のサイトが参考になるかも(どちらも英語)

    本家:slimboxのProject Home, jQueryAPI
    jQueryAPI - slimbox - Calling Slimbox 2 functions from Javascript - The ultimate lightweight Lightbox clone - Google Project Hosting

    個人サイト:実際に改変したJavaScriptが紹介されています
    slimbox2 examples

    表示設定のカスタマイズ


    表示のオプション設定はslimbox.jsのコードの途中に以下のような形で書かれています。
    u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);

    この設定値をお好みに合わせて書き換えます。

    ちなみに私の設定はこんな感じです(変更箇所=赤字)。
    u=w.extend({loop:false,overlayOpacity:0.6,overlayFadeDuration:400,resizeDuration:1,resizeEasing:"swing",initialWidth:100,initialHeight:250,imageFadeDuration:100,captionAnimationDuration:300,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);

    overlayOpacity:0.6(ブラウザを覆う灰色のオーバーレイの透明度を60%に下げた)
    resizeDuration:1(画像読み込み前の白いボックスが画像サイズにズームするエフェクトの時間。1=ズーム無し)
    initialWidth:100(画像読み込み前の白いボックスの幅を100ピクセルにした)
    imageFadeDuration:100(画像が消えるまでの時間。100msecと短めにした)
    captionAnimationDuration:300(キャプションが表示されるまでの時間。300msecと短めにした)


    その他の設定については本家サイト(英語)または以下のサイト(日本語)などを参考にしてみて下さい。
    Slimbox 2の使い方 | Webサイト制作支援 | ShanaBrian Website



    ちょっと分かりにくいかも^-^;
    説明がヘタでごめんなさい m(_ _)m
    関連記事

    このエントリーをはてなブックマークに追加
    トラックバックURL
    http://w6o6n.blog.fc2.com/tb.php/97-a4128bc4
    トラックバック
    コメント
    管理者にだけ表示を許可する
     
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。