jquery 图片预览插件

        jquery的图片特效有着各种各样的插件,给用户的体验也非常舒适 , 可往往需要的只是最简单的预览效果 . 那么 这款imgPreview 插件就能满足你所需求的功能 :

原图片预览
$('ul#first a').imgPreview();

设定宽度
$('ul#second a').imgPreview({
    imgCSS: { width: 200 }
});

添加图片样式和渐隐效果
$('ul#third a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    // When container is shown:
    onShow: function(link){
        // Animate link:
        $(link).stop().animate({opacity:0.4});
        // Reset image:
        $('img', this).stop().css({opacity:0});
    },
    // When image has loaded:
    onLoad: function(){
        // Animate image
        $(this).animate({opacity:1}, 300);
    },
    // When container hides:
    onHide: function(link){
        // Animate link:
        $(link).stop().animate({opacity:1});
    }
});
/* CSS: (StyleSheet) */

#imgPreviewWithStyles {
    background: #222;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 15px;
    z-index: 999;
    border: none;
}
显示标题
+ Title below image
$('ul#fourth a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    // When container is shown:
    onShow: function(link){
        $('<span>' + link.title + '</span>').appendTo(this);
    },
    // When container hides:
    onHide: function(link){
        $('span', this).remove();
    }
});
/* CSS: (StyleSheet) */

#imgPreviewWithStyles {
    background: #222;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 15px;
    z-index: 999;
    border: none;
}

/* Text below image */
#imgPreviewWithStyles span {
    color: white;
    text-align: center;
    display: block;
    padding: 10px 0 3px 0;
}
链接可点击,并且可以预览图片
Website links + previews
<a href="http://google.com" rel="img/google.jpg">The Sun</a>
$('ul#fifth a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    /* Change srcAttr to rel: */
    srcAttr: 'rel',
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    // When container is shown:
    onShow: function(link){
        $('<span>' + link.href + '</span>').appendTo(this);
    },
    // When container hides:
    onHide: function(link){
        $('span', this).remove();
    }
});
/* CSS: (StyleSheet) */

#imgPreviewWithStyles {
    background: #222;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 15px;
    z-index: 999;
    border: none;
}

/* Text below image */
#imgPreviewWithStyles span {
    color: white;
    text-align: center;
    display: block;
    padding: 10px 0 3px 0;
}

最新jquery-imgPreview