1、因某些原因,本站从即日起所有评论、留言经审核后才能在相应页面显示,敬请谅解!
2、为了不影响站点的速度,所有图片链接组不在首页显示!
3、本站不接受PR小于3、日访问量小于500及非博客类站点链接,以前有链接的除外!
4、本站部份资源来源于网络,如有侵权请及时与我联系!
5、本站空间由“逸鸿网络”提供,在此表示感谢!
6、强烈建议使用Firefox、Opera、Safari及IE7以上的浏览器访问,以获得最佳浏览质量!
7、本站所有内容,包括文字、图片等,均完全遵循《创作共用约定》,任何个人或组织违反此约定,本站保留诉诸法律的权利!
公告面板 开启/隐藏
用户名   密码   
16 Jul

highslide图片浏览特效 For Bo-Blog

分类:我的作品   出处:本站原创         | |
说明:
这是一个很好的图片浏览特效,与lightbox特效相比,最大的优势在于它不需要将网页加载完就能加载特效了
先看演示效果:请点击图片并可拖动
Highslide JS

1、解压得到两个文件夹,上传到blog根目录覆盖原文件(注意备份inc\ubb.php)
2、进入后台,创建一个head模块,代码如下:
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>
<style type="text/css">
.highslide {
  cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide-active-anchor img {
  visibility: hidden;
}
.highslide img {
    border: 1px solid #666666;
    padding: 3px;
    background-color: #292929;
}
.highslide:hover img {
    border: 1px solid #666666;
    padding: 3px;
    background-color: #FFFFFF;
}
.highslide-image {
    border: 1px solid white;
    padding: 3px;
    background-color: #FFFFFF;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 1px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
  color: black;
  font-size: 12pt;
  font-family: sans-serif;
  font-weight: bold;
    text-decoration: none;
  padding: 2px;
  border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
  font-size: 12px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}

a.highslide-full-expand {
  background: url(highslide/graphics/fullexpand.gif) no-repeat;
  display: block;
  margin: 0 10px 10px 0;
  width: 34px;
  height: 34px;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
</style>

注:你可以修改上面的样式使其更匹配你的模板,如果你不是很懂CSS,那么只建议你修改上面样式表中的颜色部分。

3、如果你的模版CSS文件定义了如下的图片边框样式:
例:
.insertimage {
    border: 1px solid #E7F1D4;
    padding: 3px;
    background-color: #FFFFFF;
}
请注释或删除!!!!

转载请注明:汉化+移植:叶阳博客    http://blog.nzye.com
下载已更新http://blog.nzye.com/highslide-333/
89326 次阅读
36 条评论
0 条引用
晴 作者:yeyo   时间:13:31   Tags: , , , ,
送仔
2008.04.29 16:58
你好:如何作多圖效果,點選放大可以用鍵盤方向鍵選擇下一張圖,謝謝
yeyo 回复于 2008.04.29 17:58
本来就具备这个功能啊,前提是你要显示的图片必须在当前页。
zyb Homepage
2008.04.12 11:00
安装完了没有反映是怎么回事呢...uplook
yeyo 回复于 2008.04.12 18:13
那就是没安对,或是没有使用[img] [ /img]标签插入图片
皮卡西 Email
2008.01.17 13:43
这个功能和Bo-blog的图片缩放有冲突么?
我打开Bo自带的图片缩放的话访问者还能看到原始大小的图片么?
yeyo 回复于 2008.01.17 14:54
没冲突
能看到原始大图
老羊
2008.01.05 10:22
请问,我安装后,当鼠标悬停在图片上,整个页面会晃动一下,为什么?
yeyo 回复于 2008.01.05 18:42
给个地址看看
瓜哈哈
2007.12.24 22:40
汗```摁啊..还是谢谢你..
瓜哈哈 Homepage
2007.12.24 19:27
汗.不懂.还请讲明白些个```
我的照片是用的yupoo,那你的意思是去yupoo的个人首页然后再在某个地方添加标签??
yeyo 回复于 2007.12.24 19:40
我没用过yupoo,请联系插件作者协助你吧
分页: 1/6 第一页 1 2 3 4 5 6 下页 最后页
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
开启/隐藏 高级扩展