jQueryでLightBox風のエフェクトが作れる「YoxView」

4


20100222-01
YoxViewは拡大画像を効果的に見せるためのjQueryプラグインです。

以下のような機能があるようです。

  • ブラウザウインドウ内で表示されるよう、画像の自動縮小
  • 他言語対応
  • キーボードによる操作が可能

早速使ってみました。詳しくは以下

YoxViewを設置

まずはファイルをダウンロードします。
サイトの画面右側にあるダウンロードボタンをクリック。
2010023-03

Latest versionをダウンロードします。
2010023-04

htmlに組み込みます。サムネイル画像をyoxviewクラスの中に配置します。

<div class="yoxview">
    <a href="images/01_full.jpg"><img src="images/01_thumbnail.jpg" alt="First image" /></a>
    <a href="images/another_full.jpg"><img src="images/a_thumbnail.png" alt="Second image" /></a>
</div>

yoxview-init.jsを読み込みます。

<script type="text/javascript" language="javascript" src="yoxview/yoxview-init.js"></script>

yoxview-initの一行目のディレクトリ名を設置したディレクトリ名に変更します。

yoxviewPath = "yoxview/";

最後の行のコメントをはずします。

LoadScript(yoxviewPath + "yoxview-nojquery.js");

これで動作するようになりました。
2010023-05

特にすごいと思ったのが、ウインドウをリサイズした際にスムーズに中央に移動して行く所です。
Lightbox風プラグインはいくつかありますが、選択肢の一つに入れても良いのではないでしょうか。


Comments (4)

  • meo より:
    2010年2月25日 9:56 PM

    yoxview-initの一行目のディレクトリ名を設置したディレクトリ名に変更します。

    ↑というのはどういう事でしょうか？？

    1 yoxviewPath = “yoxview/”;
    　　　　　　　　　　　↑を設置したhtmlのフォルダ名に変える？
    ということでしょうか？？

    すみません、どうも上手く設置ができずに困ってます。
    聞いてはいけないのかもしれませんが、
    質問させて頂きましたm(__)m

  • linja より:
    2010年2月26日 4:42 AM

    >meoさん
    質問ありがとうございます。

    サイトからダウンロードしたファイルはjquery.yoxview-0.9というフォルダになっているため、私の紹介したサンプルとはパスが違ってしまってます。

    なので、そのまま使うなら

    yoxviewPath = “jquery.yoxview-0.9/”;

    という記述になります。
    言葉足らずですみません。

    動作するサンプルを作ってみましたので、こちらで確認してみてもらえますか？

    http://blog.verygoodtown.com/p/yoxview/
    http://blog.verygoodtown.com/p/yoxview/YoxView.zip

  • meo より:
    2010年2月26日 10:24 AM

    ＞linja様
    私の知識不足の質問にもかかわらず

    ご丁寧にご回答やサンプルまでありがとうございます！
    おかげさまで実装できました。

    助かりました。本当にありがとうございます☆

  • linja より:
    2010年2月28日 2:50 AM

    >meoさん
    お役に立てて何よりです。
    不明点などがあったら、遠慮なくご指摘ください！

    • Post a comment