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 “gallery_1.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. If you did not add this code during the "Interactivity" step, add this CSS code in the <head> tag under the code that links the other CSS files.

    If you already completed this step, move forward and skip this step:

    5. 
<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css">
  5. Ensure that the "lightbox.js" and "jquery.lightbox-0.5.js" files are saved in the "js" folder
  6. If you did not this in the "Interactivity" step, add this JAVASCRIPT code in the <head> tag If you already completed this step, move forward and skip this step:
    7. 
<!-- Opening jQuery lightBox plugin -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
<!-- Closing jQuery lightBox plugin --></script>

<!--[if IE]-->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!--[endif]-->

    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. Add an Unordered List into the #gallery by typing <ul> and </ul>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.
    11. 
<div id="stage">

<div id="col_1">
<h1> Gallery Theme Name</h1>
<p class="bodytext">Describe the theme and content for this specific page here. The paragraph should be unique and informative.</p>
<!--Closing Tag for col_1--></div>


<div id="gallery"> 

<ul>

</ul>

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

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

    Add Images to Gallery and Make Interactive

  11. Insert one image from the “thumbs” folder into the #gallery tag as a List Item <li>:
  12. Copy and paste the code for each image , but change the following content ( to what is appropriate—they should not all be the same):
    13. 
<div id="gallery"> 

<ul>


<!--This is the code for Image #1-->
<li>
<a href="images/large/red_lg_1.jpg" title="Large Image title: © Source Link" data-lightbox="gallery">
<img src="images/thumbs/red_sm_1.jpg" alt="Thumbnail Image Description" title="Thumbnail Image Title"></a>
</li>

<!--This is the code for Image #2-->
<li>
<a href="images/large/red_lg_2.jpg" title="Large Image title: © Source Link" data-lightbox="gallery">
<img src="images/thumbs/red_sm_2.jpg" alt="Thumbnail Image Description" title="Thumbnail Image Title"></a>
</li>

<!--This is the code for Image...-->
<li>
<!--Add additional images individually as list items here-->
</li>

</ul>

<!--Closing Tag for gallery--></div>
  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. Add additional images into #gallery. You can do this by copying and pasting the code for Image #1 and then changing the file names for each image.
  15. Test the page again before you proceed to next steps.

    16. Make Other Gallery Pages

  16. Save a new version of the fileas “gallery_2.html”  (File > Save As).
  17. Change the content to fit the second theme/color (images/text).
  18. Repeat Steps for the final Gallery page, as well.
<a href>  refers to a link that will open a file when it is clicked on by the visitor.