I often see questions on the ExpressionEngine Forums regarding photo galleries. In EE Version 2.0 the Photo Gallery module by EllisLab is going to be discontinued but there are some other reasons for using Weblogs instead of the Photo Gallery Module.
So...
Doing a search for JQuery Image Slideshow on Google nets quite a few solutions for the designer wanting to integrate a rotating image effect on their website. We are kinda partial to Mike Alsup's Cycle JQuery plugin. If you use his code try and make a donation.
In this tutorial we will walk through the steps necessary to integrate the Cycle code into our PhotoStudio template. But it should be noted that these steps can be used as part of any website.
First head on over to Mike's site and download the code. You will have to copy and paste into a new .js file. Go ahead and name it jquery.cycle.js and save it to a folder named js in the root of your web hosting.
Next click here to download the JQuery package. The file that you download should be named jquery-1.3.2.min.js. Make sure to save it the the js folder as well.
Next step is to link to these files in the Head portion of your HTML in the template you are going to be using like so:
You will have to define a weblog to hold the images and the following custom fields (largeimage, title). The largeimage field is a text input field and basically holds the path to the image not the HTML code that displays an image. That code will reside in the template so that we can use the title as the alt text.
OK so let's start with bringing the images into the template. Make sure to add the code pointing to the javascript files. The exp:weblog statement that pulls the featured image is perfect for building this out. Basically you want it to look like below.
<div>{exp:weblog:entries weblog='[your weblog here]' limit='[your qty of images here]'} <figure><img alt="{title}" src="{largeimage}" data-image="isko21ifxhvl"></figure> {/exp:weblog:entries}</div>
In the code above the div wrapper with the class='slideshow' is the hook for the JQuery to grab onto. Any image tag that is in that div will be a part of the rotator.
Below where you linked to the javascript files you will want to put the following code. This is taken from the beginners example on the Mike's website. Basically the fx: 'fade' statement in this code is what defines the effects. You can read up on all of the additional effects here
That's it! If you go to the page then you should see the rotating images.