首页 Wordpress WordPress 使用fotorama插件制作相册页
Wordpress 使用fotorama插件制作相册页

WordPress 使用fotorama插件制作相册页

GavinWu 2022年04月01日 8:04 Wordpress 694 Views

Fotorama是一款响应式jQuery焦点图轮播幻灯片切换插件。Fotorama,支持缩略图播放、全屏查看、支持视频、图片、HTML内容、支持图片延迟加载、支持缩略图显示位置定义、支持自动播放以及循环播放、支持左右方向按键播放。本文将介绍如何将fotorama插件内嵌到wordpress里并使用他作为相册插件使用。官方传送门:https://fotorama.io/

一、确保你的主题支持文章形式

确保你的主题支持文章形式,具体参见《wordpress 让主题支持文章形式》

二、制作相册页

1、下载fotorama插件并在主题里引用js和CSS。

JS和CSS的加载,就不细说了,可以参照《WordPress 加载Javascript和CSS的方法》
2、复制主题single.php页面,并将名称改为single-image.php
3、打开single-image.php将

1
<?php the_content();?>

增加外层DIV标签。像这样

1
2
3
<div class="fotorama" data-width="100%" data-ratio="820/600">
<?php the_content();?>
</div>

其中,data-width表示相册图片宽度,data-ratio表示图片高宽比,还可以data-nav=”thumbs”来表示使用缩略图。
还有很多其他参数,详见官网

三、发表文章时选择图片样式

在写文章时选择图片样式。参照《WordPress不同文章形式选择不同的文章模板》
WordPress 使用fotorama插件制作相册页|微言心语
并且确保图片是以链接形式的,像下面这样

1
2
3
4
5
    <a href="1-lo.jpg"><img src="1-thumb.jpg"></a>
    <a href="2-lo.jpg"><img src="2-lo.jpg"></a>
    <a href="3-lo.jpg"><img src="3-lo.jpg"></a>
    <a href="4-lo.jpg"><img src="4-lo.jpg"></a>
    <a href="5-lo.jpg"><img src="5-lo.jpg"></a>

效果演示

WordPress 使用fotorama插件制作相册页|微言心语
WordPress 使用fotorama插件制作相册页|微言心语

相关文章

  • 暂无相关文章
七牛

发表评论

QR Code

本页二维码