jQuery插件 jImageLink.js - 模拟yupoo的缩略图上的小图标效果
不知道大家有没有见过Yupoo照片列表里面的效果，当鼠标经过照片时会出现一个小图标，点击小图标时，就可以直接查看大图，它使用了Lightwindow这个JS.
像这种方式的体现有一个很大的好处就是用户可以点击图片的其它区域进入详细页面，也可以点击小图标，直接查看完整的图片。用户体验有有很大的提高。因为很多情况下，列表中的图片可能会引起用户想看看完整图片，或者说大图片的欲望，如果有这样的一个功能，哪就可以不影响现有功能情况下满足用户的这个“欲望”。

今天我也弄了一个类似的功能，实现方式基本跟Yupoo的一样，再把它弄也了jQuery插件，方便使用。


Yupoo的效果图：


我这个的效果：


调用的时候只用这样一段代码：
$("body").ready(function(){

    /*
        there is the jImageLink code
     */
    $("a.imgLink").jImageLink({        
        iconClassName : "linkIcon",        /* 在这里写“小图标”的样式，包括图片 */
        iconRel : "shadowbox",            /* 这里是Shadownbox 或 Lightwindow 这类JS用的 rel 属性定义,用过的朋友一定知道 */
        iconWidth : 14,                    /* 图标宽度 这里会影响小图标的位置，建议输入跟 iconClassName 这个样式里面的图标大小一样 */
        iconHeight : 14                    /* 图标高度 */
    });    

});               


当然这个也是开源的，最近自已网站的服务器过期了，所以现在东西都向GooglePage上面发。
源代码打包下载地址：
http://files.cnblogs.com/huacn/jImageLink.zip





posted on 2008-01-26 21:01 李华顺 阅读(2788) 评论(10)  编辑 收藏 所属分类: Javascript & Ajax 、Works

  回复  引用  查看    
2008-01-26 23:10 | 没剑      
华顺兄，看了你的这个插件了，不过感觉速度上老是闪来闪去的，特别是当鼠标在你的哪个小图也大图之间移动时特别明显，这个图标会一会儿出现，一会儿隐藏，这样子造成了闪动。
  回复  引用  查看    
2008-01-27 00:55 | superman.net      
哇，你的文本框和按钮怎么这么大的，我用过jquery.lightbox.js　也是图片放大功能，不过是点图片本身！感觉那个小图片太小了，要得刻意去找
  回复  引用  查看    
2008-01-27 20:14 | 李华顺      
@没剑
恩，在IE下面确实有点，不知道为什么，昨天我在IE下面都测试好了的

@superman.net
可能你没有认真的看我前面的介绍，这个功能就是为了让图片有两种点击方式，一种是进入详细页面。另外一种是直接查看大图
  回复  引用  查看    
2008-01-28 17:03 | superman.net      
兄弟，你有用过JQ的cookie插件没，我用了，在IE6里有问题，IE7跟FF没问题，不知道是我代码问题还是插件问题，如果你知道，麻烦帮忙解决一下！或者加我QQ53057610 MSN chaoren1641@hotmail.com
  回复  引用  查看    
2008-01-28 18:07 | superman.net      
哦我解决了，重弄了个JS文件
  回复  引用  查看    
2008-01-29 13:48 | WOW玩家      
ie7浏览有bug，第2，3张图片那个小图标跑到中间去了
  回复  引用  查看    
2008-01-29 16:01 | 李华顺      
@WOW玩家
没有呀，我现在用IE7测试了一下，没有你说的情况出现

  回复  引用    
2008-03-03 11:42 | 培根 [未注册用户]
华顺怎么源代码下载不下来./?
  回复  引用    
2008-03-23 22:13 | Beyonder [未注册用户]
你好，楼主提供的下载地址无法下载，能否发给小生一份：beyondwebstudio@sina.com
不胜感激！
  回复  引用  查看    
2008-03-24 09:13 | 李华顺      
@Beyonder
连接已经修正

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
   博客园首页

  新闻频道

  社区

  小组

  博问

  网摘

  闪存
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-03-24 09:12 编辑过
成果网帮您增加网站收入


相关链接:

最新IT新闻:
千亿美元市值榜:微软居首移动第二 诺基亚退榜
Google申请“海上数据中心”专利 可能付诸行动
用Google Earth实时追踪人造卫星
传IBM将以35亿美元至40亿美元收购北电
Google卫星已经开始工作