title: Display Image Name in Slide Show
body: <p>I have been learning to use a slideshow code I saw on a website somewhere. Although I have managed to get it working with the images showing well, but I can't figure out how to show the image name in another table alongside the images when the slide changes.</p>
  
  <p>I have <a href="http://pastebin.com/XFkA2wPe" rel="nofollow">provided the code here</a>. so I need your help. What I'm looking for s that whenever the slideshow changes with another picture, I want the picture name displayed next to it.</p>
  
  <p>Thanks for your asisstance.</p>
  
  <p><strong>Update</strong> - Here's the updated code based on Gilly3's suggestion, but I'm still confused on how to get the name displayed</p>
  
  <p></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
  
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
  &lt;meta http-equiv="Content-Style-Type" content="text/css" /&gt;
  &lt;title&gt;JQuery Cycle Plugin - Pager Demo with Prev/Next Controls&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="../jq.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="cycle.css" /&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"&gt;&lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  #main { margin: 20px }
  #nav { margin: 10px; position: relative }
  #nav li { float: left; list-style: none}
  #nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
  #nav li.activeSlide a { background: #faa; color: black }
  #nav a:focus { outline: none; }
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
       $('#slideshow').cycle({
            prev:    '.prev', // Setup prev links
            next:    '.next', // Setup next links
            pager:   '.nav',       // Setup pager navs
  
           before: function () {
          $("#name").text(this.alt);
      }
       }); 
  });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  #left, #slideshow, #right { float: left; width: 200px; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- left nav bar --&gt;
  &lt;div id="left"&gt;
      &lt;a href="#"&gt;&lt;span class="prev"&gt;Prev&lt;/span&gt;&lt;/a&gt; 
      &lt;a href="#"&gt;&lt;span class="next"&gt;Next&lt;/span&gt;&lt;/a&gt;
  
      &lt;ul class="nav"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;!-- slideshow --&gt;
  &lt;div id="slideshow"&gt;
  
   &lt;?php
                   mysql_connect("localhost", "root", "")or die("cannot connect");
                   mysql_select_db($db_name)or die("cannot select DB");
  
                   $data = mysql_query("SELECT * FROM people") or die(mysql_error());
                   while($info = mysql_fetch_array( $data )){
                   echo "&lt;img src=\"http://localhost:8080/about/images/".$info['photo'] . "\" alt=\"".$info['name'] ."\"/&gt;";
    }
  ?&gt;
  
  &lt;/div&gt;
  
  &lt;div id="name"&gt;
  HELP ME PRINT THE NAME HERE
  &lt;/div&gt;
  &lt;!-- right nav bar --&gt;
  &lt;div id="right"&gt;
      &lt;a href="#"&gt;&lt;span class="prev"&gt;Prev&lt;/span&gt;&lt;/a&gt; 
      &lt;a href="#"&gt;&lt;span class="next"&gt;Next&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="nav"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>