这两天放假，就小休息了一下。搓了几把麻将，搓完后感慨啊，在家写代码真省钱。 
这一放假啊，就忘了原来的思路咯，不管了，走一步算一步吧。
一、文章缩略图
POST一张大图看一下，发现文章是显示的240*300的小图的。哇，WordPress这么智能， 自己生成缩略图？
可仔细一看HTML发现不对啊。竟然链接到了原图片地址，只是用width 和height属性限制了一下。
这样的话，文章里面放几张大图，网速慢一点的话这文章别人就不用看了。
因此得想个办法弄成缩略图才行的。手动上传缩略图那就太不智能咯。
按我的思路就是上传文件的时候自动生成缩略图，然后点击JS，再以遮罩层的方式载入原图片。
PHP那边的处理可能就稍微复杂一点咯，就先找个插件看看。
BAIDU 找到了 WP Thumbnails，看了下使用方法，原来他是在输出页面的时候进行处理的。测试一下效果。
来一张图片测试一下：
<a href="//localhost/opensource/wordpress/wp-content/uploads/2013/12/55a628d12d4dd20c9b5027bc.jpg">
<img class="alignnone size-medium wp-image-24" width="241" alt="SONY DSC"
src="//localhost/opensource/wordpress/wp-content/uploads/2013/12/55a628d12d4dd20c9b5027bc-241x300.jpg"></a>
看吧img 的 src这次变了，右键新窗口打开，果然是货真价实的缩略图啊。
点击看一下，竟然直接转向了<a>的href显示大图去？没有生成js代码吗？又这么不智能了？
不过好在是js代码够简单，那就自己动手吧。、
先去firebug 控制台打了个jQuery，竟然已经引用了jQuery，那就更省事了。
以迅雷不及掩耳盗铃之响叮当之势写好了代码。
CSS:
/* thumbnails */
#thu_mask {
-moz-user-select: none;
background: none repeat scroll 0 0 rgba(35, 35, 35, 0.7);
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 99999 !important;
}
#thu_mask .thu_loading {
background: url("img/img_loading.gif") no-repeat;
border: 1px solid;
display: block;
height: 100px;
left: 50%;
margin-left: -50px;
margin-top: -50px;
position: fixed;
top: 50%;
width: 100px;
}
#thu_mask img {
position: relative;
}
JS:
(function ($) {
var BLOG = window.BLOG || {},
_Thumbnails;
var _Thumbnails = function ($e) {
$e.click(function () {
if ($("#thu_mask").length == 0) {
// Default as loading image when loading the big graph.
$("body").append('.attr('href') + ')
');
$('#thu_mask').click(function (e) {
$("#thu_mask").remove();
})
.find('img')
.load(function (e) {
// Finish it later.
console.log('Load successfully.')
})
.error(function (e) {
// Finish it later.
console.log('Load image fialed.');
});
}
return false;
});
}
//Export
BLOG.Thumbnails = _Thumbnails;
window.BLOG = BLOG;
})(jQuery);
调动方法：
new BLOG.Thumbnails($('a[href$="jpg"],a[href$="png"],a[href$="gif"]')); 点击后来看看效果：
OK，到此可以先告一段落，至于做成向QQ空间相册那样，都只是时间问题，以后再继续完善。
二、缩略图extension
刚去聊了一会儿QQ，发现群秒的那个缩略图style很不错的。于是就手痒痒了一下，果断去下载个PS。操起这个四五年没有用过的神器啊。
如此看来犀利哥是不是更加有质感了？关键是加入了QQ群里图片的浏览功能，可以看方便查看本文的所有图片。鼠标移到图片左边就会显示左箭头，移到右边就会显示右箭头。
另外加入了图片加载提示功能。网速慢的时候，你就可以去数我的loading图标转了多少圈了。
代码改得挺多的。
CSS：
/* thumbnails */
#thu_mask {
-moz-user-select: none;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 99999 !important;
}
#thu_mask .thu_loading {
background: url("img/loading_100x100.gif") no-repeat;
display: block;
height: 100px;
left: 50%;
position: fixed;
top: 50%;
width: 100px;
}
#thu_mask img {
position: absolute;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
display:none;
border:1px solid #EEEEEE;
box-shadow: 1px 1px 1px #B3B3B3;
}
#thu_mask .thu_left {
background: url("img/thu_left.png") no-repeat;
cursor: pointer;
opacity: 0;
height: 50px;
width: 50px;
position: absolute;
z-index: 1000;
}
#thu_mask .thu_right {
background: url("img/thu_right.png") no-repeat;
cursor: pointer;
opacity: 0;
height: 50px;
width: 50px;
position: absolute;
z-index: 1000;
}
JS:
(function ($) {
var BLOG = window.BLOG || {},
_Thumbnails;
var _Thumbnails = function ($e) {
var len = $e.length, index = 0, bodyHeight, bodyWidth;
$e.click(function () {
index = $e.index(this);
bodyHeight = document.documentElement.clientHeight || document.body.clientHeight;
bodyWidth = document.documentElement.clientWidth || document.body.clientWidth;
if ($("#thu_mask").length == 0) {
var img = $(''),
loading = $(''),
thu_left = $(''),
thu_right = $(''),
thu_mask = $('');
// Default as loading image when loading the big graph.
$("body").append(thu_mask);
thu_mask.append(img)
.append(loading)
.click(function (e) {
thu_mask.remove();
});
loading.css({top: (bodyHeight - loading.height()) / 2, left: (bodyWidth - loading.width()) / 2});
img.load(function (e) {
var heightspace = (bodyHeight - img.height()) / 2,
widthspace = (bodyWidth - img.width()) / 2,
thu_lr;
img.css({
top: heightspace,
left: widthspace
}).show();
thu_mask.append(thu_left).append(thu_right);
thu_lr = $('#thu_mask .thu_left, #thu_mask .thu_right');
thu_lr.css({top: (bodyHeight - 50) / 2});
// Prevent bidning events more times
if (!img.attr('init')) {
thu_lr.hover(function(){
$(this).animate({opacity:0.9});
}, function(){
$(this).animate({opacity:0});
})
.click(function (e) {
var left = $(this).hasClass('thu_left'), src, tmp
if (left)
index = (index === 0) ? (len - 1) : (index - 1);
else
index = (index === len - 1) ? 0 : (index + 1);
src = $e.eq(index).attr('href');
loading.show();
// Load the new image in a temporary dom, to prevent the slow network.
tmp = $('')
.load(function () {
img.attr('src', src); loading.hide();
})
.error(function () {
// Do it later
//loading.hide();
});
// Stop propagation
e = e || window.event;
if (window.event) // IE
e.cancelBubble = true;
else // FF
e.stopPropagation();
});
img.attr('init', 1);
}
// Set the position of the arrows and set the attributes for them.
thu_left.css({left: (widthspace + 10)}).attr('title', ((index === 0) ? len : (index - 1)) + '/' + len);
thu_right.css({left: (widthspace + img.width() - 10 - 50)}).attr('title', ((index === len - 1) ? '0' : (index + 1)) + '/' + len);
loading.hide();
// Finish it later.
})
.error(function (e) {
// Finish it later.
console.log('Load image fialed.');
});
}
return false;
});
}
//Export
BLOG.Thumbnails = _Thumbnails;
window.BLOG = BLOG;
})(jQuery);
结束语：第一次边写代码边写日志，发现日志真的比代码难写太多了。这一章开始贴了一些js代码了，估计以后会更多的。不过到现在为止还是没接触到啥WordPress的东西，该是深入的时候咯。
喜欢的这代码朋友心理对我默默说一句“我爱你”，然后你就可以直接拿过去用，不然不给。
LeetCode 每日一题 — Trips and Users 
游客：pm2 能配合谷歌浏览器的这
0个访客评论