码疯窝

这两天放假,就小休息了一下。搓了几把麻将,搓完后感慨啊,在家写代码真省钱。

这一放假啊,就忘了原来的思路咯,不管了,走一步算一步吧。
一、文章缩略图
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('
'); $('#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的东西,该是深入的时候咯。
喜欢的这代码朋友心理对我默默说一句“我爱你”,然后你就可以直接拿过去用,不然不给。
继续查看有关 日志连载的文章

0个访客评论