Gallery with jQuery & Dreamweaver

Posted by: Ping

Please get the demo files in the shared folder, and preview the slideshow across browsers.

Steps for creating a gallery with jQuery and Dreamweaver:

  1. Prepare your slideshow images in Photoshop (layer by layer)
  2. Prepare the blending, gradient and shadow effects in Fireworks
    (then “copy select” the properties to CSS file later)
  3. 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
  4. Add and link the thumbnail images
  5. Style the thumbnail images with CSS
  6. Create preview images from anchor links
  7. Download/add jQuery to your project: http://jquery.com
  8. Add a fancybox plug-in for jQuery: Download the FancyBox 2: http://fancybox.net
  9. 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