Home > Internet > Web関連 > jQuery FancyzoomをVicunaで使う

jQuery FancyzoomをVicunaで使う

Posted by: oscar
2010-04-10 (土) 21:03
Web関連
Fancyzoom, jQuery, mt.Vicuna, Vicuna, YoxView
delicious count
hatebu user
jQuery FancyzoomをVicunaで使う

二つの目的が合って、PhotoGallery用途のJavascriptをいろいろ試してみてます。

一つは、このサイト自身で使っていた、Lightbox 2 と Highslide JSの組み合わせ（使用目的で切り替わるようにしてました）が、流石にいまでは重く感じて（Lightbox 2はPrototypeとscript.aculo.usを使う）きていたのと、やはり最近ではjQueryを覚えるべきだなという結論から、半年ぐらいGallery処理を外していたのだけれど（Highslideだけ残しても良かったのだけれど）、二番目の理由から「そろそろ何が良いか試してみよう」と思いやってみているところなのです。

もう一つの理由というのが、延び延びになっているmt.Vicuna Simpleへの、Galleryプラグインのプラッガブル対応の為です。
mt.Vicuna SimpleではSlimbox 2を同梱して、有効になるように作っていると共に、自動で画像挿入時に「rel="lightbox"」の付加が行なえるようになっています。
これを他のLightbox系スクリプトに、簡単に切り替えられるように作成する事が目標で、どれを対象にするかを選んでいる段階だという訳です。
とりあえず、デフォルト予定の Slimbox 2 と ThickBox は確定という事で、いくつか候補を検討中な訳です。

YoxViewを試してみた

しばらく、忙しかったので中断していたのですが、再開第一弾は「YoxView - jQuery image viewer plugin」でした。

YoxViewの良い所

ギャラリー表示する画像が画面より大きい時に、自動でリサイズしてくれる点: Slimboxにはこれがありません。元画像の大きさはあまり意識しない事が多いので、ぜひ付いていて欲しい機能になります
多彩な指定オプションとプラグインがある点: 表示速度等細かくオプション指定が可能です。またFlash表示に対応していたり、PicasaとFlickrのプラグインが存在します。また、Language packs（残念ながら日本語用は作られてませんが、簡単な中身なのですぐ作れるでしょう）を使ってローカライズが可能です。
ギャラリーグループ内でのページ送り機能がある点: 複数写真をグループとしてまとめて、表示中に進む・戻るが出来る機能です。Lightbox 2など主要なスクリプトでは一般的な機能です。

YoxViewの物足りない所

画像やリンク要素ではなく、その要素を包むラッパー要素に対して、指定が行なわれる点: 親要素に対しての指定になるので、普通にVicunaのマークアップで考えると、「div.textBody」に対する指定になりますが、その場合ファビコン画像のようなものや指定したくないものに対してまで対象になります。特定の要素に対する適用を考えると、わざわざラッパー要素を作成（<div calss="yoxview">で囲むなど）するか、複雑な適用指定（私には考え付きませんでした）をする必要があります。

エフェクト的には好みなのですが、適用する為の制限（親要素に適用）が、個人的には気に入りません。とりあえずこれは対応しない予定です。

割と有名だと思うFancyzoom

「Opensource - AJAX - Jquery Fancyzoom」
元のFancyZoomをjQueryプラグイン化したもので、jQueryで扱うことでの利点がいろいろあります。

こっちはバッタモン「FancyZoom meet jQuery」という訳ではなくて、最初にjQueryにportしたもののようですね。紛らわしいので気をつけましょう。
最初こっちを使っていて、うまく動作しないので悩んでしまいました。

jQuery Fancyzoomの良い所

エフェクトの綺麗さ: 表示エフェクトが印象的です。特に閉じる時に、一旦大きくなり縮んでいくエフェクトはかなり気に入りました。
有効にする要素を、直接指定できる点: リンク要素に対してクラス名やIDなどを元に指定できます。jQueryの記述で指定できるので、「rel="lightbox"」のようなものでも適用対象に出来ます。
ギャラリー表示する画像が画面より大きい時に、自動でリサイズしてくれる点: もちろんリサイズ機能も付いています。
jQueryプラグインである点を有効に使っている点: 他のスクリプトのように、CSSをヘッダに記述しません。jQueryである事を有効に使い、スタイル指定を動的に行なっているようです。ライブラリの読み込みと、リスナーの設定のみで使えます。

jQuery Fancyzoomの物足りない所

ギャラリーグループの概念が無く、「次の画像」が出来ない点: 単独画像の表示しか考慮していないとのことです。スライドショー機能などと共に意図的に実装されていないようです。

Vicunaで使ってみる

既存の「rel="lightbox"」と「class="highslide"」が付加されている、VIcunaのエントリーに対して、jQuery Fancyzoomを有効にする方法です。
最近のuser_jquery.jsを使うタイプのVicunaなら、mt.Vicunaでなくても使用できるはずです。

まずヘッダーでjQuery Fancyzoom を読み込みます。
サイトの説明では以下の様になっています。

//required
<script type="text/javascript" src="js/jquery.js"></script>
//optional
<script type="text/javascript" src="js/jquery.shadow.js"></script>
<script type="text/javascript" src="js/jquery.ifixpng.js"></script>
//the plugin it self
<script type="text/javascript" src="js/jquery.fancyzoom.js"></script>

jquery.fancyzoom.js以外にも、２つスクリプトを読み込んでいます。jquery.shadow.jsは表示したボックスに影をつけるスクリプト。jquery.ifixpng.jsはIEで透過PNGを扱う為のスクリプトです。
この２つは好みにより使用します。

jQueryに付いては、Google AJAX Libraries APIを使用して読み込むよう修正しました。

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script src="<$mt:BlogURL$>js/fancyzoom/jquery.shadow.js" type="text/javascript"></script>
<script src="<$mt:BlogURL$>js/fancyzoom/jquery.ifixpng.js" type="text/javascript"></script>
<script src="<$mt:BlogURL$>js/fancyzoom/jquery.fancyzoom.js" type="text/javascript"></script>

またJavascriptライブラリは、CMS/ブログシステムの場合、相対パスにするとリンク切れが発生しますので、公開URLを示す変数を追加します。もしくは公開されるウェブサイトのルートからの相対パスにしても構いません。
上の記述の場合、サイトのルートにある「js」フォルダ内に「fancyzoom」ファルダがあり、その中に書くスクリプトがある状態になります。なお前述したように、CSSの追加はありません。

user_jquery.jsに適用指定を追加。
すでにエントリー内の画像へのリンクに対して、「rel="lightbox"」や「class="highslide"」が指定されているものとして、user_jquery.jsを以下のようにすることで、エフェクトの割付が完了します。

$(document).ready(function(){
    $.fn.fancyzoom.defaultsOptions.imgDir='/js/fancyzoom/images/';
    $('a[rel^=lightbox]').fancyzoom({Speed:300,overlay:0.7});
    $('a.highslide').fancyzoom({Speed:1000,overlay:0.05});
});

最初の行はエフェクトで使うローディング画像等の位置指定です。こちらも相対パスにすると問題が発生するので注意が必要です。
2番目の行が、aタグの「rel」要素が「lightbox」から始まるものに対して、効果を有効にする指定です。オプション指定で実行速度を300（若干短めです）にし、背景の暗さを#000（未指定のためデフォルト値）に対して0.7のオーバーレイにしています。
3番目の行が、aタグのクラスに「highslide」が指定されているものへの、効果を有効にする指定です。オプション指定で実行速度を1000（ゆっくりめです）にし、オーバーレイを0.05とし、オリジナルのHighslideに似た感じの動作に成るようしてみました。オーバーレイは0でもいいと思いますが、動作するかは確かめていません。
実は「showoverlay」というオプションもあり false 指定することで、オーバーレイ無しという指定が可能です。しかしこの場合、画像の外側をクリックしてウィンドウを閉じる動作が出来なくなります。

ついでに、AutoPagerizeで追加された部分でもエフェクトが有効になるよう試して見ました。ページ読み込み時にイベントが割る振られるので、追加分に対しては適用されていないからです。やり方を知らなかったのでTwitterでつぶやいたら、あのRewishさんが教えてくれました。

Autopagerizeで読み込まれた部分に、イベントつける方法希望

[Twitter / NAOAKI.ONOZAKI/oscar: Autopagerizeで読み込まれた部分に、イベン ...:(2010年4月10日 20:47:21)]

@naoaki011 読み込まれた部分にイベントって言うのは、AutoPagerize_DOMNodeInsertedとは違いますか？

[Twitter / rew: @naoaki011 読み込まれた部分にイベントって ...:(2010年4月10日 20:48:54)]

一応これで動いていると思います。

$(document).ready(function(){
    $.fn.fancyzoom.defaultsOptions.imgDir='/js/fancyzoom/images/';
    $('a[rel^=lightbox]').fancyzoom({Speed:300,overlay:0.7});
    window.addEventListener('AutoPagerize_DOMNodeInserted', function() {
        $('a[rel^=lightbox]').fancyzoom({Speed:300,overlay:0.7});
    }, false);
    $('a.highslide').fancyzoom({Speed:1000,overlay:0.05});
    window.addEventListener('AutoPagerize_DOMNodeInserted', function() {
        $('a.highslide').fancyzoom({Speed:1000,overlay:0.05});
    }, false);
});

動作しているのですが、若干重くなってしまうようですね。試験目的なのでこれで良いとします。

jQuery Fancyzoomは割と扱いやすいですね。これは対応予定とします。
という訳で、他にもテストするスクリプト（jQueryだからプラグインですね）があるので、少しずつ結果をエントリーにしていく予定です。

いけねいけね。大事な事忘れていた。
mt.Vicunaのスタイルシートの値が、jQuery Fancyzoomの値を上書き（というか、より優先になる）してしまう為、表示時のタイトル表示部分がおかしな表示になります。
この部分はtableタグで組まれているのですが、mt.Vicuna側の値でそこのスタイルが書き換わった為、「左右の丸部分が繰り返される」「テーブルに罫線が表示される」「透過部分が白く表示される」という状態になります。

div.jqfancyzoombox table {
    background-color:transparent;
    border:none;
    margin:0;
}
div.jqfancyzoombox td {
    border:none;
    padding:0;
}

styles.cssなどに上のCSSを追加することで、本来の表示に戻す事が出来ます。
Vicunaで使用する場合に、必要な修正です。

なお、文中での良い・悪いは、Vicuna使いの一人としての観点の発言です。つまりCMS/ブログシステムとして利用する事、無駄なラッパーを生成させない事という観点での、判断した結果です。
単独のスクリプトに対する意見ではない事をことわっておきます。