栏目导航

news

新闻中心

主页 > 新闻中心 >

bootstrap制作响应式相册dedecms图集相册代码

发布日期:2022-01-12 19:18   来源:未知   阅读:

  需要做一个这些查看图片的相册功能,主站使用dedecms系统的图集功能,前端响应式使用bootstrap 4.4来实现,主要需求是在PC端和移动端都可以有较好的用户体验,同时要利于SEO优化,所以不能光是只有图片,还需要加一些文字内容,演示如下。

  导航和图片部分需要固定不动,相册默认使用了dedecms系统的自动播放功能,可以点击播放或暂停,点击下面的小图可以弹出原始大图,支持鼠标滚动放缩;右侧部分是类似悬浮的功能,可以上下拉动,显示图片的说明和相关的评价、相关内容等。

  要点:由于是响应式布局,所以移动端和PC代码几乎一致,重点是相册中的图片处理,需要用css来控制:图片的宽度100%即可,难点是不同高度的图片,我们需要把图片的高度控制在一个固定的比例上面,用户体验才好,使用vmin和calc()来实现。

  以上HTML中的class大部分格式是bootstrap中的代码,也有几个是自定义的,下面提供css部分。

  如果不是使用dedecms系统,将HTML代码中的第10行和24行25行保留,多余其他非bootstrap代码可以删除,替换图片的调用路径之后即可直接使用;如果使用的是dedecms系统,打开\templets\default\article_image.htm文件,将上面HTML代码替换其中的整个body部分代码,再把自定义的css引入,即可。

  点击小图弹出源大图支持鼠标滚动放缩,需要引入另一个叫做viewer.js的插件,去搜索下载这个这个js插件,然后在图集页面的head里面引入viewer.js的js和css这2个文件,这样整个功能就全部实现。湖南在大湾区签署科技创新合作协393444澳门论坛