…ここからが続き

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名で記述されたリンク先の要素がポップアップとして表示されます。
どの要素がどれに関連しているかはデモページをご覧下さい。