How to make a Slideshow Gallery in Wordpress
Friday, November 20th, 2009
How to make a Slideshow Gallery in Wordpress
Incorporating a slideshow gallery in wordpress can bring you positive attention and drive more traffic to your site. By following the directions in this article, you will have the slideshow gallery functioning nicely on your site within a short amount of time.
So Let’s Get Started!
To get started you will need to acquire the necessary tools. This will require you to download SmoothGallery 2.0. Once this is complete you can move on to the next step in the process of making your site the best in your market.
Step One: Time to move the files!
You need to get your files in the right place to incorporate them into the slide show. You first need to unzip them from the smoothgallery archive. Once you have them unzipped you should take the css directory and copy it to wp-content/themes/your_theme_name. You will also need to save a copy of the scripts directory to wp-content/themes/your_theme_name.
As soon as you have completed these steps you will be ready to move on to the next step. You will have installed and moved the files you are ready to incorporate the SmoothGallery in the design of your blog.
Step Two: Move the references to the files to your Header
The next step requires some coding. These lines should be added to your header file at wp-content/themes/your_theme_name/header.php. Below is the code that is necessary to do this.
<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>
As soon as this second step is completed you will have a fully functional SmoothGallery to use on your blog. Your theme will look great in this form and you are almost there; soon you’ll realize how great it will be.
Step Three: Set up the file gallery.php (this will be in your theme directory).
This step will generate the html code that handles the display of images in your gallery. You should pay attention to the structure of the elements in smoothgallery.
<h3>Item Title</h3>
<p>Item Description</p>
<a href=”Link to Item ” title=”open image”></a>
<img src=”Image of item” alt=”Item Title” />
<img src=”Thumbmail of item” alt=”thumbnail of Item Title” />
</div>
There are two parts to the gallery.php file. They are the SmoothGallery Script (JS) initialization and the gallery html/php codes that are created.
To initialize the SmoothGallery use the code below:
<!– 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>
<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>
<!–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”></a>
<!– Define the image for the gallery –>
<img src=”<?php echo $values[0]; ?>” alt=”<?php the_title(); ?>”/>
<!– Define the thumbnail for the gallery –>
<img src=”<?php echo $values[0]; ?>” alt=”<?php the_title(); ?>”/>
</div>
<?php }?>
<?php endwhile; ?>
</div>
</div>
Step Four: Incorporate the gallery into your theme.
Using Mimbo really makes this step in the process a simple task. All you need to do is replace any code that is found between each of these code lines:
<div id=”lead”>
</div><!–END FEATURE–>
And use:
After you have completed this step your gallery should be up and ready to be displayed, assuming that you have completed all of the steps listed above.
Using another theme is not a problem at all as you can include it anywhere that you want to.
Optional step: Make customizations to your Gallery
After you have completed the steps above and your gallery is ready to use, you may want to make some changes to its appearance. You can change the width and height of your gallery easily by first opening wp-content/themes/your_theme_name/css/jd.gallery.css.
Follow these directions and find yourself with the best looking blog around.
