Make Image Clickable on Slide Show
<p>I'm using this code for slide show. I can't seem to get the image clickable without losing the name in the 'name' div.</p>

<p>What I'm after is to be able to click on a picture on the slide show and be able to go to the details page. Whenever I get the image clickable, the name does not display in the 'name' div; and if I remove the link, then the name will display. </p>

<p>I don't know how to solve this problem.</p>

<p>Here's the code I'm using.</p>

<pre><code>&lt;!DOCTYPE html&gt;

&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 )){
    &lt;!--HERE ON THIS LINE---- &gt; echo "&lt;a href=\"show.php?id=".$info['id']."\"&gt;&lt;img src=\"http://localhost:8080/about/images/".$info['photo'] . "\" alt=\"".$info['name'] ."\"/&gt;"; 
  }
?&gt;

&lt;/div&gt;

 &lt;div id="name"&gt;

 &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>

<p>Thanks for your assistance</p>
