ATUS Home

How to Build a Photo Gallery

Instructions

See Demo

If you're not sure which case your site fits, first look at your folder structure of your web site. If it has these folders: gallery, includes, resources, Templates, you probably already have the new template so go to Case 1.

If your web site folder has these folders: includes, resources, Templates, but NOT the gallery folder, you probably have the older template, so go to Case 2.

Otherwise go to Case 3.

Case 1: You already have the "new" 2010 template

  1. Size the photos you want to use so they are 550 pixels wide or less. (see instructions for resizing for Photoshop or Fireworks)
  2. Place the photos you want to use in the gallery folder. Most formats work.
  3. In Dreamweaver, either modify the photos.shtml page or start a new page on the gallery template by selecting New, Page From Template, gallery, Create and a new page will appear.
  4. Select one of the provided photos and change the src of the image to one of your images. Repeat for each of the four stock images supplied.
  5. If you want captions on the photos, select Code View in Dreamweaver. Now place a title field in your image tag so that it looks like the following (the title attribute is bolded):
    <li>
    <img src="/mysite/gallery/beachchairs.JPG" alt="chairs" title="See the Chairs"/>
    </li>
  6. Save your new page and link to it from some page in your site, or add it to your navigation
  7. Open the gallery folder and remove the sample photos we supplied if you still have them: beachchairs, beachpebbles, greytree, and waterdrops.

Case 2: You have an older template and want to upgrade it

Please contact webhelp@wwu.edu for assistance with these instructions.

  1. Add two js files (right click each and save to your resources folder on your site)
    1. jquery.js
    2. jquery.galleria.js
  2. Add css file (right clicking link below and save to your resources folder)
    1. galleria.css
  3. Add these lines of text to the HEADER of your file that will contain the gallery, making sure to change mysite to the actual name for your site (the folder name that comes after www.wwu.edu/... ):
    <link href="/mysite/resources/galleria.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="/mysite/resources/jquery.js"> </script>
    <script type="text/javascript" src="/mysite/resources/jquery.galleria.js"> </script>
    <script type="text/javascript">
      jQuery(function($) {
      $('ul.gallery').galleria(); });
    </script>
  4. Add an unordered list to your code with the class gallery as follows:
    <ul class="gallery">
    <li><img src="/mysite/gallery/beachchairs.JPG" alt="chairs" title="see the chairs"/>
    <li><img src="/mysite/gallery/beachpebbles.JPG" alt="pebbles" />
    <li><img src="/mysite/gallery/greytree.JPG" alt="tree" />
    <li><img src="/mysite/gallery/waterdrops.JPG" alt="water" />
    </ul>
  5. Add this Template file to your site if you want to be able to easily make other gallery pages: (right click link below and save to your Templates folder)
    1. gallery.dwt
  6. Add a gallery folder to your site root
  7. Perform steps 1-6 from Case 1.

Case 3: You want to use it in your own, non-templated site

  1. If you're feeling brave, adapt case 2 to match your folder structure. All the files you need are supplied above.

See Demo of Gallery