CSSリファレンス、(X)HTML、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！

imgPreview Plugin使い方

imgPreview Pluginの「Download」をクリックするとテキストデータが表示されるのですが、これをjsファイルで保存して下さい。
自分はimgpreview.jsとして保存しました。

head内

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="js/imgpreview.js"></script>

body終了タグの上あたりに記述

<script>
jQuery.noConflict();
(function($){  
    
$('ul#first a').imgPreview();
$('ul#second a').imgPreview({
    imgCSS: { width: 500 }
});
$('ul#third a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    imgCSS: {
        height: 200
    },
    onShow: function(link){
        $(link).stop().animate({opacity:0.4});
        $('img', this).css({opacity:0});
    },
    onLoad: function(){
        $(this).animate({opacity:1}, 300);
    },
    onHide: function(link){
        $(link).stop().animate({opacity:1});
    }
});
$('ul#fourth a').imgPreview({
    containerID: 'imgPreviewWithStyles2',
    imgCSS: {
        height: 200
    },
    onShow: function(link){
        $('<span>' + $(link).text() + '</span>').appendTo(this);
    },
    onHide: function(link){
        $('span', this).remove();
    }
});
$('ul#fifth a').imgPreview({
    containerID: 'imgPreviewWithStyles3',
    srcAttr: 'rel',
    imgCSS: {
        height: 200
    },
    onShow: function(link){
        $('<span>' + link.href + '</span>').appendTo(this);
    },
    // When container hides: 
    onHide: function(link){
        $('span', this).remove();
    }
});


})(jQuery);
</script>

※これをhead内に記述すると動作しません。

後は指定されているid名で記述されたリンク先の要素がポップアップとして表示されます。
どの要素がどれに関連しているかはデモページをご覧下さい。