WordPress教程

WordPress 读取文章中的所有图片幻灯显示

也想出现在这里?联系我们
创客云

highslide 是一个不错的幻灯组件,近日琢磨用 WordPress 做一个图片站,文章中添加了图片进行幻灯展示,写了个小函数,功能基本实现了。highslide 的官方网址是:http://highslide.com/,有兴趣的可以去看看。

函数其实很简单,读取文章中出现的的所有图片,按照 highslide 的格式进行输出即可。

也想出现在这里?联系我们
创客主机
  1. function get_all_image($content){
  2.     if ( $content === false ) $content = get_the_content();
  3.     preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $images, PREG_PATTERN_ORDER);
  4.     $first_img =  $images[1][0];  //提取第一张图片
  5.     echo '<div class="highslide-gallery">';
  6.     echo '<a id="thumb1" href="'.$first_img .'" class="highslide" onclick="return hs.expand(this)"><img src="'.$first_img.'" alt="Highslide JS" title="点击浏览大图" /></a><div class="highslide-caption">'.exif_info($first_img).'</div>';
  7.     echo '<div class="hidden-container">';
  8.     for($i=1;$i<count($images[1]);$i++){  //提取第二张及以后的图片
  9.         $next_img=$images[1][$i];
  10.         echo '<a href="'.$next_img.'" class="highslide" onclick="return hs.expand(this, { thumbnailId:\'thumb1\' })"></a><div class="highslide-caption">'.exif_info($next_img).'</div>';
  11.     }
  12.     echo '</div></div>';
  13. }

上面函数包含有一个 exif_info 函数,这个函数是我自己写的一个读取图片 EXIF 信息的函数,用于显示图片的参数信息,不需要它的话,可以去掉或是增加其它内容。

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!