个性blog之简易相册
blog园系列的blog网站用得都是一套程序,简洁,实用,速度快,用起来当真一个爽字了得,虽然blog也提供相册功能,却无法在首页展示出来,看了一下帮助,在子标题与公告可以插入代码,一时兴起找了些代码做了这个相册展示栏,效果如下。
第一步:我们需要添加一个栏目。由于此blog程序无法添加栏目,我们只能在代码里面实现,大家可以看下公告栏的html代码。
<div class = "listtitle">公告</div>
<ul class = "list">
<li class = "listitem">
公告内容
</li>
</ul>进行以下修改即可多出一个栏目来:
<div class = "listtitle">公告</div>
<ul class = "list">
<li class = "listitem">
<!--------------公告内容处添加开始------>
公告内容
</li>
</ul>
<div class = "listtitle">相册</div>
<ul class = "list">
<li class = "listitem">
相册内容
<!---公告内容处添加结束---------------->
</li>
</ul>
<option value="图片地址" >文本说明</option>2 相册高宽控制在脚本注释处
3 如果需要实现展示小图和文本,点击显示大图,则添加一个select name="Bpics",里面的value存放大图地址,代码中将 "links+=escape(Slp.options[i].value);" 中Slp改为Sbp即可
第一步:我们需要添加一个栏目。由于此blog程序无法添加栏目,我们只能在代码里面实现,大家可以看下公告栏的html代码。
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
由于<li>是添加一个圆点,无法让图像居中,所以可以删除相册内容之上的标记或者将标记移到相册内容之下。
第二步:添加相册展示代码。相册当然是动态的才好看,于是搜到一个“Flash和JS实现的图片幻灯片切换特效”,看了下效果不错。于是借用了下,网址是:http://www.webjx.com/htmldata/2005-10-01/1128143647.html
不过我实际用起来感觉很麻烦,添加张图片就需要修改好几个地方,于是进行了修改,以下是目前我首页使用的代码,添加在上面的"相册内容处"即可:
![](/Images/OutliningIndicators/ContractedBlock.gif)
这里代码只需要注意几点
1. 我添加了一个隐藏的select列表,用于添加图片。添加图片时,只需要添加以下代码到select里即可
![](/Images/OutliningIndicators/None.gif)
3 如果需要实现展示小图和文本,点击显示大图,则添加一个select name="Bpics",里面的value存放大图地址,代码中将 "links+=escape(Slp.options[i].value);" 中Slp改为Sbp即可