Please get the demo files in the shared folder, and preview the slideshow across browsers.
Steps for creating a gallery with jQuery and Dreamweaver:
- Prepare your slideshow images in Photoshop (layer by layer)
- Prepare the blending, gradient and shadow effects in Fireworks
(then “copy select” the properties to CSS file later) - Create your layout in HTML5 and CSS
- Create an HTML5 file
- Create empty CSS rules
- Create div classes
- Add CSS properties for the slideshow container
- Add CSS properties for the content area
- Add CSS properties for the headings
- Add and link the thumbnail images
- Style the thumbnail images with CSS
- Create preview images from anchor links
- Download/add jQuery to your project: http://jquery.com
- Add a fancybox plug-in for jQuery: Download the FancyBox 2: http://fancybox.net
- Link the CSS and Javascript files
- Format > CSS Styles > Attach Style Sheet to link the CSS file
- Window > Insert > Common > Script to link the Javascript file