Gallery Pages
    Gallery Page Samples

    Now that you have a working one-page website, we are going to add three (3) more pages that feature a gallery that is interactive using jQuery (a type of Javascript).

    Now we are ready to add a new page that will feature a gallery. You will repeat some steps you did when you created your home page.

    You will need to design how the gallery will look and export any images that are needed before you can create a new HTML file.

    Save new HTML File

  1. Open your “index.html” file in Adobe Dreamweaver.
  2. Save a new version of the fileas “color1.html”  (File > Save As)

    3. Add Javascript <head>

  3. Ensure that the "jquery.lightbox-0.5.css" file is saved in the "css" folder
  4. Add this code in the <head> tag under the code that links the other CSS files:
    5. 
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
  5. Ensure that the "lightbox.js" and "lightbox-plus-jquery.min.js" files are saved in the "js" folder
  6. Add this code in the <head> tag:
    7. 
<!--Javascript-->
<script src="js/lightbox.js"></script>
<script src=
"js/lightbox-plus-jquery.min.js"></script>

    Change Structure

  7. Maintain the same main structure as your home page, such as the division Selector IDs (#divs) of: frame, header, header_logo, nav, intro; stage, col_1, footer, footer_social and footer_copyright.

    Delete the div tags: col_2 and col_3.

  8. Replace the content in #col_1 to include the text related to the specific color (Color #1).
  9. Add a new Selector ID called #gallery after #col_1 (where #col_2 used to be) within the #stage. You already have a CSS declaration written in the external CSS files for the #gallery.
    10. 
<div id="stage">

<div id="col_1">
  <h1> Color Name #3</h1>
  <p class="bodytext">Describe the the history, associations and additional color theory about your chosen hue. Describe the the history, associations and additional color theory about your chosen hue.Describe the the history, associations and additional color theory about your chosen hue.</p>
<!--Closing Tag for col_1--></div>
   

<div id="gallery"> 

<!--Closing Tag for gallery--></div>

<!--Closing Tag for stage--></div>

    Add Images to Gallery

  10. Insert one image from the “thumbs” folder into the #gallery tag: 
    
<div id="gallery"> 
<img src="images/thumbs/yellow_sm_1.jpg" width="280" height="280" alt="Image Title"/>
<!--Closing Tag for gallery--></div>

    "yellow_sm_1.jpg" is referencing an image file that is the small thumbnail image that you click on inorder to see the large image in the pop-up interactive gallery slideshow ("Lightbox"). The dimensions default to the size the images was formatted to.

    NOTE: The Location of the file (img src) should be short because it is in your "images" folder. Thi sis a relative location, meaning that the location is based on where this html document is saved. If the "img src" is really long, you likely did not choose the correct file.

    11. Make Images Interactive

    View Example on "Interactivity" Page

  11. Add code to the image code to make it interactive. 
    
<a href="images/large/red_lg_1.jpg" title="Large Image title: © Source Link" data-lightbox="mygallery">
<img src="images/thumbs/red_sm_1.jpg" alt="Thumbnail Image Description" title="Thumbnail Image Title"></a>
    NOTE: The first reference to the image file sis for the LARGE version. The second reference is to the SMALL/THUMB version.
  12. Change the "title" and "alt" tags to be appropriate (as required).
  13. Test the page to make sure the interaction works. If it doesn't work, review the steps to make sure you didn't miss anything.
  14. Copy and paste the code of the image link and change the file names, title, alt tags to what is appropriate—they should not all be the same. 
    
<a href="images/large/red_lg_1.jpg" title="Large Image title: © Source Link" data-lightbox="mygallery">
<img src="images/thumbs/red_sm_1.jpg" alt="Thumbnail Image Description" title="Thumbnail Image Title"></a>

<a href="images/large/red_lg_2.jpg" title="Large Image title: © Source Link" data-lightbox="mygallery">
<img src="images/thumbs/red_sm_2.jpg" alt="Thumbnail Image Description" title="Thumbnail Image Title"></a>
  15. Test your page again before you proceed to next steps.

    16. Make Other Gallery Pages

  16. Save a new version of the fileas “color2.html”  (File > Save As).
  17. Change the content to fit he second color (images/text).
  18. Repeat Steps for the final Gallery page, as well.