博客和文章中经常需要插入图片,但是图片的大小和文章的布局或博客页面的宽度不一定匹配,如果图片太大插入博客中为了能全部显示不得不将图片缩小,这样图片的显示效果就要大大折扣了,因此我在SDLog中增加了查看图片原图的功能。

功能介绍如下:

鼠标移动到图片上时显示图片边框,给读者提示,并在图片的左上方给出一个查看原图的按钮,点击这个按钮弹出一个的对话框显示这个图片的原图,当然按图片的原始大小显示。

这个功能使用JQuery实现的,我开发了一个JQuery的插件,当然这个插件是很简单,代码如下:

/***
name: jquery.sd.imgview.js
designer: kukei
Copyright(C) 2011 SupDo.com
Create Date: 2012-09-05
Modify Date: 2012-09-05
***/
    
(function($){ 
var settings = {
};
$.fn.imgview = function(options) {
    var elements = this;
    var $this = $(this);
    elements.each(function(){
        var self = this;
        var $self = $(self);
        var $selfWrap = $self.wrap($('<span />').css({position:'relative', display:'inline-block'})).parent();
        $selfWrap.append('<div style="background-color:#049FF1;color:#FFFFFF;padding:3px 8px;position:absolute;cursor:pointer;top:0px;left:0px;display:none;">查看原图</div>');
        $selfWrap.find('div').click(function(){
            var imgDlg = $.dialog({
                id:'imgDlg', title:'查看原图', content:'<div style="padding:5px;"><img src='+$self.attr('src')+'></div>',
                lock:true, width:$self.width()+'px', height:$self.height()+'px', ok:function(){}
            });
        });
        $selfWrap.bind("mouseover", function(event){
            $self.css({border: '1px solid #049FF1', padding:'1px', cursor:'pointer'});
            $(this).find('div').slideDown();
        });
        //鼠标移开事件
        $selfWrap.bind("mouseleave", function(event){
            $self.css({border:'', cursor: 'default'});
            $(this).find('div').slideUp();
        });
    });
}
})($);

下载最新完整代码可以到http://sdlib.supdo.com

PS:这个插件需要使用另一个JQuery插件lhgcore Dialog Plugin。