Add Slideshow to Your Website

April 16th, 2010

Slideshows are fun. You can use that to share event photos, or you can use that to rotate through a list of your portfolio items without people have to click around or scroll to read all.

There are many ways to get this done. We will look at two easy-to-use options in this article.

NextGen Gallery

If you have a WordPress site, you can get this plug-in installed and configured to use with minimal effort. This plug-in is a very popular one – has been downloaded for more than 1.75 million times. It also has good rating – 4 out of 5 stars with 800 ratings. In the WordPress world, this is a very good score.

Key benefits:

  • Easy to manage – you can create multiple galleries, upload images in bulk, then one click to put the gallery on to your web page
  • Flexible – you can choose slideshow option, or you can choose listing
  • Watermark – for photographers, while showing off your best work, you can add watermark to all the images so people can’t copy them off your site
  • Edit thumbnail – thumbnails are auto-generated but you can edit and specify which area of your photo to use as thumbnail

Screenshot Admin Area

Screenshot Flexible template layout

jQuery Cycle Plugin

This plugin can be put on any website, not just WordPress site. But you do need a little bit of programming skills.

  • Various effects: shuffle, fade, zoom, turn down …
  • Flexible: you can adjust how long to pause between each slide, how fast to change from one slide to another, whether to continuous roate or stop after one cycle
  • You can include both image and text in the rotation
  • Each slide can have unique or the same link to other places

One Example

Visit the following page you can see more demos and source code, along with instructions on how to integration to your site:

Other Resources

This article summarized a number of slideshow options. One thing to bear in mind is that iPhone doesn’t support Flash, nor does the new iPad. So you might want to stay away from Flash-based players.

Please add your comment