Initial commit

SlimBox2/Plugin.php

@@ -0,0 +1,145 @@
+<?php
+/**
+ * SlimBox2 精致小巧的灯箱效果，需jQuery的支持。
+ * 
+ * @package SlimBox2
+ * @author Ryan, 冰剑
+ * @version 1.0.7
+ * @link http://www.binjoo.net/
+ */
+class SlimBox2_Plugin implements Typecho_Plugin_Interface
+{
+    /**
+     * 激活插件方法,如果激活失败,直接抛出异常
+     *
+     * @access public
+     * @return void
+     * @throws Typecho_Plugin_Exception
+     */
+    public static function activate() {
+        Typecho_Plugin::factory('Widget_Archive')->header = array('SlimBox2_Plugin', 'headlink');
+        Typecho_Plugin::factory('Widget_Archive')->footer = array('SlimBox2_Plugin', 'footlink');
+    }
+   
+    /**
+     * 禁用插件方法,如果禁用失败,直接抛出异常
+     *
+     * @static
+     * @access public
+     * @return void
+     * @throws Typecho_Plugin_Exception
+     */
+    public static function deactivate(){
+	}
+   
+    /**
+     * 获取插件配置面板
+     *
+     * @access public
+     * @param Typecho_Widget_Helper_Form $form 配置面板
+     * @return void
+     */
+    public static function config(Typecho_Widget_Helper_Form $form){
+        $selectImg = new Typecho_Widget_Helper_Form_Element_Text('selectImg',NULL,'.post-content img','范围选择器', '根据你所使用的主题而修改，一般只需修改.entry_content部分即可。');
+        $form->addInput($selectImg);
+
+        $overlayOpacity = new Typecho_Widget_Helper_Form_Element_Text('overlayOpacity',NULL,'0.75','遮罩层透明度', '默认为0.75，1 为不透明，0 为完全透明。');
+        $overlayOpacity->input->setAttribute('class', 'mini');
+        $form->addInput($overlayOpacity->addRule('isInteger','请输入0-1之间的数字，推荐默认0.75。')->addRule('required', '请设置遮罩层透明度，推荐默认0.75。'));
+
+        $overlayFadeDuration = new Typecho_Widget_Helper_Form_Element_Text('overlayFadeDuration',NULL,'400','遮罩层隐现速度', '单位为毫秒，默认为400，禁用动画效果为1。');
+        $overlayFadeDuration->input->setAttribute('class', 'mini');
+        $form->addInput($overlayFadeDuration->addRule('isInteger','请输入数字，推荐默认400毫秒。')->addRule('required', '请设置遮罩层隐现速度，推荐默认400毫秒。'));
+        
+        $resizeDuration = new Typecho_Widget_Helper_Form_Element_Text('resizeDuration',NULL,'250','灯箱大小变化速度', '单位为毫秒，默认为250，禁用动画效果为1。');
+        $resizeDuration->input->setAttribute('class', 'mini');
+        $form->addInput($resizeDuration->addRule('isInteger','请输入数字，推荐默认250毫秒。')->addRule('required', '请设置灯箱大小变化速度，推荐默认250毫秒。'));
+
+        $imageFadeDuration = new Typecho_Widget_Helper_Form_Element_Text('imageFadeDuration',NULL,'300','图片滑出速度', '单位为毫秒，默认为300，禁用动画效果为1。');
+        $imageFadeDuration->input->setAttribute('class', 'mini');
+        $form->addInput($imageFadeDuration->addRule('isInteger','请输入数字，推荐默认300毫秒。')->addRule('required', '请设置图片滑出速度，推荐默认300毫秒。'));
+
+        $title = new Typecho_Widget_Helper_Form_Element_Radio('title',
+            array('true' => '显示',
+                  'false' => '隐藏'),
+                  'true', '标题栏','隐藏后将不会显示标题、计数器、CLOSE关闭按钮。');
+        $form->addInput($title);
+
+        $captionAnimationDuration = new Typecho_Widget_Helper_Form_Element_Text('captionAnimationDuration',NULL,'200','标题栏滑出速度', '单位为毫秒，默认为200，禁用动画效果为1，标题栏隐藏后此设置失去效果。');
+        $captionAnimationDuration->input->setAttribute('class', 'mini');
+        $form->addInput($captionAnimationDuration->addRule('isInteger','请输入数字，推荐默认200毫秒。')->addRule('required', '请输入数字，推荐默认200毫秒。'));
+
+        $loop = new Typecho_Widget_Helper_Form_Element_Radio('loop',
+            array('true' => '是',
+                  'false' => '否'),
+                  'false', '图片循环','浏览至页面中第一张或最后一张图片时，是否可以循环。');
+        $form->addInput($loop);
+
+        $counterText = new Typecho_Widget_Helper_Form_Element_Text('counterText',NULL,'Image {x} of {y}','计数器提示', '<b>{x}</b>为当前图片索引，<b>{y}</b>为当前页面总图片数。<br />填写 <b>false</b> 是关闭此功能，不显示任何计数。');
+        $form->addInput($counterText->addRule('required', '如果你不知道写什么，建议填写默认的：Image {x} of {y}。'));
+
+        $jquerySelect= new Typecho_Widget_Helper_Form_Element_Radio('jquerySelect',
+            array('true' => '是',
+                  'false' => '否'),
+                  'false', '加载jQuery库','如果主题本身已经引用了jQuery库，那么请无视此选项。');
+        $form->addInput($jquerySelect);
+    }
+
+    /**
+     * 个人用户的配置面板
+     *
+     * @access public
+     * @param Typecho_Widget_Helper_Form $form
+     * @return void
+     */
+    public static function personalConfig(Typecho_Widget_Helper_Form $form){} 
+
+    /**
+     * 头部样式
+     *
+     * @access public
+     * @param unknown $headlink
+     * @return unknown
+     */
+    public static function headlink($cssUrl) {
+        $Options = Helper::options();
+        $Settings = $Options->plugin('SlimBox2');
+        //$Archive = Typecho_Widget::widget('Widget_Archive');
+        $SlimBox2_url = $Options->pluginUrl .'/SlimBox2/';
+        $links = '<link rel="stylesheet" type="text/css" href="'.$SlimBox2_url.'css/slimbox2.css" />
+';
+        if($Settings->jquerySelect != "false"){
+            $links .= '<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
+';
+        }
+        echo $links;
+    }
+
+    /**
+     * 底部脚本
+     *
+     * @access public
+     * @param unknown $footlink
+     * @return unknown
+     */
+    public static function footlink($links) {
+        $Settings = Helper::options()->plugin('SlimBox2');
+        $SlimBox2_url = Helper::options()->pluginUrl .'/SlimBox2/';
+        $links= '<script type="text/javascript" src="'.$SlimBox2_url.'js/slimbox2.js"></script>';
+        $links.= '<script type="text/javascript" id="slimbox">';
+        $links.= 'jQuery(function($) {
+            $("'.$Settings->selectImg.'").slimbox({
+                overlayOpacity: '.$Settings->overlayOpacity.',
+                overlayFadeDuration: '.$Settings->overlayFadeDuration.',
+                resizeDuration: '.$Settings->resizeDuration.',
+                imageFadeDuration: '.$Settings->imageFadeDuration.',
+                captionAnimationDuration: '.$Settings->captionAnimationDuration.',
+                loop:'.$Settings->loop.',
+                counterText:"'.$Settings->counterText.'",
+                showTitle: "'.$Settings->title.'"
+            });
+            });';
+        $links.= '</script>';
+        echo $links;
+    }
+}

SlimBox2/README.md

@@ -0,0 +1,47 @@
+## 插件说明 ##
+
+ - 版本: v1.0.7
+ - 作者: [冰剑](https://github.com/binjoo)
+ - 主页: <https://github.com/binjoo/SlimBox2-for-Typecho>
+
+## 使用方法 ##
+
+ 1. 下载插件
+ 2. 如果安装有老版本，请先卸载老版本，再删除插件文件
+ 3. 将插件上传到 /usr/plugins/ 这个目录下
+ 4. 登陆后台，在“控制台”下拉菜单中进入“插件管理”
+ 5. 启用当前插件
+
+## 更新记录 ##
+
+#### v1.0.7(18-5-24)（[@Ryan](https://github.com/ryanfwy)）
+ - 修改选择器图片链接为 `img` 的 `src` 属性，无需再为图片嵌套链接；
+ - 修改灯箱自适应逻辑，更合理地缩放图片；
+ - 修改部分显示样式；
+ - 去掉对移动端不友好的 `hover` 样式；
+ - 还原标题栏（前面的版本无法输出标题和页码），并修改为单行显示；
+ - 灯箱展示时禁止滑动，屏幕旋转时关闭展示；
+ - 增加`灯箱大小变化速度`选项；
+ - 初始化 `script` 增加 `id="slimbox"` 属性，便于 `pjax` 初始化。
+   
+#### v1.0.6(17-2-2)（[@羽中](https://github.com/jzwalk)）
+ - jquery库从google改为staticfile.org，默认选择.post-content适应1.0主题。
+
+#### v1.0.5
+ - 使用[林木木的代码](http://immmmm.com/slimbox2-js-picture-box-adaptive.html)修复`图片灯箱自适应`功能；
+
+#### v1.0.4
+ - 加入标题栏显示隐藏；
+
+#### v1.0.3
+ - 加入图片循环；
+
+#### v1.0.2
+ - 加入Google CDN jQuery库；
+
+#### v1.0.1
+ - 加入插件后台；
+ - 加入自定义计数器提示；
+
+#### v1.0.0
+ - 实现灯箱展示效果；

SlimBox2/css/slimbox2.css

@@ -0,0 +1 @@
+#lbOverlay{position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:#000;}#lbCenter,#lbBottomContainer{position:fixed;z-index:9999;overflow:hidden;background-color:#fff;-moz-border-radius:3px 3px 3px 3px;}.lbLoading{background:#fff url(loading.gif) no-repeat center;}#lbImage{position:absolute;left:0;top:0;border:3px solid #fff;background-repeat:no-repeat;}#lbPrevLink,#lbNextLink{display:block;position:absolute;top:0;width:50%;outline:none;}#lbPrevLink{left:0;}/*#lbPrevLink:hover{background:transparent url(prevlabel.gif) no-repeat 0 15%;}*/#lbNextLink{right:0;}/*#lbNextLink:hover{background:transparent url(nextlabel.gif) no-repeat 100% 15%;}*/#lbBottom{font-family:Verdana,Arial,Geneva,Helvetica,sans-serif;font-size:12px;color:#666;line-height:1.4em;text-align:left;border:5px solid #fff;border-top-style:none;}#lbCloseLink{display:block;float:right;width:66px;height:22px;background:transparent url(closelabel.gif) no-repeat center;margin:5px 0;outline:none;}#lbCaption{float:left;}#lbNumber{float:right;}#lbCaption{font-weight:bold;}

SlimBox2/js/slimbox2.js

@@ -0,0 +1 @@
+(function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new Image(),J=new Image(),H,a,g,p,I,d,G,c,A,K,Z=navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)?true:false;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />').click(C)[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));g=w('<div id="lbImage" />').appendTo(a).append(p=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(e)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([A=w('<div id="lbCaption" />'),K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0];var evt="onorientationchange"in window?"orientationchange":"resize";window.addEventListener(evt,function(){if(w(H)[0].style.display!="none"){w(H).trigger("click")}})});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=window.innerHeight/2-(u.showTitle=="true"?8:0);L=u.initialWidth;r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:L,height:r,marginLeft:-L/2}).show();v=m||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();j(1);f=O;u.loop=u.loop&&(f.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.src,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function j(M){if(M){document.ontouchmove=function(){return false};document.ontouchmove=function(){return false};w("object").add(m?"select":"embed").each(function(O,P){s[O]=[P,P.style.visibility];P.style.visibility="hidden"})}else{document.ontouchmove=function(){return true};w.each(s,function(O,P){P[0].style.visibility=P[1]});s=[]}var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",o)}function o(O){var N=O.which,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?e():(M(N,u.previousKeys)>=0)?B():null}function B(){return b(x)}function e(){return b(D)}function b(M){if(M>=0){F=M;n=f[F][0];x=(F||(u.loop?f.length:0))-1;D=((F+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new Image();k.onload=i;k.src=n}return false}function i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:"","background-size":"100%"});var P=k.width,M=k.height,N=window.innerWidth,O=window.innerHeight;if(P<N*0.9&&M<O*0.9){var z=1;if(P*1.3<N*0.9&&M*1.3<O*0.9){z=1.3}w(p).width(P*z);w([p,I,d]).height(M*z)}else{var R=P/M;var M=Z?0.9:0.75;if(O*R<=N){w(p).width(O*R*M);w([p,I,d]).height(O*M)}else{w(p).width(N*0.9);w([p,I,d]).height(N/R*0.9)}}if(u.showTitle=="true"){w(A).html(f[F][1]||"");w(K).html(u.counterText.replace("{x}",F+1).replace("{y}",f.length)||"")}else{w(c).css({display:"none"})}if(x>=0){t.src=f[x][0]}if(D>=0){J.src=f[D][0]}L=g.offsetWidth;r=g.offsetHeight;var Q=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:Q},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:Q+r,marginLeft:-L/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function h(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function q(){k.onload=null;k.src=t.src=J.src=n;w([a,g,c]).stop(true);w([I,d,g,G]).hide()}function C(){if(F>=0){q();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,j)}return false}})(jQuery);