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/
89933 次阅读
36 条评论
0 条引用
晴 作者:yeyo   时间:13:31   Tags: , , , ,
kusanagi Email Homepage
2007.10.26 22:30
Good job :D
kusanagi
2007.10.26 22:29
Nice tutorial thank u !
My-Hou Email Homepage
2007.10.23 23:26
很好的东西!···love
taozhi11
2007.10.20 10:00
我的意思是插入在网页的图片自动适应版面的大小
弹出的图片才显示原始大小/
站长你的程序能解决这个问题不?
simear2004 回复于 2007.10.20 13:55
后台-参数设置-自动缩小图片设置一个适合你自己模板的值!
taozhi11
2007.10.19 14:44
站长
你页面上的图片和放大图片相差很大,
那个插在页面的图片怎么能设置成自动适应版面???
麻烦告诉一下在哪个位置修改
simear2004 回复于 2007.10.19 22:32
不太明白你的意思==''
大鯨魚 Homepage
2007.10.06 12:35
問題解決了,謝謝站長前輩的協助。
分页: 3/6 第一页 上页 1 2 3 4 5 6 下页 最后页
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
开启/隐藏 高级扩展