| 网站首页 | 动易教程 | 动易下载 | 意见反馈 | 动易论坛 | 动易商城 | 服务项目 | 个人主页 | 书画互动首页 | 

您现在的位置: 书画互动动易专区 >> 动易教程 >> 系统美化 >> 文章正文

  没有公告

  [组图]图片内容页修改为显示所有图片        【字体:  
图片内容页修改为显示所有图片
作者:佚名    文章来源:不详    点击数:    更新时间:2006-11-5    

可以直接查看演示页面http://www.xiximm.com/Photo/people/200510/20051016221625.html


此主题相关图片如下:
按此在新窗口浏览图片

需要改动内容页模板的一个地方,然后再多增加一个文件

我另外写了一个ShowAllPic.asp的程序上传到photo目录,直接访问数据库,得到PE_Photo这个表中的PhotoID为指定ID的栏中的PhotoUrl(存放同一ID下所有图片的地址)里面的内容。内容大致如下:

图片地址1|200509/20050929191628924.jpg$$$图片地址2|200509/20050929191819467.jpg$$$

然后用asp里面的split()函数将每个图片的地址分开存放到数组,然后显示该数组的图片就可以了。

1.编写ShowAllPic.asp文件,上传到photo目录下。内容如下:

<!--#include file="../conn.asp"-->
<STYLE type=text/css>
a{text-decoration: none;} /* 链接无下划线,有为underline */
a:link {color: #333333;} /* 未访问的链接 */
a:visited {color: #333333;} /* 已访问的链接 */
a:hover{COLOR: #FF6600;} /* 鼠标在链接上 */
a:active {color: #333333;} /* 点击激活链接 */
BODY
{
FONT-SIZE: 9pt;background:url(Skin/adv43/ad_bg.gif);
text-decoration: none;
}
.pic{
border: 1px solid #cccccc;
}
</style>
<script language="javascript" type="text/javascript">
//改变图片大小
function resizepic(thispic)
{
if(thispic.width>650) thispic.width=650;
}
//无级缩放图片大小
function bbimg(o)
{
  var zoom=parseInt(o.style.zoom, 10)||100;
  zoom+=event.wheelDelta/12;
  if (zoom>0) o.style.zoom=zoom+'%';
  return false;
}
//双击鼠标滚动屏幕的代码
var currentpos,timer;
function initialize()
{
timer=setInterval ("scrollwindow ()",30);
}
function sc()
{
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos !=document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize

</script>

<%
'Everyday0905@163.com
'http://www.xiximm.com

        dim PicID,PicUrl,PicNum,n,sql,Rs,PicUrl_1,PicUrl_2     '关键内容从这里开始
        PicID=request("PicID")                                                    '获取页面请求的图片ID  

sql="select * from PE_Photo where PhotoID = " &PicID        '寻找数据库中相匹配的数据
set Rs = Server.CreateObject("ADODB.Recordset")
Rs.open sql,conn,1,1
    PicUrl=split(rs("PhotoUrl"),"$$$")   '将从表中得到的PhotoUrl用$$$分隔开,存到PicUrl数组中,形如array(图片

                                                             地址1|a.jpg,图片地址2|b,jpg,图片地址3|c,jpg)
        PicNum=UBound(PicUrl)                '返回PicUrl数组的最大可用下标(+1即得到图片张数)
       'response.write "第" & PicID  & "一共有" & PicNum+1  & "张图片<br>"      
    
for n=0 to PicNum                                         '从第一个图片开始,循环显示
          PicUrl_1=split(trim(PicUrl(n)),"|")          '再次将 图片地址2|b,jpg 拆分为两部分,得到图片的地址
          if UBound(PicUrl_1)=0 then                 '判断地址前面有没有"图片地址1"等说明,没有则加上“图片”字样
            PicUrl_2=Array("图片",PicUrl_1(0))
          else
            PicUrl_2 =PicUrl_1        
          end if                                                   ' 将整理后的第N张图片的说明及地址存到数组PicUrl_2中
          
          if left(PicUrl_2(1),7) = "http://" then      '简单判断站内地址还是站外地址
          else                  
               PicUrl_2(1) = "UploadPhotos/" & PicUrl_2(1)       '这里请改为你photo下面上传文件的文件夹
          end if
          response.write "<table width=20 align=center border=0 bgcolor=#ffffff cellpadding='0' cellspacing='0'>"
          response.write "<tr><td width=10><img src='../Images/bg_0ltop.gif' width='10' height='10'></td>"  '左上图片
          response.write "<td height='10' background='../Images/bg_01.gif'></td>"                           '上背景
          response.write "<td width=10><img src='../Images/bg_0rtop.gif' width='10' height='10'></tr>"      '右上图片
          response.write "<tr><td width='10' background='../Images/bg_03.gif'></td>"                         '左背景
          response.write "<td align=center><img src='" & PicUrl_2(1) & "' class='pic' border=0 onscroll='bbimg(this)'

onload='resizepic(this)'>"    '显示图片的html代码,可自己添加超级链接等
          response.write "<br><br>第 <font color='red'>" & n+1 & "</font> 张图片:" & PicUrl_2(0) & "</td>"                  

    ':图片及说明
          response.write "<td width='10' background='../Images/bg_04.gif'></td></tr>"                        '右背景
          response.write "<tr><td width=10><img src='../Images/bg_0lbottom.gif' width='10' height='10'></td>"   '左下图片
          response.write "<td height='10' background='../Images/bg_02.gif'></td>"                            '下背景
          response.write "<td width=10><img src='../Images/bg_0rbottom.gif' width='10' height='10'></tr>"       '右下图片
          response.write "</table><br> "  
        next
      
   Rs.close
    set Rs = nothing

%>

2.修改图片内容页模板

查找{$ViewPhoto}标签,替换为

<iframe width='100%' name=web height='100%' scrolling='no' frameborder='0' src='{$InstallDir}Photo/ShowAllPic.asp?PicID={$PhotoID}' onload="this.height=web.document.body.scrollHeight+20" ></iframe>

另外请将显示"放大","缩小","上一页","下一页"等的相关代码删除掉。

完成这两步,重新生成图片html文件,OK!

写的匆忙,很多代码可能可以写的更简洁,欢迎交流!

如果没有图片边框所用的小图片,可在我提供的页面中保存相关图片到站点images目录下(4个角上4pic+上下左右4个背景pic)

附件为ShowAllPic.asp文件


点击浏览该文件

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
    添加文章内容页广告的方法步
    文章内容页修改:字体大小、
    最简单的利用CSS定义图片边框
    文章内容页直接发表评论 解决
    海之恋内容页模板标题过长时
    不能添加文章\下载\图片,提
    图片频道如何修改CSS,才能统
    上传图片如何只给大图而不给
    如何通过按钮控制的图片上下
    给图片内容页的图片加上个相
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    236147427 QQ群(书画艺术):9872875 QQ群(网站设计):11616321 bszzg@163.com
    书画互动版权所有 吉ICP备05008388号
    Copyright 2005 www.bs2005.com All Rights Reserved