WordPress 为长图片设置展开/折叠功能，方便查看

无言说这个WordPress网站主要分享网站源码的，经常需要把网站首页图片展示出来。

这几天更新无言发现了个问题，一般网站首页长度都在1000+px，若要获取下载地址，往往需要下翻很久才能看到下载框。

今天无言就把这个问题给解决了。也是挺简单的，几行css+js就解决了。

CSS

.open {height: 320px;overflow: hidden;text-align: center;position: relative;}
.open::after {content: "展开图像 ▼";display: block;height: 29px;width: 100%;position: absolute;bottom: 20px;color: #333;}
.openmask{width: 100%;position: absolute;height: 320px;background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0), #666);background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0), #666);background-image: -o-linear-gradient(top, hsla(0, 0%, 100%, 0), #666);background-image: linear-gradient(top, hsla(0, 0%, 100%, 0), #666);}
.fold{height:100%;}
.fold .openmask{height:100%; opacity:0;}
.open.fold::after{content: "折叠图像 ▲";color: #666;}

JS

/* 为网站添加“点击展开/收缩” */
jQuery(document).ready(
	function(jQuery){
	jQuery('.open').click(function(){
		$(".open").toggleClass("fold");
	});
});

HTML

<div class="open"><div class="openmask"></div>
此处加入图片代码 如 <img  src=""  />
</div>

上面这个其实就已经满足使用需求了，这个方法可以应用在任何程序的网站上来展示长图，当然这个也仅限于用来折叠长图。

PHP

小编使用的是WodPress程序，为了方便把这个功能放到WordPress后台，所以也琢磨了下代码。直接将下方代码放到functions.php

<?php
add_action('after_wp_tiny_mce', 'prettify_bottom');
function prettify_bottom($mce_settings) {
        <script type="text/javascript">
        QTags.addButton( 'openimg', '展开/收缩图片', '<div class="open"><div class="openmask"></div>\n\n</div>', "" );
        function prettify_bottom() {
        }
        </script>
    <?php
}

然后就可以在WordPress后台 文本编辑器中看到这个功能了。