最近在我們的官方討論群中，有朋友問如何將文中所有的圖片抽取出來，排列在列表中，并做出一個滑塊或者lightbox效果，小編在開發(fā)博客的時候也注意到這個功能，如果文章的圖片較多，將圖片抽取出來，做成列表，用lightbox彈出展示其實也是非常棒的，請見下圖我們做出的效果。

可以看到，我們將圖片中的4個圖片抽取出來，排成一列，然后加入了lightbox效果，點擊彈出大圖，如下圖：

點擊圖片可以跳轉下一張圖，那么我們是如何做的呢？ 這里小編將代碼分享出來給大家使用：

php代碼：

首先，我們在列表頁的主循環(huán)中，輸出所有的圖片：

<?php
$SoImages? = '~<img [^\>]*\ />~';
preg_match_all($SoImages,$post->post_content,$Images);
$PictureAmount=count($Images[0]);
for($i=0;$i<$PictureAmount;$i++){
echo? '<a rel="lightbox[03]">'.$Images[0][$i].' </a>'? ;
}
?>

輸出所有圖片之后我們的圖片結構是這樣的：

<a><img scr="http://www.dengyin90.cn/wp-content/uploads/2013/09/themepark-lcwztpwordpresswz2.jpg" /></a>

現(xiàn)在，加入jquery，可以包含在你現(xiàn)有的js文件中：

$('#tup a').each(function(e) {?? //#tu是你包含輸出圖片的外容器id
$(this).attr("href",$(this).children('img').attr("src"));?? // 給a加上圖片地址，和lightbox標簽
});

現(xiàn)在的結構是這樣的：

<a herf="http://www.dengyin90.cn/wp-content/uploads/2013/09/themepark-lcwztpwordpresswz2.jpg"rel="lightbox[03]">
<img scr="http://www.dengyin90.cn/wp-content/uploads/2013/09/themepark-lcwztpwordpresswz2.jpg" />
</a>

現(xiàn)在，如果你安裝了lightbox插件，那么就可以實現(xiàn)點擊彈出的lightbox效果了，另外如果想要像小編做的這樣子的效果，別忘了用css固定A標簽的容器大小，并將圖片寬度縮小哦~

這樣的代碼其實還有缺陷，就是無法調用略所圖作為列表圖片，所以調用的圖片還是挺大的，如果你的圖片都是非常大的圖片，那就要慎用這個代碼了，當然，如果你有更好的方法，可以和我們交流·

希望此方法對你的折騰有所幫助！