我們經常會看到一些網站上漂亮的幻燈片展示模塊，之前我們介紹過 5 款WordPress推薦文章幻燈片插件 ，而本文里面，則通過詳細的教程告訴你如何為你的博客添加一個基于SmoothGallery 2.0的幻燈片展示模塊。

?

?

?

我們需要準備什么？

在開始之前我們需要先下載 SmoothGallery 2.0

?

1. 將所需文件放到合適的地方

• 解壓下載到的smoothgallery
• 將解壓得到的 CSS文 件夾 復制到 wordpress 目 錄 wp-content/themes/your_theme_name
• 將 scripts文件夾 復制到 wp-content/themes/your_theme_name

一旦我們完成這一步，我們就有了在 博客 上運行SmoothGallery的所需效果代 碼文件。

?

2. 在header部份添加調用代碼

在 博客 主模板代碼的Header部分添加CSS和script文件的連接，以便在博客 頁面進行調用

將以下幾行代碼添加到主模板代碼的Header部分：

?

    <!–Css SmoothGallery–>
<link rel=”stylesheet” href=”<?php bloginfo(’template_url’); ?>/css/jd.gallery.css” type=”text/css” media=”screen”/>
<!–JS Mootools–>
<script type=”text/javascript” src=”<?php bloginfo(’template_url’); ?>/scripts/mootools.v1.11.js”></script>
<!–JS SmoothGallery–>
<script type=”text/javascript” src=”<?php bloginfo(’template_url’); ?>/scripts/jd.gallery.js”></script>

  

?

當這一步完成時，你就已經可以在 博客 主題中使用SmoothGallery了。

?

3. 新建一個Gallery.php

在你的主題目錄中新建一個文件gallery.php，這個文件會幫你生成展示gallery的html代碼。

在開始這一步之前，應該認識到smoothgallery模塊的結構。

?

?

    
      
        
      
      



<div class=”imageElement”>
<h3>Item Title</h3>
<p>Item Description</p>
<a href=”Link to Item ” title=”open image” class=”open”></a>
<img src=”Image of item” class=”full” alt=”Item Title” />
<img src=”Thumbmail of item” class=”thumbnail” alt=”thumbnail of Item Title” />
</div>
    
  

gallery.php文件包括兩部分：

(1). 初始化SmoothGallery Script (JS)

(2). 為gally生成html/php代碼

?

你可以在這里 here 下 載到gallery.php需要這段代碼，將代碼全部保存到一個新建txt文檔中，再保存為gallery.php就可以了。

?

    <!– Initialization of SmoothGallery–>
<script type=”text/javascript”>
function startGallery() {
var myGallery = new gallery($(’myGallery’),
{timed: true});}
window.addEvent(’domready’,startGallery);
</script>
<!– Creation of the html for the gallery –>
<div class=”content”>
<div id=”myGallery”>
<!–
Get the 5 lasts posts of category which ID is 3
(to show the recent post use query_posts(’showposts=5′);)
–>
<?php query_posts(’showposts=5&cat=3′);?
<?php while (have_posts()) : the_post(); ?>
<!–get the custom fields gallery_image
(fields which contains the link to the image to show in the gallery)
–>
<?php $values = get_post_custom_values(”gallery_image”);?>
<!– Verify if you set the custom field gallery_image for the post –>
<?php if(isset($values[0]))
{?>
<!–define a gallery element–>
<div class=”imageElement”>
<!–post’s title to show for this element–>
<h3><?php the_title(); ?></h3>
<!–post’s excerpt to show for this element–>
<?php the_excerpt(); ?>
<!–Link to the full post–>
<a href=”<?php the_permalink() ?>” title=”Read more” class=”open”></a>
<!– Define the image for the gallery –>
<img src=”<?php echo $values[0]; ?>” class=”full” alt=”<?php the_title(); ?>”/>
<!– Define the thumbnail for the gallery –>
<img src=”<?php echo $values[0]; ?>” class=”thumbnail” alt=”<?php the_title(); ?>”/>
</div>
<?php }?>
<?php endwhile; ?>
</div>
</div>
  

?

4. 將gallery放到你的主題中

把<?php include (’gallery.php’); ?>放入你想添加的位置。當你完成這一步時，你的gallery就已經可以工作了。

要使你的gally運轉起來，你需要在新建一個名為 gallery_image的自定義字段，字段值即為需要展示的圖片鏈接，在 wordpress 中推薦用相對地址，比如你的圖片地址為 http://www.yoursite.com/wp-content/uploads/2008/08/artile，只需要填wp-content /uploads/2008/08/artile就可以了。

?

最后一步（不是必須）：自定義gallery的具體顯示效果。

?

打開文件wp-content/themes/your_theme_name/css/jd.gallery.css，在這里修改gallery 的寬和高。（通過修改jd.gallery.css完全對這個slideshow根據自己的主題進行個性化。^_^）

?

    #myGallery, #myGallerySet, #flickrGallery
{
width: 590px;
height: 250px;
z-index:5;
border: 1px solid #000;
}
  

?

默認的字號對于中文太小了，可以調整slideshow下方信息欄的高度及文字的字號，只需要修改

?

    .jdGallery .slideInfoZone（滑動信息欄高度、顏色等參數）.jdGallery .slideInfoZone h2（信息欄內標題樣式）

.jdGallery .slideInfoZone p（信息欄文本樣式）
  

?

你還可以修改wp-content/themes/your_theme_name/scripts/jd.gallery.js來改變 gallery的展示效果（ Smooth Gallery 提供了多種不同的顯示效果，你可以根據需要進行修改）

?

更多定制信息請看 Smooth Gallery Website

?

?

?

?

在wordpress中添加幻燈片展示