'图片'相关日志共 4篇

  1. 2010/04/02 TC Plugin Lazy Load延迟载入网页图片 (1)
  2. 2010/02/17 茶屋优化 jqSlideShow
  3. 2009/07/12 一切·依旧如故 (24)
  4. 2009/06/29 新鲜奇程序 (4)
Textcube/Plugin2010/04/02 22:54

这个插件也是L.ken同学开发的，这个插件的作用是它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

插入圖像


支持的浏览器有：IE、Firefox、Chrome

适用的TC版本是: 1.76+

Demo：http://www.appelsiini.net/projects/lazyload/enabled.html

全网页有效

根据L.Ken同学的说法，这个插件会和BBCode起冲突，因为本插件与BBCode插件都是使用jquery，重覆引入导致。未解决..待续)

FL_LazyLoad.7z


安装方法，解压文件上传到plugins目录，在后台启用即可。

2010/04/02 22:54 2010/04/02 22:54
Posted by X先生
TAG , , , ,
No Trackback a comment
Textcube/Optimization2010/02/17 03:50

插入圖像
添加这个图片的展示花了几天的时间，刚开始插件是能个正常在风格文件里面进行调用的。但是图片都不能显示，折腾了几天突然记起还要修改一个参数。

冂

把安装方法记录一下，留作以后的使用备份。

这个图片展示是使用jquery+xml进行调用展示，原来是在WP中使用的，不过貌似自己在TC也能调用成功。
首先下载下面的程序文件：
latest.zip
首先修改js/jqslideshow文件，将URI处修改为自己的网站地址，var slideConfigURL处修改为自己网站的slide.xml文件地址（这里使用相对路径）
1. 如何安装
首先解压缩并且上传所有文件到你的网站空间上。
然后在你的页面的HTML代码的<head>段里导入以下文件：

style/style.css
js/jquery.js
js/jqslideshow.js

例如, 如果你在使用WordPress博客程序，并且你把刚才解压的文件上传到了‘wp-content/jqslideshow'目录下。
那么你可以在你的页面中加入如下的代码：

<link href="/wp-content/jqslideshow/style/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/wp-content/jqslideshow/js/jquery.js"></script>
<script type="text/javascript" src="/wp-content/jqslideshow/js/jqslideshow.js"></script>

最后在你的页面里添加标签'<div id="jqSlideShow"></div>'到任何你想要的地方，添加过标签的地方就会出现这个幻灯浏览器

2. 如何配置
有两个部分需要你进行配置
首先是配置文件的路径。在文件'js/jqslideshow.js'里面，你可以在前面几行找到如下代码：
var slideConfigURL = '/wp-content/jqslideshow/slide.xml';

你需要将他设置为slide.xml文件所在的路径。
然后, 所有的选项都保存在'slide.xml'文件ilmian。你可以通过这个文件配置如下选项：
在 'configuration' 段:
* Fading time 图像淡入淡出的时间
* Sliding time 图像切换的时间
* Number of thumbs 导航条上缩略图的数量
* Thumb change time 导航条上缩略图移动速度
在 'slideItems' 段
* Link 每个图像的链接
* Image path 每个图像的路径
* Thumb path 每个缩略图路径
* Description 每个图像的描述
1. How to install
First, unzip and upload the files to you web site space.
Second, import the files below into the <head> segement of your page's code

style/style.css
js/jquery.js
js/jqslideshow.js

For example, if you using a WordPress weblog application and you put all the files you just unzipped at
'wp-content/jqslideshow'. Then you should add these code into your page:

<link href="/wp-content/jqslideshow/style/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/wp-content/jqslideshow/js/jquery.js"></script>
<script type="text/javascript" src="/wp-content/jqslideshow/js/jqslideshow.js"></script>

Third, put the tag '<div id="jqSlideShow"></div>' at any place you want in your page. After that this tag
will become the amazing slide show!

2. How to config
There are two parts you need to focus on.
Fisrt, the path configuration file. Look in the file 'js/jqslideshow.js', you will found the code below at
the first servral lines:
var slideConfigURL = '/wp-content/jqslideshow/slide.xml';

What you need to do is just to make sure the path is validate for the 'slide.xml' file.
Second, the options of this slide show are all saved in file 'slide.xml'. You can use this file to config
these options below:
In 'configuration' segement:
* Fading time The time of fading in and out
* Sliding time The time of the auto sliding
* Number of thumbs The number of thumbs on the navigator
* Thumb change time The thumb moving speed
In 'slideItems' segement
* Link The link of each picture
* Image path The path of each image
* Thumb path The path of each thumb image
* Description The description of each image
2010/02/17 03:50 2010/02/17 03:50
Posted by X先生
TAG , , , , ,
No Trackback No Comment
Life/Mood2009/07/12 07:42

前段时间X先生的夏日茶屋出了点问题，搞得X先生很是紧张茶屋的营业额也降了下来了！

囧.............

罪魁祸首就是空间的主机的图片和Flash都不能显示了，引导页面白茫茫的一片；整个茶屋黑乎乎的，也出现了好多叉烧包！

这种情况原来也出现过一次，不过在第二天就解决了，X先生就不在太放在心上。那个知道这次居然这么猛，效果持续了差不多一个星期。刚刚开始X先生还以为只是有自己的主机出现这种问题!上网查了一下和自己空一个服务器的网站，他们的也出现了这种情况。

X先生马上到门户通的网站去看看到底是出现了什么问题，那个知道连门户通的网站都打不开了==;在网上看了一下相关的资料大概是门户通的Y2数据库出现问题了

囧..........

把X先生这段时间马上找主机，本来是找到了一个蛮不错的。（申请到了7天的体验空间，能完美的支持beta4）都打算买了！那知道和timto童靴说了一下，他说那个主机服务商连网站的备案都没有过，又把X先生的心情从天堂跌入地狱。去仔细看了一下发现果然是真的，PING了一下主机发现服务器是放在河南的；X先生马上确定不买了！！昨天收到了一份邮件，是由门户通寄出了，原来是网络的主机进行割接

到今天茶屋的图片和Flash已经能正常的显示。

一切·依旧如故



(*^__^*)...嘻嘻

下面的邮件的图片




music name:Thank You
                                                                                                          閃光
2009/07/12 07:42 2009/07/12 07:42
Posted by X先生
TAG , , , , , , ,
No Trackback Comment 24
Web2009/06/29 21:17

铛铛铛铛

在这里X先生给大家介绍一个有趣的程序，他就是asaph。这个程序也是X先生在网络上找到的，不过貌似没有中文教程在这里X先生给大家介绍一下他的安装方法和进阶使用吧！

asaph是什么啊

Asaph根据官方介绍:它是一个用来搜集外部链接及图片的微型博客系统.允许你在任何其他网站来发布你要的图片或是链接.也就是一个微型的图片博客

插入圖像


Asaph最具有特色的就是有发布文章的Bookmarklet,无论我在任何页面,只要点一下Bookmarklet,再选择要发布的图片,再点确定,就完成了整个发布文章的过程.看下图

插入圖像


如何安装

首先我们要先下载asaph程序（现在的版本是1.0，很新鲜哟）

点击下载

大家下载完后就会看到这个程序只有50kb，很短小精悍吧！大家别看它小，它可是麻雀虽小五脏俱全哟

这个程序是基于PHP+Mysql环境搭建的，请大家确保自己的空间支持哈

下载完后大家修改asaph\lib下的asaph_config.class.php文件

需要修改的地方有public static $title、public static $domain、public static $domain和public static $db几个项目。

㈠
修改public static $title = 'Asaph ~ Phoboslab';
将引号里面的Asaph ~ Phoboslab修改为自己的网站标题

㈡
修改public static $domain = 'subdomain.yourdomain.com';
将引号里面的subdomain.yourdomain.com修改为自己的网站地址

㈢
修改public static $domain = '/asaph/';
将引号里面的asaph修改为自己设定的文件夹，如果采用默认的文件夹此步可以省略
注意：引号里面的两个//切勿删除

㈣
最后修改public static $db = array( 里面有五个选项
'host' => 'localhost',
修改'localhost'引号里面的localhost为自己的Mysql数据库地址
'database' => 'asaph',
修改'asaph'引号里面的asaph为自己的Mysql数据库名称
'user' => 'root',
修改'root'引号里面的root为自己的Mysql数据库用户名
'password' => '',
在引号里面填入自己的Mysql数据库密码
'prefix' => 'asaph_'
修改'asaph_'引号里面的asaph_为此程序在Mysql数据库中建立的表名一般建议采用默认不修改

最后把文件保存上传到自己的空间

接着在浏览器打开目录下的admin/install.php进行安装

在输入用户和密码后我们就可以享受asaph给我们到来的愉快之旅啦

如何使用

如图所示,在后台管理左侧,用鼠标将bookmarklet下的ASAPH拉到你的书签栏,或是加入书签.接着你可以去flickr等图片网站,
看到喜欢的眼睛发亮的图片,就点一下那个书签.OK,懂了吧?(最好使用现代浏览器,不要使用IE)



视频

Asaph Microblogging from Dominic Szablewski on Vimeo.

进阶使用（将Asaph整合到Wordpress中）

插入圖像


其实接下来很简单,之需要一个步骤,就是复制下面的代码,放到你的WordPress主题下的sidebar.php(或是其他你要显示的地方).

请留意代码中的注释部分需要自行修改,也就是自己的feed地址以及显示的图片数量.
在将代码复制到模版文件中之后,如果一切顺利,那么你将会看到9张图片了,至于说大小问题,你需要在CSS中定义width:80px之类的.

写在最后的话

Asaph的作者也说明了,这个博客系统就是这么简单,简单到后台只有几个按钮.而这就是他做这个系统的目标.Asaph也很好的完成了他的工作.在我看来,用来制作这种图片搜集博客,Asaph真的是很好用,很容易用.所以喜欢的朋友赶紧试试吧.

注意：此程序会将图片存在自己程序的data目录下，空间太小的朋友要量力而行哟，不要看到漂亮的PP就全刮了，到时候自己的空间不够用就不能说X先生啦！
文章部分图片取自ediyang

music name：傀儡咒
                                                                                                         開心

2009/06/29 21:17 2009/06/29 21:17
Posted by X先生
TAG , , , , ,
No Trackback Comment 4