--
    --.--

    スポンサーサイト

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

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

    slimbox 2をFC2ブログに導入・基本編

    画像をクリックするとその場で画像が拡大表示されるエフェクト。よく見かけますよね?
    JavaScriptで書かれたLightBox系プラグインと呼ばれるものです。
    私もふとやってみたくなったので導入してみました(この画像はThickBox3.1の例)。

    thickbox_default


    いろいろあって迷います。こちらでは24種類紹介されています。
    画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) - かちびと.net


    由緒正しきLightBox、シンプル系ならThickBox 3.1
    高機能とかエフェクト重視ならfancyboxとか?
    動作を確認できるサイトで試してみると早いかも(例えばこちら)
    [JSメモ]SlimboxとかThickBoxとかの画像拡大script検証 - ponnao-clip

    選択のポイントを「動作が軽め・そこそこ機能がついてる・今もメンテされてるもの」に絞り、私が選んだのは…
    slimbox〜!(ドラえもん風にどうぞw)

    slimboxには使用するライブラリが異なる2つのバージョンがあり、
    MooToolsを使うバージョン1.xとjQueryを使うバージョン2.xがあります。

    うちのブログでは元々テンプレートでjQueryを使用していたのでslimbox 2を選択。
    材料が決まったところで、実際にFC2のブログエディタでslimbox 2を設置していきます。

    jQueryの用意


    slimbox2を動かすにはjQueryが必要です。まずはその準備から。

    対応するjQuery

    slimbox 2が対応しているjQueryはバージョン1.3から最新版の1.10.2(2013.12.20現在)まで。
    jQuery 2.xにも対応しているようですが、これはIE6~8に対応していないので注意。
    私もslimbox 2.05とChrome Mac (31.0.1650.63)で試してみたところ、
    jQuery 1.7.1、1.8.2、1.8.3、1.9.1、最新版の1.10.2いずれも動作OKでした。
    メモ:バージョン1.9でメジャーアップデートがあったようです。

    すでにjQueryが用意されてないか確認

    自分のブログのテンプレートhtmlを見てみましょう。
    FC2ブログにログインしてテンプレートの設定をクリックすると、自分のテンプレートhtmlを確認することができます。
    私のブログのテンプレートにも以下のようなリンクがありました。
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    すでにjQueryのリンクがあれば、まずはそれを流用するのが一番簡単です。

    もしjQueryがテンプレートの中に無かったら

    jQueryのファイルを自前で持つことも出来ます。
    その場合、本家サイトから適当なバージョンのjquery (minified)をダウンロードしてきます。
    (minifiedというのはファイルサイズが小さいという意味で、機能最小版という意味ではありません)

    FC2ブログのアップローダーには
    ファイル名に.(ピリオド)を含むファイルをアップロードできない制限がありますが、
    ファイル名をjquery-1_10_2_min.jsという風に変更してアップロードすればOKです。

    この他、ちょっと裏技ですが、FC2ブログのサーバに用意してあるjQueryを利用する方法もあります。
    現在このURLが使えます。http://static.fc2.com/js/lib/jquery-1.8.2.min.js

    slimboxの用意


    本家サイトからslimboxをダウンロードし、zip形式のファイルを解凍。中身はこんな感じ。
    slimbox_205_files


    (1) 先にCSSフォルダのgifファイル4つjsフォルダのslimbox2.js
    FC2ブログのファイルアップロードを使ってアップロードします。


    (2) CSSフォルダのslimbox2.cssmiなどで開きます。
    21行目あたりにある
    .lbLoading {
            background: #fff url(loading.gif) no-repeat center;
    }

    loading.gifというところを
    アップロードしたloading.gifのURLに書き換えます。
    URLはファイルアップロードのココから取って来て下さい。
    FC2blog_fileupload_url

    46行目付近のurl(prevlabel.gif)、54行目付近のurl(nextlabel.gif)、72行目付近のurl(closelabel.gif)も
    同じように書き換えます。
    改行コード=LF, 文字コード=UTF-8を指定して保存し、このファイルもアップロードします。

    ブログのテンプレートのhtmlを編集


    ChromeなどのブラウザからFC2ブログを開き、テンプレートの設定でhtmlを編集します。
    (編集する前の内容をmiなどで保存しておくと、失敗しても元に戻せて便利です)

    ちなみに、実際に操作するブラウザの「テンプレートの設定」画面はこんな感じ。

    FC2blogeditor_htmledit


    <head>〜</head>の間に以下の記述を追加します。
    <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>
    <!-- slimbox END -->
    </head>


    そのままコピペするのではなく、“~のURL”という部分を書き換えて下さい。
    ・jQueryのURLの部分=既存のURL、または適切なURLに書き換え。
    FC2にあるjQuery(http://static.fc2.com/js/lib/jquery-1.8.2.min.js)を使う手もあります。

    元々jqueryの記述があればその後に5・6行目を追加すればOK。
    slimbox.cssのURLまたはslimbox.jsのURLの部分も
    ファイルアップロードに表示されていたURLに書き換えます。

    これで下準備完了です!

    slimboxをブログの画像に反映させる


    実際にブログの画像をslimboxに反応するようにするには、画像のhtmlに工夫が必要です。
    条件(1)a href=に画像のリンクを書く
    条件(2)<a>タグの中にrel=“lightbox”を書き加える

    分かりにくいかも知れないので、この手順を説明します。
    ここではFC2ブログのアルバムの画像を例にしてみます。

    ブログエディタの設定を変えると便利

    FC2ブログのアルバムの画像をブログに貼る時、こんなボタンを押してアルバム画像のhtmlを作ってますよね?
    次のような設定をしておくと、都合のいいリンクを作れるようになります。

    環境設定>ブログの設定>投稿設定(ココ)に「画像のリンク」という項目があります。
    デフォルトの設定では、画像を記事に挿入する際に「アルバムページにリンクさせて」挿入
    となっています。この設定だとslimboxがうまく処理できないので
    元画像にリンクさせて」に変更して更新ボタンを押します。

    「サムネイルで記事を書く」を押した時にできるhtml

    「アルバムページにリンクさせて」の設定時(デフォルトの設定):
    <a href="http://w6o6n.blog.fc2.com/img/MacOS9_startup.jpg/" target="_blank"><img src="http://blog-imgs-48.fc2.com/w/6/o/w6o6n/MacOS9_startups.jpg" alt="MacOS9_startup.jpg" border="0" width="125" height="95" /></a>
    a href=に書かれているURLが画像ファイルへのリンクではない点に注意!
    ~.jpg/, つまり画像があるディレクトリのURLになっています)

    「元画像にリンクさせて」に変更した場合:
    <a href="http://blog-imgs-48.fc2.com/w/6/o/w6o6n/MacOS9_startup.jpg" target="_blank"><img src="http://blog-imgs-48.fc2.com/w/6/o/w6o6n/MacOS9_startups.jpg" alt="MacOS9_startup.jpg" border="0" width=“125” height=“95” /></a>
    これなら条件(1)をクリアできます!

    あとは条件(2)をクリアするために<a>タグの中にrel=“lightbox”を書き加えればOK!
    <a href="http://blog-imgs-48.fc2.com/w/6/o/w6o6n/MacOS9_startup.jpg" rel=“lightbox” target="_blank"><img src="http://blog-imgs-48.fc2.com/w/6/o/w6o6n/MacOS9_startups.jpg" alt="MacOS9_startup.jpg" border="0" width=“125” height=“95” /></a>


    slimboxで表示するまでもない小さな画像の場合は、<a>タグの部分を丸ごと削ってしまうといいかも。

    実際に設定した画像がこちら


    適用後の画像がこちら。クリックするとslimboxによってその場で拡大表示されます。

    MacOS9_startup.jpg


    もし複数の画像をグループにしてスライドショーにしたければ
    lightboxの後に共通のキーワードをつけることでグループ化できます。
    例:rel=“lightbox-MacColor”

    MacOS9_startup2.jpgMacOS9_startup3.jpgMacOS9_startup4.jpg



    次回はslimbox 2導入・応用編の予定です。
    htmlの書き換えが不要になるtipsや、エフェクトのカスタマイズの方法、
    Picasaやflickrのhtmlコードに対応する方法などをお送りしようかと思っています^-^
    関連記事

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