Lightbox | Web活メモ帳 https://blog.verygoodtown.com WEB開発者が使える世界の情報を発信します Mon, 13 Dec 2010 16:04:24 +0000 ja hourly 1 https://wordpress.org/?v=5.9.10 122803348 CSS3でライトボックスする際に使えるライブラリ10選 https://blog.verygoodtown.com/2010/12/css3-lightbox/ https://blog.verygoodtown.com/2010/12/css3-lightbox/#respond Tue, 14 Dec 2010 01:15:31 +0000 http://blog.verygoodtown.com/?p=5469 CSS3でライトボックス風のエフェクトを表示しようとした際に使えるライブラリをまとめた「10 CSS3 Lightbox Alternatives」というエントリーから、いくつか抜粋してご紹介します。 Drop-In M […]

The post CSS3でライトボックスする際に使えるライブラリ10選 first appeared on Web活メモ帳.]]> CSS3でライトボックス風のエフェクトを表示しようとした際に使えるライブラリをまとめた「10 CSS3 Lightbox Alternatives」というエントリーから、いくつか抜粋してご紹介します。

Drop-In Modals

20101214-01

リンク

CSS3 – Clickbox – Gallery

20101214-02

リンク

Full CSS3 Lightbox

20101214-03

リンク

100% CSS3 Lightbox

20101214-04

リンク

Semantic CSS3 Lightboxes

20101214-05

リンク

サイトでは他にも紹介されていますので、ぜひご覧になってみてください！

The post CSS3でライトボックスする際に使えるライブラリ10選 first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2010/12/css3-lightbox/feed/ 0 5469 jQueryでLightBox風のエフェクトが作れる「YoxView」 https://blog.verygoodtown.com/2010/02/jquery-lightbox-like-effect-yoxview/ https://blog.verygoodtown.com/2010/02/jquery-lightbox-like-effect-yoxview/#comments Sun, 21 Feb 2010 13:50:30 +0000 http://blog.verygoodtown.com/?p=2592 YoxViewは拡大画像を効果的に見せるためのjQueryプラグインです。 以下のような機能があるようです。 ブラウザウインドウ内で表示されるよう、画像の自動縮小 他言語対応 キーボードによる操作が可能 早速使ってみまし […]

The post jQueryでLightBox風のエフェクトが作れる「YoxView」 first appeared on Web活メモ帳.]]> 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風プラグインはいくつかありますが、選択肢の一つに入れても良いのではないでしょうか。

The post jQueryでLightBox風のエフェクトが作れる「YoxView」 first appeared on Web活メモ帳.]]> https://blog.verygoodtown.com/2010/02/jquery-lightbox-like-effect-yoxview/feed/ 4 2592