Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

【教程达人投稿】UCenter Home 2.0相册加强完整教程(授渔篇)

[复制链接]
ylkj 发表于 2009-11-19 19:56:14 | 显示全部楼层 |阅读模式
本帖最后由 ylkj 于 2010-7-22 08:47 编辑

该教程适合UCHome1.5叉叉版本 和 UCHome2.0叉叉版本,应该以后的版本都支持,就算不支持,我们也可以根据这个教程的代码修改一下。
这个教程的代码我都加了注释,大家应该都看得懂。

本教程绝对原创,功能实现代码全是本人自己所写,因为这个是“Comsenz 教程达人”投稿作品,所以谢绝转载。
如果大家觉得这个教程不错,请回复,评分或顶踩,谢谢。
完全加强效果演示 http://quan.96px.com/space-4-do-album-picid-2279.html

本教程包括“切换照片的快捷键”,“自动定位到照片”,“照片左右箭头切换”,“相册缩小、放大、顺旋”,“照片下载”五大功能加强,大家可以根据自己的需要选择,可以单独选择一个功能或完整,若是单独加强某功能,请查看2楼,可能有需要注意的地方。
该教程还给照片添加了alt标签,有助于照片被搜索引擎收录。

1.切换照片的快捷键和自动定位到照片
1a.打开 template/default/space_pic.htm
查找

  1. <div style="padding-top:20px; width:100%; overflow:hidden;" id="pic_comment">
复制代码
在其上面增加代码
  1. <script type="text/javascript">

  2. //相册左右快捷键切换照片加强
  3. document.onkeydown = function()
  4. {
  5.   if(event.keyCode == 37)
  6.         {
  7.           window.location.href='space.php?uid=$pic[uid]&do=album&picid=$pic[picid]&goto=up';
  8.         }
  9.         if(event.keyCode == 39)   
  10.         {
  11.           window.location.href='space.php?uid=$pic[uid]&do=album&picid=$pic[picid]&goto=down';
  12.         }
  13. }

  14. //自动定位到照片加强
  15. if(window.location.hash == "")   
  16. {
  17.   window.location.href='#playid';
  18. }
  19. </script>
复制代码
这样就增加了切换照片的快捷键和自动定位到照片

接下来我们为相册切换的快捷键功能增加个说明(觉得没必要的朋友可以不操作这一步)
1b.我们还是打开 template/default/space_pic.htm
搜索
  1. <a href="$theurl&goto=up">上一张</a><span class="pipe">|</span>
复制代码
在其上面增加
  1. 按方向键 ← 或 → 可切换图片
复制代码
2.照片左右箭头切换加强
2a.打开  template/default/space_pic.htm
搜索
  1. <a href="$theurl&goto=down"><img src="$pic[pic]" alt="" /></a>
复制代码
替换成
  1. <img src="$pic[pic]" id="pic_element" onMouseMove="ProcessPage(1)" onClick="Album_Goto()" alt="$pic[title]" />
复制代码
2b.再查找
  1. //-->
  2. </script>
复制代码
替换成

  1. var Album_Goto_Up="$theurl&goto=up";
  2. var Album_Goto_down="$theurl&goto=down";
  3. //-->
  4. </script>
  5. <script src="plugin/photo_enhance/script.js" type="text/javascript"></script>
复制代码
2c.把下载解压,把里面问文件上传到UCHome根目录

3.相册缩小、放大、顺旋加强
3a.打开  template/default/space_pic.htm
搜索
  1.         <!--{if $album['friend']}-->
  2.         <span class="locked gray">{$friendsname[$value[friend]]}</span>
  3.         <!--{/if}-->
复制代码
在其下面增加
  1.         <a href="javascript:Images_Small()" title="缩小照片">缩小</a>
  2.         <a href="javascript:Images_Big()" title="放大照片">放大</a>
  3.         <a href="javascript:Rotation_Way('1')" title="逆时针旋转照片">顺旋转</a>
  4.         <a href="javascript:Rotation_Way('0')" title="逆时针旋转照片">逆旋转</a>
复制代码

4.照片下载加强
4a.打开  template/default/space_pic.htm
查找
  1. <a href="$pic[pic]" target="_blank">查看原图</a>
复制代码
在其上面增加
  1. <!--{eval $pic[down_pic]=str_replace("attachment/", "file.php?name=", $pic[pic]);}-->
  2.                 <a href="$pic[down_pic]" target="_blank">下载该图</a>
  3.                 <span class="pipe">|</span>
复制代码
4b.把下载解压,把里面问文件上传到UCHome根目录。


写教程也挺辛苦的,大家帮忙顶,以后还会有更多更好的教程。

ps:楼下说的找不到改代码是因为版本原因,抱歉,我大意了,6楼、13楼出现的错误已修正。
左右切换图标不显示,是空间不支持ani格式的原因,请联系空间商解决;如果是自己的服务器,请进爱上搜查找解决方法。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

评分

2

查看全部评分

 楼主| ylkj 发表于 2009-11-19 20:25:21 | 显示全部楼层
本帖最后由 ylkj 于 2010-7-22 08:46 编辑

每个加强都可以单独使用
若单独加强2需要执行1b.步骤
若单独加强3需要执行1b.2c.步骤


希望用了这个加强教程的朋友都帮我顶一下这个帖,让更多的人用到这个教程。
回复

使用道具 举报

dake 发表于 2009-11-19 20:27:16 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

hotllus 发表于 2009-11-19 20:51:12 | 显示全部楼层
GOOD~~~~~~~~~~~~~~~~~~~~~~~~~
回复

使用道具 举报

ttfok 发表于 2009-11-19 21:23:11 | 显示全部楼层
支持!!!
回复

使用道具 举报

cnfeixue 发表于 2009-11-19 21:23:46 | 显示全部楼层
space_album_pic.htm
此处无法找到LZ所说的那些代码。。
回复

使用道具 举报

ゾ芯︵亂ジ 发表于 2009-11-19 21:28:17 | 显示全部楼层
space_album_pic.htm
此处无法找到LZ所说的那些代码
回复

使用道具 举报

jaysoh 发表于 2009-11-19 21:32:57 | 显示全部楼层
支持!!非常好的插件!
如果有加上Flash照片墙的效果会更好
回复

使用道具 举报

xenoaerith 发表于 2009-11-19 21:50:04 | 显示全部楼层
谢谢那么好的教程
回复

使用道具 举报

eqmz 发表于 2009-11-19 23:49:30 | 显示全部楼层
牛XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2025-1-24 05:28 , Processed in 0.036779 second(s), 4 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表