If you want to show a series of photos (or other content) that would be too large to fit on the screen at full size, then you need to use a photo album. A photo album shows thumbnail photos that, when clicked, reveal the full-size version (Figures 24.8, 24.9, and 24.10). The photo slide is presented in the center of the window, with the page behind grayed out until the visitor clicks the photo slide to close it. They can then choose another photo from the thumbnails to view.
| |
1. | slideControls.js
Create a new external JavaScript file, and save it as slideControls.js (Code 24.13). Steps 2 through 6 apply to this file.
Code 24.13. slideControls.js: The external JavaScript file used to push the larger version of the image onto the page and then hide it when the visitor is finished.| [View full width] function findLivePageWidth () { if (window.innerWidth) return window .innerWidth; if (document.body.clientWidth) return document .body.clientWidth; return (null); } function initSlides () { objectSlide=document.getElementById('slide'); objectCover=document.getElementById('cover'); objectPhotoSlide=document.getElementById('photoSlide'); } function showSlide(evt) { objectPhotoSlide.innerHTML='<img src ="' + evt.src +'" alt="Large  Photo" border="0" />'; objectPhotoSlide.innerHTML+='<p>' + evt.alt +'</p>'; objectLargePhoto=document.getElementById('largePhoto'); livePageWidth = findLivePageWidth(); newLeft = ((livePageWidth/2)-8) - (200); objectSlide.style.left = newLeft + 'px'; objectSlide.style.display = 'block'; objectCover.style.display = 'block'; } function hideSlide () { objectSlide.style.display = 'none'; objectCover.style.display = 'none'; } window.onload=initSlides;
|
|
2. | function findLivePageWidth() {…}
Add the function findLivePageWidth(), which is described in details in Chapter 1.
|
3. | function initSlides() {…}
Add the function initSlide(), which identifies the objects on the page you will be changing to create your slide show.
|
| |
4. | function showSlide (evt) {…}
Add the function showSlide().
This function takes the triggering event (evt) and then places an image tag into the #photoSlide layer with the triggering objects (the thumbnail version of the photo ) source as its source (evt.src) and the alt attribute (evt.alt) as its caption. It then places the #slide layer, with the photo in it, in the center of the screen and turns it on along with the #cover layer . Because the width and height are not defined, the image will appear at its normal size.
|
5. | function hideSlide () {…}
Add the function hideSlide(), which when triggered, will hide the #slide layer and the #cover layer.
|
| |
6. | window.onload=initSlides;
Add a window onload event handler that will trigger the initSlide() function from Step 3.
|
7. | slideStyles.css
Create a new external CSS file called slideStyles.css (Code 24.14). Steps 7 through 11 apply to this file.
Code 24.14. slideStyles.css: The styles used to create the thumbnails, cover, and slide for the photo album. The cover is actually just a layer used to darken the page while a slide is being viewed. #slide { position: absolute ; z-index: 1000 ; display: none ; top: 100px ; text-align: right ; padding: 0px 8px 8px 8px; background-color: #fff; cursor: pointer ; font: bold 10px "helvetica neue", Arial, Helvetica, sans-serif; } #cover { position: absolute ; width: 100 %; height: 100 %; z-index: 100 ; display: none ; background-color: #000; opacity: .75; filter:progid:DXImageTransform. Microsoft.BasicImage(opacity=.75); top: 0px ; left: 0px ; } #photoAlbum { position: relative ; z-index: 0 ; width: 400px ; } #photoAlbum img { width: 20 %; border: 2px solid red; margin: 8px ; vertical-align: top ; } .slideControl { color: red; }
|
|
8. | #slide {…}
Add the #slide ID rule to your CSS. This creates the "slide frame" that the <img> element for the large version of the slide will be put into. It will need to be absolutely positioned (position: absolute), with a high z-index (z-index:1000), and a display setting of none (display:none) when the page loads. Other than that, the style is up to you.
|
9. | #cover {…}
Add the #cover ID rule to your CSS.
This will fill the entire browser window, and is used to provide a background for the slide while also disabling all controls on the screen until the slide is closed. It will need to be absolutely positioned (position:absolute), filling the entire screen (width:100%; height :100%), a z-index lower than the #slide layer but higher than the #photoAlbum (z-index:100), and not displayed when the page first loads (display:none). It also helps to make the layer transparent, so that the page underneath is visible but clearly disabled (opacity: .75).
|
10. | #photoAlbum {…}
Add the #photoAlbum ID to your CSS.This layer is used to hold the photo thumbnails, and should have a z-index lower than the other layers (position:relative; z-index:0).
|
| |
11. | #photoAlbum img {…}
Specify the style for images used within the #photoAlbum layer as the thumbnail versions of the photos. For this example, I've set each image to be smaller than the original (width:20%). However, the percentage sets the final size of the thumbnail based on the width of the #photoAlbum layer rather than the natural size of the original image.
|
12. | index.html
Create a new HTML file and save it as index.html (Code 24.15). Steps 12 through 19 apply to this file.
Code 24.15. index.html: The photo album page with thumbnail images in place. |
13. | <script src ="slideControls.js" type="text/javascript"></script>
Add a call to the external JavaScript file slideControls.js that you set up starting in Step 1.
|
14. | <link href ="slideStyles.css" rel="stylesheet" type ="text/css" media="screen" />
Add a link to the external style sheet slideStyles.css you set up starting with Step 7.
|
15. | <div id ="cover"> </div>
Add your #cover layer, which you set the style for in Step 8.
|
16. | <div id ="slide" onclick="hideSlide();">…</div>
Add the #slide layer, which you set up in Step 8 with an onclick event handler to trigger the hideSlide() function from Step 5. In this example, I also added some instructional text to let the visitor know to click the slide to close it.
|
| |
17. | <div id ="photoSlide">Loading</div>
Within the #slide layer, add the #photoSlide layer. The function showSlide() from Step 4 will place an image tag within this layer for the triggering photograph.
|
18. | <div id ="photoAlbum">…</div>
Add the #photoAlbum layer to your HTML. The photo thumbnails will be in this layer.
|
19. | <img src ="photos/photo-1.jpg" alt="World's Fair" onclick="showSlide(this);"/>
Within the #photoAlbum layer, add the image tags for the photos in your gallery, including the source, an alternative description (used as the caption in the slide), and an onclick event handler to trigger the showSlide() function from Step 4, passing it this event.
|
Tips