曹鹏·博客文摘

如何添加幻灯片banner 广告
在开始之前我们需要先下载 SmoothGallery 2.0
1) 将所需文件放到合适的地方
解压下载到的smoothgallery
将解压得到的css 文件夹复制到wordpress 目录wp-content/themes/your_theme_name
将scripts 文件夹复制到wp-content/themes/your_theme_name
2) 在 header.php 里添加：
<script type="text/javascript" src="<?php
bloginfo('template_url'); ?>/huandeng/scripts/mootools.v1.11.js"></script>
<!–<!–JS SmoothGallery–>–>
<script type="text/javascript" src="<?php
bloginfo('template_url'); ?>/huandeng/scripts/jd.gallery.js"></script>
<?php /*?><?php wp_head();?><?php */?>去掉此行，不然不能实现。不知道什么原因？
wp_head();里面是其他插件里面的样式或者是其他调用代码，如果去掉此行的话将无法显
示了，所以只能把他们所需要的代码直接写进主题的样式模板内进行统一调用。可以解决
问题。
3) 新建一个文件huandeng.php
添加代码：
<!– Initialization of SmoothGallery–>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.addEvent('domready',startGallery);
</script>
<!– Creation of the html for the gallery –>
<div class="content">
<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="#" title="open image" class="open"></a>
<img src=' <?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/1.jpg' class="full" />
<img src='<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/1-mini.jpg' class="thumbnail" />

</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="#" title="open image" class="open"></a>
<img src=" <?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/2.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 3 Title</h3>
<p>Item 3 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/3.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/3-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 4 Title</h3>
<p>Item 4 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/4.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/4-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 5 Title</h3>
<p>Item 5 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="/huandeng/images/brugges2006/5.jpg" class="full" />
<img src="/huandeng/images/brugges2006/5-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 6 Title</h3>
<p>Item 6 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/6.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/6-mini.jpg" class="thumbnail" />
</div>

<div class="imageElement">
<h3>Item 7 Title</h3>
<p>Item 7 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/7.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/7-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 8 Title</h3>
<p>Item 8 Description</p>
<a href="#" title="open image" class="open"></a>
<img rc="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/8.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/8-mini.jpg" class="thumbnail" />
</div>
</div>
</div>
</div>
4) 在需要引用的地方添加以下代码：（不知道什么原因调用huandeng.php 代码后，此区
域将脱离文件流，而且没有办法让它归位，只能将其直接写入index.php 文件内部）
<?php include(TEMPLATEPATH.'/huandeng.php'); ?>
这里面有一个
5) 自定义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（信息栏文本样式）
*上滑动栏宽度;
.jdGallery .carousel
{
position: absolute;
width: 100%;
margin: 0px;
left: 0;
top: 0;
height: 90px;/*上滑动栏宽度;*/
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
你还可以修改wp-content/themes/your_theme_name/scripts/jd.gallery.js 来改变gallery 的
展示效果（Smooth Gallery 提供了多种不同的显示效果，你可以根据需要进行修改）