How to : Integrate a slideshow in your wordpress theme

Posted by X-OR on Jul 31, 2008 in Blogging, featured, wordpress • 86 comments

In the previous tutorial i explained how to make a control panel for your theme, now let’s go further with the integration of Smooth Gallery (from JonDesign), a javascript gallery based on mootools.

In this tutorial, i will also use mimbo (from Darren Hoyt).

Most theme don't use all the possibilies of wordpress and smoothgallery. In some of them (like massive news) you must hardcode the links to the post in the control panel. That's why i decided to do this tutorial.

Smooth Gallery in Wordpress
this is what it will look like

you can see working example on the main page of this site

What do we need ?

The first thing we need to do is to download SmoothGallery 2.0

First Step : Put the files where they have to go

Unzip your smoothgallery archive

copy the css directory to wp-content/themes/your_theme_name

copy the scripts directory to wp-content/themes/your_theme_name

Once this first step is done, we have all ressources needed to run the SmoothGallery on our blog

Second Step : Add the reference to the files in your Header

Add these lines in your header file (wp-content/themes/your_theme_name/header.php)

<!--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>

Once this step is done, SmoothGallery is ready for use in your theme

Third Step : Create the file gallery.php (in your theme directory), this file will generate the html code to show your gallery.

before starting this step, bear in mind the structure of a smoothgallery element

<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>

In the gallery.php file there are two parts.

The initialisation of the SmoothGallery Script (JS)
The creation of the html/php code for the gallery

you can download the proper code here

<!-- 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>

Fourth step : include the gallery in your theme

With mimbo it's really simple, you only have to replace all the code between these two lines
<div class="feature clearfloat" id="lead">
</div><!--END FEATURE-->
by
<?php include ('gallery.php'); ?>

once this is done, your gallery is working (if you have set the custom field of your posts of course)

If you are using another theme, it's not a problem, you can put the include wherever you want

Last step (not mandatory) : Customize your gallery

open the file wp-content/themes/your_theme_name/css/jd.gallery.css, you can set the height and width of your gallery.

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

you can also modify the options of your gallery in wp-content/themes/your_theme_name/scripts/jd.gallery.js

more info on customization on Smooth Gallery Website

86 reactions

» Comments RSS Feed

Leave a comment