How to display photo descriptions

If you want to include your pictures in an AJAX photo gallery and display a short description for each one of them (as a tooltip, when the mouse pointer hovers the picture), you need to have the photo descriptions stored in an .xml file. There are two ways in which you can do this:

1. Store the photo descriptions in the database and export them in an .xml file as shown below.
   
   Note: Besides MX AJAX Toolbox, there is another Dreamweaver extension you need in order to follow this tutorial, namely XML Import-Export - Try | Buy.
                          

2. Create the .xml file yourself as shown below.

So, in order to complete this task, you must first come up with the .xml file and then create the AJAX photo gallery.

Create the XML file

No matter if you are using a database or not, here is what you need to do first:

• Create a new page in one of your sites (used for testing/learning), in the root, and name it photo_gallery.

• Copy the \tutorials\Photo description\photos folder from the .zip package in the local site root. It contains the image files used for the photo gallery.

From this point on, regarding the .xml file, follow the instructions below corresponding to your situation.

Create the XML file by using a database

If you want to store the photo descriptions in a database and then export them into an .xml file, follow the next steps:

1. You need one database table, say image_img, with three columns: id_img, filename_img, and description_img (their names are more than suggestive). Create the database (structure and records) by using the scripts provided in the .zip package (either .sql or .mdb), in the \tutorials\Photo description\db folder.

2. Open the photo_gallery file and define a new Dreamweaver database connection: conn_photo_desc. Configure it to connect to your database server and make it point to the database containing the table described above.

3. Create a new file in the site root and name it xml_export. This is where you will apply the server behavior for exporting data from the database.

4. Open the xml_export file and go to the Application panel, Bindings -> + -> Recordset (Query) to create a recordset. Configure the window that opens as shown below:
   
   
                          

5. • Name the recordset rsPhotos.

   • Select the conn_photo_desc database connection.

   • Select the image_img database table to retrieve the photos information.

   • Leave the rest of the interface controls to their default values. To learn more about their role and default value, click the Help button on the right.

   • You can press the Test button and see the retrieved data (image filenames and descriptions).

   • Click OK to create the recordset.

5. Apply the Export Recordset As XML server behavior from the Application panel, Server Behaviors-> + -> InterAKT. The dialog box has two tabs. If so far you followed the exact steps of the tutorial, and if there was no user interface persistence that affected the default settings, the dialog box is already configured as needed:

6. • The Basic tab should look like this:
     
     
                           
     Note: Notice that the names for the XML fields (id, filename, description) are suggested according to the names of the database table columns.

   • The Advanced tab should look like this:
     
     
                          
     Note 1: The recordset columns must be exported as Nodes, and not as Attributes, in order to be compatible with the AJAX photo gallery implementation.
     Note 2: The export method could be any of the two (In browser or As file). The advantage of using the one in browser is that whenever you make changes in the database (add records, change their order, etc.), they will be visible in the photo gallery, because you are not using an .xml file previously saved in your site, but the URL to a file that dynamically retrieves data from the database.

   • Click OK to apply the server behavior.

Save, upload, and preview the xml_export page in browser. You will see the database table records exported in the XML format. You can close the xml_export file.

Create the XML file manually, without using a database

If you want to store the photo descriptions in an .xml file from the beginning, and do not involve any database, follow the next steps:

1. From the File menu in Dreamweaver, choose the first option, namely New (or press Ctrl+N in your site). A dialog box with two tabs will pop-up. You only need to set some options in the first tab (General):
   
   
                                        

2. • In the Category list on the left select the Basic page option.

   • In the Basic page list on the right select the XML option.

   • Click the Create button to create the .xml file in your site.

2. The new file will open, already having a line of code inside: <?xml version="1.0" encoding="iso-8859-1"?>. Add the XML content below that line, considering these two conditions:

3. • You must organize the XML content in nodes (not attributes) in order to be compatible with the AJAX photo gallery implementation.

   • Each XML record/row should have at least two nodes: the image filename and its description. You could name these nodes filename and description.

3. Checking the filenames of your images stored in the photos site folder, you can complete the .xml file with:
   
   <root>
   <row>
      <filename>Laura.jpg</filename>
      <description>My daughter, Laura, and our dog, Dino.</description>
   </row>
   <row>
      <filename>Dino.jpg</filename>
      <description>Dino playing in the garden.</description>
   </row>
   <row>
      <filename>Winter.jpg</filename>
      <description>Christmas morning in the Alps.</description>
   </row>
   </root>
                                        

4. Complete the file with a corresponding <row> tag for each image in your folder.

Save the file in your site root under the photo_desc.xml name, and then close it.

Build the photo gallery

Now that the photo descriptions are stored in an .xml file, you can go ahead and build the AJAX photo gallery that displays for each photograph a short description:

1. Open the photo_gallery file, if not already opened.

2. Apply the AJAX Photo Gallery server behavior from the MX AJAX Toolbox tab of the Insert bar. The dialog box has two tabs.

3. Configure the first tab (Basic) of the AJAX Photo Gallery command as shown below:
   
   
                                 

4. • Leave the suggested photo gallery name.

   • Click the Browse button to locate, in the site structure, the photos folder storing the needed pictures (you copied it in the site root).

   • In the Photo width text box enter 400.

   • In the Photo height text box enter 400.

   • Choose to display the thumbnails navigation bar at the Bottom.

   • Choose not to show the thumbnail loader.

   • Do not check the Enable slideshow option.

   • Click the next tab to continue configuring the command.

4. Configure the second tab (Advanced) of the AJAX Photo Gallery command as shown below:

5. • Click the Browse button next to the XML file or URL text box to locate, in the site structure, the file storing the photos information in XML format:

   • • Select the xml_export file if you are using a database:
       
       
                                     

     • Select the photo_desc.xml file if you are not using a database:
       
       
                                    

   • In the Photo name node text box enter filename.

   • In the Photo description node text box enter description.

   • Click OK to generate the photo gallery.

Save, upload, and preview the photo_gallery page in browser:

Notice how when the mouse pointer hovers the current image or any of the visible thumbnails, the photo description is displayed as a tooltip. If you manually created the .xml file and did not cover all the photos in the site folder, for those without a description, the filename will be displayed as a tooltip.