và những người không thích sử dụng một con chuột. Ngồi xuống một ngày, ngăt kêt nôi chuột của bạn từ máy tính của bạn, và tìm hiểu làm thế nào để điều hướng web bằng cách sử dụng chỉ có một con chuột một mắt mở thực sự kinh nghiệm | 208 CHAPTER 9 BUILDING AN IMAGE GALLERY Listing 9-14. Figuring Out When the Next and Previous Navigational Links Should Be Hidden or Revealed Hide the next link if we re at the end of the slideshow if next cur hide id gallery_next Otherwise make sure that it s visible else show id gallery_next Hide the previous link if we re at the start of the slideshow if prev cur hide id gallery_prev Otherwise we need to be sure that it s visible else show id gallery_prev Finally Listing 9-15 shows the CSS styling necessary to position the navigational links in their correct positions. Listing 9-15. The CSS for Positioning the Navigational Links gallery_prev gallery_next position absolute bottom 0px right 0px z-index 120 width 60px text-align center font-size 12px padding 4px gallery_prev left 0px gallery_prev a gallery_next a color 000 text-decoration none An example of the navigation in use is shown in Figure 9-5. Notice that at the bottom of the image gallery there is a link directing the user to visit the next image in the gallery. The link is hidden and shown appropriately based on where the user currently is in the gallery. CHAPTER 9 BUILDING AN IMAGE GALLERY 209 Slideshow The final piece of your image gallery is a nice touch that many users will enjoy a dynamic graceful slideshow of all the images in the gallery. This particular addition is fairly simple to add in considering the amount of previous navigational work. Quite simply the process of creating a slideshow is broken down into two steps 1. Create an additional link in the document for the user to click to start the slideshow. 2. Build the slideshow process itself which controls which images to display and when to switch between them . The first step is shown in Listing 9-16. Listing 9-16. Adding Additional Navigation to the DOM for the User to Initalize the Slideshow function addSlideshow elem We re going to create some extra contextual information surrounding the slideshow Create the slideshow header wrapper var
