简单的jQuery图片弹出插件popImage

近来由于项目中的一个小需求,自己制作了一个简单的图片弹出插件,觉得还挺不错的~嘻嘻!(臭美一下)特拿来跟大家分享一下,梦三秋也好久没有自己写插件了呢~呵呵~最近太忙了,实在是抱歉呀,连文章都很少写了。

此插件的特点:

  1. 灰常小巧,未压缩2.2KB,mini压缩之后1.7KB
  2. 功能简单,但是比较漂亮~嘿嘿~
  3. 即将要弹出的大图都会被插件预加载到页面中,以作弹出时候的准备
  4. 使用简单,配置参数很少
    配置参数1:tagName=>这个表示图片地址是取自DOM元素的什么属性,默认的是“href”,
    配置参数2:timeOut=>这个表示,弹出图片所用的时间。

就这么点特点~~哈哈~~大家赏脸的话,可以到下面的链接去瞅瞅DEMO演示,嘿嘿~~如果觉得效果还不错~~也可以打包拿走。

下面来说说怎么使用这个插件的撒:

  • 首先肯定是得加入jquery的官方库文件的啦,此插件支持1.4及以上jquery版本。
    <script type="text/javascript" src="jquery_1.5.min.js"></script>
    
  • 然后嘛,那肯定就是梦三秋写的插件了。
    <script type="text/javascript" src="jquery.popImage.mini.js"></script>
    
  • 嘿嘿~本来应该还有个css文件要加载的,不过梦三秋已经在jquery.popImage.mini.js这个js文件里面做了自动加载的处理了,所以就不需要大家手动加载css样式文件按了。但是有一点要注意的是打包文件下载下来,里面的目录结构是不能变的哦~css文件夹中的popImage.css文件是不能挪动位置的,还有images文件夹下的close.png图片是必须的,其他的图片是页面上的演示图片,可以删除掉。
  • 好了~~有了前面两个准备工作,下面就可以调用插件了。对了,首先看看HTML代码:
    
    
    

    jquery代码:

    $(function(){
    $("a.image_gall").popImage();
    })
    

    OK,是不是很简单啊!

上面只是简单举了个例子,还有一些用法,自己去看DEMO演示吧!

原创文章,转载请注明: 转载自梦三秋

本文链接地址: 简单的jQuery图片弹出插件popImage

文章的脚注信息由WordPress的wp-posturl插件自动生成

关于梦三秋

有过辛酸有过泪,有过挫折有过失败,但是我从未放弃过,因为我叫甘强。所以我必须得强~
此条目发表在jQuery插件分类目录,贴了, , , 标签。将固定链接加入收藏夹。

简单的jQuery图片弹出插件popImage》有 46 条评论

  1. 韩国说:

    还是不太敢操作.

  2. 宝典网说:

    用来做相册不错

  3. 浦东家具说:

    还有代码,不是很懂的

  4. 米锅说:

    你写的吗,很棒啊!

  5. Pingback引用通告: popImage for wordpress Plugins | 梦三秋

  6. 无冷说:

    图片层得弹出使用的js的那个函数,求教!

  7. 天涯说:

    js特效做的很不错!!嘻嘻 学习下了

  8. 万格说:

    效果不错,学习叻

  9. 楠楠说:

    给力啊

  10. 恩关于JQuery的博客,很不错,学习了。这个很好的

  11. 帅哥说:

    插件有bug,狂点击缩略图,会发现弹出层越来越小

  12. 用友总监说:

    写的不错

  13. wo8293821说:

    灰常好,简单实用。

  14. guest说:

    if(animate_image.data(‘o_h’))
    {
    o_h= animate_image.data(‘o_h’);
    o_w= animate_image.data(‘o_w’);
    }else{
    o_h = animate_image.height(),
    o_w = animate_image.width();
    animate_image.data(‘o_h’,o_h);
    animate_image.data(‘o_w’,o_w);
    }

    • 梦三秋说:

      不知道能否说的详细点。

      • guest说:

        把你代碼的部分“o_h = animate_image.height(),
        o_w = animate_image.width();
        ”替換為上面的類容,連續點擊的時候,有可能獲取的圖片大小是動畫過程中的,小於原圖片的大小,所以連續點擊,彈出圖片會越來越小,記住第一次處理圖片時的大小就ok了

  15. 和今生说:

    爱死Jquery了,只是现在的水平太菜了。什么时候才能像楼主一样牛。。。

  16. 雪々吖头说:

    楼主写的这个插件挺好的 我不知道什么时候才能到这个水平啊

  17. loee说:

    支持组图浏览不

  18. yibu说:


    为什么我的target=”_self”到页面上变成target=”_blank”了有办法解决吗???

  19. 清风说:

    博主您好,请问怎样才能在点击后才加载大图呢,因为我的大图很多,一起加载的话速度会特别慢

  20. moonlight说:

    博主,您好,我刚学完javascript,基本得东西都了解了。接下来我想学jquery,请您推荐学习的书籍?

  21. 楼主,请问一下这个背景可以做成灰掉的不?最近在看《锋利的jQuery》,刚好搜到这个例子,很值得琢磨琢磨

  22. 一路向北说:

    我在用这插件的时候在IE中点开图片却覆盖了整个网页而不是弹出来放大显示,在Firefox中却没有问题,一直在找原因不知道咋回事。麻烦指教一下。。。

  23. jan仔说:

    为何我在头部修改插件的引用路径之后,效果就不行了,我js文件放在其他目录了!哪里可以修改路径,还是写死了?

  24. 傲罗说:

    赞一个,不错哦,拿去用了

  25. wenllar说:

    赞一个

  26. NEOGEO说:

    试用了博主的插件,发现两个问题。不知道博主有没有解决办法。
    一,在通过JQ更改HTML DOM结构后再次加载popImage,会造成图片不断地累加,直到浏览器承受不了。
    二,如果图片只更改了一部分(不是整个HTML页面全部更换),POPIMAGE会对没有作出更改的图片计算错误。

  27. teryChina说:

    就是要这种特效

  28. sven说:

    谢谢,挺好的,就是有一个问题,当图片太大的时候就全屏了,我稍微加工了一下

发表评论

电子邮件地址不会被公开。 必填项已用*标注