CREATING A DYNAMIC ONLINE GALLERY alt="" width="80" height="54" 6. Save , and view it in a browser. It should look the same as Figure 12-4. The only difference is that the thumbnail and its alt text are dynamically generated. You can verify this by looking at the source code. The original static version had an empty alt attribute, but as the following screenshot shows, it now contains the caption from the first record: If things go wrong, make sure there s no gap between the static and dynamically generated text in the image s src attribute. Also check that you re using. | CREATING A DYNAMIC ONLINE GALLERY alt php echo row caption width 80 height 54 a td 6. Save and view it in a browser. It should look the same as Figure 12-4. The only difference is that the thumbnail and its alt text are dynamically generated. You can verify this by looking at the source code. The original static version had an empty alt attribute but as the following screenshot shows it now contains the caption from the first record table id thumbs . tr This row needs to be repeated tdxa href gallery . php ximg src images thuinbs basin. jpg alt Water basin at Ryoanji I temple Kyoto width 80 height 54 x ax td tr Navigation link needs to go here table If things go wrong make sure there s no gap between the static and dynamically generated text in the image s src attribute. Also check that you re using the right code for the type of connection you have created with MySQL. You can check your code against or in the ch12 folder. 7. Once you have confirmed that you re picking up the details from the database you can convert the code for the main image. Amend it like this new code is in bold div id main_image p img src images php echo mainImage alt php echo caption php echo imageSize 3 p p php echo caption p div 8. As explained in Chapter 8 getimagesize returns an array the fourth element of which contains a string with the width and height of an image ready for insertion into an img tag. So imageSize 3 inserts the correct dimensions for the main image. Test the page again. It should still look the same as Figure 12-4 but the images and caption are being drawn dynamically from the database. You can check your code against or in the ch12 folder. Building the dynamic elements The first thing that you need to do after converting the static page is to display all the thumbnails and build dynamic links that will enable you to display the large version of any thumbnail that has been .
