Make Image Clickable on Slide Show
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.
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.
I don't know how to solve this problem.
Here's the code I'm using.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>JQuery Cycle Plugin - Pager Demo with Prev/Next Controls</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link r开发者_运维知识库el="stylesheet" type="text/css" media="screen" href="cycle.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<style type="text/css">
#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; }
</style>
<script type="text/javascript">
$(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); }
});
});
</script>
<style type="text/css">
#left, #slideshow, #right { float: left; width: 200px; }
</style>
</head>
<body>
<!-- left nav bar -->
<div id="left">
<a href="#"><span class="prev">Prev</span></a>
<a href="#"><span class="next">Next</span></a>
<ul class="nav"></ul>
</div>
<!-- slideshow -->
<div id="slideshow">
<?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 )){
<!--HERE ON THIS LINE---- > echo "<a href=\"show.php?id=".$info['id']."\"><img src=\"http://localhost:8080/about/images/".$info['photo'] . "\" alt=\"".$info['name'] ."\"/>";
}
?>
</div>
<div id="name">
</div>
<!-- right nav bar -->
<div id="right">
<a href="#"><span class="prev">Prev</span></a>
<a href="#"><span class="next">Next</span></a>
<ul class="nav"></ul>
</div>
</div>
</body>
</html>
Thanks for your assistance
Problem comes from your before parameter in the cycle definition
function () { $("#name").text(this.alt); }
It should be something like
function () { $("#name").text($(this).children("img").attr("alt")); }
I can't test it right now, though.
Never used cycle plugin personally, but I think you are not attaching click callback to the image at all. Instead, you attaching it on before, which makes name be displayed in your div when images start swapping. See cycle plugin reference for details
To display image name on click use the following code:
$('.clickable_image').click(function(){
$('#name').html($(this).attr('alt'));
});
Don't forget to add class clickable_image to your images.
Also, if you plan add images dynamically, live function may be helpful.
I'm not sure if this affects the jQuery code or not because I can't test it right now, but you don't have a closing A tag.
Should look like this:
echo "<a href=\"show.php?id=".$info['id']."\"><img src=\"http://localhost:8080/about/images/".$info['photo'] . "\" alt=\"".$info['name'] ."\"/></a>";
加载中,请稍侯......
精彩评论