Fork me on GitHub

关于图片的问题

edited 2012年09月06日 问答求助

一,图片太大,发帖后,自动适应了内容部分,一点击放大就撑爆了,然后再点也回不去.

这个在爱青大/?p=47“使用 vanilla 插件ImageResizer 解决图片缩放问题”文章中解决

引出第二个问题

二,ImageResizer 点击图片,放大至本身大小,再点击,成缩略图,这功能实现了

但是图片本身过大的话,就撑爆了主题的Content部分

于是想是不是能够以jQuery Fancybox(这个官网有)实现

或者ColorBox(这个官网有)

又或者LightBox(这个真没有)

试着安装前两个插件,未成功.

试着自己加载LightBox也没折腾成功.

(官网上有些插件介绍页有图片,一点就弹大的图片出来的LightBox效果)

难道大家都没遇到这种问题?
希望能有人放教程

此话题使用的标签:

回复

  • edited 2012年09月06日 #1

    LightBox效果是有了,图出不来,一直加载状态中.. 那个上传附件的插件我一装就悲剧了,编辑器不见了

  • @深南路的 可以访问到你的网站吗?我看看出了什么错误。LightBox之类的很容易弄的

  • edited 2012年09月06日 #3

    应该还是哪有冲突,应该是“< img >”和“ < a >”的问题,vanilla在编辑器里发的图是“< img alt="image" src="xxx.ipg" >,但是LightBox定义的是”< a href="images/image-1.jpg" rel="lightbox[roadtrip]" >

  • @chuck911 呃,我还在本地测试中....

  • @chuck911 问题很明确了,怎么把rel="lightbox"加到img的属性里?要在哪修改,default.master.php里面没有,vanilla的img属性在哪里?

  • 最后的效果应该是< img href="xxxx/image-1.jpg" rel="lightbox" >

  • @深南路的 你是要贴图片链接就用lightbox显示图片?还是用file-upload插件?还是自带编辑器的?

  • edited 2012年09月06日 #10

    @chuck911 自带编辑器插入的图片,比如我发的这张图片(显示出来的,非那个链接)

  • edited 2012年09月06日 #11

    @深南路的 你用的是 v2.0.18.* 吧?

    我找到fancybox不起作用的原因了。被vanilla自带的js把事件覆盖了。

    var toggler = function(t_img, t_width) {
          if (t_img.css('width') == 'auto')
             t_img.css('width',t_width);
          else
             t_img.css('width','auto');
          return false;
    }

    最后return false...

    我刚才试了下,把 /js/global.js 825-832 注释掉

    jQuery('div.Message img').each(function(i,img) {
          var img = jQuery(img);
          var container = img.parents('div.Message');
          if (img.width() > container.width()) {
             var smwidth = container.width();       
             img.css('width', smwidth).css('cursor', 'pointer');
             // img.after('<div class="ImageResized">' + gdn.definition('ImageResized', 'This image has been resized to fit in the page. Click to enlarge.') + '</div>');
             // 
             // img.next().click(function() {
             //    return toggler(img, smwidth);
             // });
             // img.click(function() {
             //    return toggler(img, smwidth);
             // })
          }
       });

    再启用fancybox插件就可以了。

    上面那段代码我强烈怀疑是实习生写的...

    如果你要自己做lightbox插件的话,参考fancybox插件的思路就可以了

  • ps 2.1版本的解决方案可能会更简单一些

  • edited 2012年09月06日 #13

    算了,不搞了,Apparently the fancybox makes my users logout every time they acces to a page that have something fancyboxed :/

    Any Idea? @SevMC 也在fancybox上...

    @chuck911 你说的那段在看完爱青大/?p=47“使用 vanilla 插件ImageResizer 解决图片缩放问题”文章后就已经注释掉了,结果出现了@SevMC 的问题,一启用点图片了就用户退出了,呃,现在想了想,该不会是模板问题吧,我使用的是@SevMC 的Noise主题

    的确是v2.0.18.4 ,未使用github里的zipball,一是怕不稳定,二是不知道模板是不是会出问题

    我这破水平怎么写插件哦,只是想有这个功能,很多图太大,缩略图看着不是很好

  • 这个发图片是怎么搞的

  • 哇哦,真的不会撑爆哦!

  • IMG_2952
    测试一下!

登录注册 才能回复。