16
Jul
说明:
这是一个很好的图片浏览特效,与lightbox特效相比,最大的优势在于它不需要将网页加载完就能加载特效了
先看演示效果:请点击图片并可拖动

1、解压得到两个文件夹,上传到blog根目录覆盖原文件(注意备份inc\ubb.php)
2、进入后台,创建一个head模块,代码如下:
注:你可以修改上面的样式使其更匹配你的模板,如果你不是很懂CSS,那么只建议你修改上面样式表中的颜色部分。
3、如果你的模版CSS文件定义了如下的图片边框样式:
例:
转载请注明:汉化+移植:叶阳博客 http://blog.nzye.com
下载已更新:http://blog.nzye.com/highslide-333/
这是一个很好的图片浏览特效,与lightbox特效相比,最大的优势在于它不需要将网页加载完就能加载特效了
先看演示效果:请点击图片并可拖动

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>
<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;
}
请注释或删除!!!!border: 1px solid #E7F1D4;
padding: 3px;
background-color: #FFFFFF;
}
转载请注明:汉化+移植:叶阳博客 http://blog.nzye.com
下载已更新:http://blog.nzye.com/highslide-333/








作者:
jazibal模版FOR Bo-blog 2.0.3(会员下载)
Joomla1.0.13_cn-utf-8_By_yeyo美化安装包


我打开Bo自带的图片缩放的话访问者还能看到原始大小的图片么?
能看到原始大图
我的照片是用的yupoo,那你的意思是去yupoo的个人首页然后再在某个地方添加标签??