用Javascript重新对相册图片进行排序,布局,配色。比如通过调整宽度设置每行显示照片数码,还可以提取出UBB或者HTML贴图代码,方便转载
效果演示可以看我的相册
第一步:先在自定义CSS栏,加入相册的样式控制:
ul.ablum {list-style-type:none;display:inline;}
ul.ablum li{float:left;width:155px;text-align:center;border-top:10px solid #fff;
border-left:5px solid #fff;
border-right:5px solid #fff;padding-top:10px;
background:#EEECED;height:160px}


颜色,宽度,高度可以自己定义

第二步:在公告栏加入一下JS代码:

<SCRIPT>
function getimg(){

d=document.getElementById("main");
g=d.getElementsByTagName(‘img’);
for(s=0;s<g.length;s++){
var gu=g[s].src
if(g[s].tagName!=’!'){
if(g[s].width>"550"){
g[s].width="550"

g[s].title="点击看大图"+gu
g[s].onclick=function() { window.open(this.src); }
g[s].style.cursor="pointer"

}
}}

}

function runpp(k){
var demowin=window.open()
demowin.document.open();
demowin.document.write(k)
demowin.document.close();

}

function getalbum(){
ubb=""
html=""
d=document.getElementById("GalleryThumbNailViewer.ascx_ThumbNails");
k=d.getElementsByTagName(‘img’);

h="<ul class=’ablum’>"
for(i=0;i<k.length;i++){

if(k[i].tagName!=’!'){
if(k[i].parentNode.parentNode.tagName==’TD’){
h+="<li><a href="+k[i].parentNode.href+" target=_blank><img src="+k[i].src+" border=0></a></li>"
ubb+="[img]"+k[i].src.replace("t_","o_")+"[/img]&lt;br&gt;"
html+="&lt;img&nbsp;src="+k[i].src.replace("t_","o_")+"&gt;&lt;br&gt;"
}
}}

document.getElementById("main").innerHTML=h+"</ul><br><div><a href=javascript:runpp(‘"+ubb+"’)>获得图片UBB贴图代码</a> | <a href=javascript:runpp(‘&lt;textarea&nbsp;style=width:300px;height:80px&gt;"+html+"&lt;/textarea&gt;’)>获得图片HTML贴图代码</a></div>"
}

purl=document.location.href

if(purl.toLowerCase(purl).indexOf("gallery")>"-1"){
onload=getalbum
}
else{
onload=getimg
}
</script>    


17条评论

  1. dodo你好,我叫蒋郁!想请教你一个问题啊!关于css定义的问题,我定义一个class如下:

    .index_top {

    width:20%;float:left

    }

    然后我就在网页里用这个

    <div class="index_top">fdsfdsafdsafsafdsaffdsaffdsafdsafsafsafafafafasdfasfafsfda</div>

    写上这些英文字母的时候发现他并不是我想要的20%的宽度,而我改成中文就变成20%了,这是什么原因呢?

    我知道你是网站UI设计高手,所以想问你这个问题!谢谢你,如果你能给我一个答案!我实在是急这个问题

  2. 字符集的问题,英文不会换行

  3. .index_top {

    width:20%;

    float:left;

    WORD-BREAK: break-all;

    WORD-WRAP: break-word;

    }

  4. 恩,收藏

    http://bbs.xalife.cn

  5. 我想请教一个问题,DONEWS写BLOG时不知怎样贴图,就是在文章中加入图片,有什么语法吗?

  6. 发文章的编辑工具条,有一个插入图的标记,点击以后你就知道怎么用了

  7. 怎么在文章摘要显示图片或文章啊???

    还有就是怎么能像你的图片一样,能在上面啊,看我的连接。。都在下面。

    http://blog.donews.com/ibm777/archive/2005/10/28/606378.aspx

  8. 不好意思,你说得那个编辑工具条以前有,现在没有了。那该怎么办。

  9. dodo兄,问题还没有解决。在来帮帮忙

    http://blog.donews.com/ibm777/archive/2005/10/28/606378.aspx

  10. 请教DoDo:

    我用的是您的10号「放风筝」模版,

    http://blog.donews.com/chenta

    1.如何把右边整个导航栏弄宽点?宽度改为和Keso的那个一样宽?

    2.那个自动换行的代码在CSS里面已经有了,可在右栏里还是不能依据显示需要自动换行呢?

    谢谢!

  11. dodo兄,你的方法太好用了,谢谢

    顶了先

    钱塘江第一豪华游轮新宇玉皇号为您提供专业而独特的水上会议、酒会、产品推介、新闻发布、私人派对和婚礼等服务。

    联系地址:浙江省杭州市南星桥浙江第一码头新宇玉皇号专用码头。

    联系电话:0571-28870008 86078689

    传真: 0571—86078696

    网址: http://www.yachter.com.cn

    blog: http://blog.donews.com/yachter

  12. dodo,你这个blog好像没有用cookie来记录浏览者选择的风格样式:)

  13. 说到气象,跑了这么一大圈,感觉挺冷;瞅瞅网络,依然炽热,高烧不退…回来逼着自己完成一拖再拖的改版…

  14. 情看http://blog.donews.com/ibm777/Gallery/62675.aspx

    css把ul.ablum {list-style-type:none;display:inline;}

    ul.ablum li{float:left;width:155px;text-align:center;border-top:10px solid #fff;

    border-left:5px solid #fff;

    border-right:5px solid #fff;padding-top:10px;

    background:#EEECED;height:160px}

    加再什么位置啊?现在用的是老白那种css

    情帮忙

  15. 帮帮忙啊

  16. 很早就弄了个DONEWS的BLOG

    来你这里,让我学到很多,

  17. 今天闲来无事,改进了一下 Blog UI 。修正了以前朋友们反映过的Bug,改进了一些浏览器兼容性问题,同时增加了一些功能。

发表评论

评论也有版权!