首页 > 文章 > 资讯 > 正文

phpcms9相册图像自适应手机大小
2020-12-05 22:07:28   来源:   评论:0 点击:

phpcms9今天修改模板到了手机版的图像频道栏目。因为手机可能会横屏或者竖屏看所以不好固定尺寸。在这个show_picture html页面里图片显示是

phpcms9今天修改模板到了手机版的图像频道栏目。因为手机可能会横屏或者竖屏看所以不好固定尺寸。



在这个show_picture.html页面里图片显示是由JS控制的,要想让它实现自适应大小,就是width:100%,height:auto的。因为PC还是需要这个JS文件的,所以重新复制一个作为手机版用的JS文件。
先要把statics/js/show_picture.js复制一份,改名字为show_m_picture.js,然后我们修改show_m_picture.js。



show_m_picture.js里把$('#big-pic img').LoadImage(true, 890, 650,$("#load_pic").attr('rel'));这行删除,共有三行。这行是控制PC页面的宽和高的,我们手机版里不需要,而是要重新给个尺寸。如下:



然后打开编辑phpcms/templates/default/content_m/show_picture.html文件(content_m目录是我们复制的content目录改名为手机的模板文件)。在和之间加上以下一段:
 



即可使手机浏览时候图片自适应手机屏幕大小了。其它细节再自己慢慢修改。
注意这里页面最底下也要把指向的原JS文件改为复制改名后的那个JS文件。如下:


虽然都是控制页面图片自适应大小,但是这里和文章页面的却不一样,为此我想了很久,用文章页面控制图片的语句j就是不行,郁闷啊。
好了终于搞定了。

相关热词搜索:

上一篇:页面内容中的图片通过js设置图片自适应大小
下一篇:最后一页

分享到: 收藏
评论排行