IE6、7でも動作・Lightboxのようにハイライトする拡大鏡を実装するjQuery・Loupe and Lightbox

なかなか用途がありそうでした
のでメモ。Lightboxでよく見る
ように周りを暗くして画像をハイ
ライトさせながら、ルーペ機能
も実装するjQueryプラグインの
ご紹介。

IE6と7でも動作確認しましたが、何の問題も無く動いてくれました。マークアップも凄く単純なので使い勝手も良さそうです。

Loupe and Lightbox

こんな感じで画像をハイライトさせつつ、拡大鏡も実装します。

マークアップは以下のような単純なコードで実装出来ます。

<a href="images/big/belle_isle_big.jpg" class="one">
<img src="images/small/belle_isle_small.jpg" alt="belle isle" />
</a>

小さい画像をアンカータグで囲ってリンク先を大きい画像のURLにするだけ。

jquery.loupeAndLightbox.jsを使いつつ、以下のコードで調整する感じ。コメントアウトの部分はオプションのデフォルト状態です。

$(function() {
      // Default
      // zIndex:1000,
      // width:150,
      // height:150,
      // border:'2px solid #ccc',
      // fadeSpeed:250,
      // lightbox:true,
      // errorMessage:'Image load error'
      $('.one').loupeAndLightbox({
        border:'1px solid red'
      });
});

class名とかボーダーなんかはこのオプションで指定するだけです。

$('.クラス名').loupeAndLightbox({
        width:ボックスの幅,
        height:ボックスの高さ,
        lightbox:false←lightboxを使うかどうか。
      });
    });

という感じで。以下はオプションでlightbox:falsを指定した時の実装状態です。

なかなか良いのでは。因みに、もっとビジュアル面にこだわった拡大鏡をお望みならCloud Zoomが参考になるかと思います。これもIE6でも7でも動いてくれます。

Loupe and Lightbox