TwentyTwenty 插件——对比图片中变化的优秀解决方案
- February 28, 2015
- 12 条评论 | 4.66k reads
不知不觉间,又迎来了新的一年,在这里首先祝大家新年快乐(好像有点晚),时间总是过得特别的快,我们周围的一切也在不断的变化,而这些变化,往往会被我们匆忙的脚步忽略。而多年后,当我们拿起记录这些变化的照片,我们总是倾向于去比对,去寻找这些变化是怎么发生的。那么,我们有时候会希望把这种变化更加清晰的展现给别人,而在WordPress中,TwentyTwenty 插件就是一个很好的解决方案。
TwentyTwenty 插件通过使用两张相同大小的图片,然后可以通过滑动来更好的比对两张图片的差异,具体效果如题图,若想切实的体验一下插件的效果,可以在文末点击演示页面的链接仔细体验。
TwentyTwenty 插件使用方法
首先要注意的是 TwentyTwenty 插件要使用两张相同大小的图片,且仅支持IE9及以上的浏览器。插件的使用方法就是像平常一样添加两张图片,然后切换编辑器到“文本”模式,找到两张图像对应的代码,类似下面这样的
<img src="http://www.example.com/wp-content/uploads/2014/12/before-photo.jpg" alt="Before photo" width="604" height="402" class="alignnone size-large wp-image-2367" /> <img src="http://www.example.com/wp-content/uploads/2014/12/after-photo.jpg" alt="After Photo" width="604" height="402" class="alignnone size-large wp-image-2366" />
然后在第一张图像代码的前面加入[twentytwenty],第二张图像代码的后面加入[/twentytwenty]即可!
加入后的代码如下所示:
[twentytwenty]<img src="http://www.example.com/wp-content/uploads/2014/12/before-photo.jpg" alt="Before photo" width="604" height="402" class="alignnone size-large wp-image-2367" /> <img src="http://www.example.com/wp-content/uploads/2014/12/after-photo.jpg" alt="After Photo" width="604" height="402" class="alignnone size-large wp-image-2366" />[/twentytwenty]
结语
不得不说,TwentyTwenty 插件是一个十分有人文情怀的插件,在这个发展如此快速的时代,我们也确实应该注意停下脚步,关注一下身边的变化。
嗯,以上呢,都是我作为一个文科生对这个插件的适用范围的一个YY,这个插件还可以有很多其他的用途,只要是想比对图片的变化,均可以用到这个插件,大家就尽情的发挥自己的想象啦!
相关链接:演示页面 | WordPress.org主页
如果你觉得这个插件不错,拜托赞它一下。如果不够好的话,欢迎吐槽,同时欢迎你给我推荐更好的!
赞 1
挺好看的样子
po主绝逼是UI控
您好,您右下角的那个红色的“TOP”挺有意思,方便告诉我怎么实现的吗?
http://fatesinger.com/74271
我是根据这个教程做出来的效果(抱歉那么晚才回复你,最近有点事,网站一直没关注。)
谢谢,文中说把相关代码加入到JS文件当中,我想知道,JS文件那么多,我该加到哪一个里面去??
这个主题自带是没有JS文件的。需要你自己创建一个JS文件,然后修改主题进行调用。具体的方法由于我在上学无法细说。你可以自己去百度一下,再不行了的话,周末找时间帮你解决
恩,好的,谢谢你。你很客气。
博主你好,不知道你今天有空否?我们通过邮件交流了几天,谢谢你的帮助,您可否加我QQ告诉我,如何处理JS的问题?
我的QQ:12115411
博主又来了,请教一下,那种进了网站首页,暗化页面,然后某一块高亮,还有引导标识,那种指导访客浏览网页的功能怎么搞,帮我一下
我用这个 Twenty20 Image Before-After