使幻燈片放映可點擊圖片

我正在使用此代碼幻燈片放映。我似乎無法讓圖像可點擊而不會丟失'name'div中的名稱。使幻燈片放映可點擊圖片

我所追求的是能夠點擊幻燈片放映中的圖片，並能夠進入詳細信息頁面。每當我點擊圖片時，名稱不會顯示在'name'div中;如果我刪除鏈接，則會顯示該名稱。

我不知道如何解決這個問題。

這是我正在使用的代碼。

<!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 rel="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>

感謝您的幫助

來源

2011-08-18 Julie

問題來自於您的之前參數在循環定義

function() { $("#name").text(this.alt); }

它應該是這樣的

function() { $("#name").text($(this).children("img").attr("alt")); }

我可以」不過，現在就來測試吧。

來源

2011-08-18 11:39:12 TonioElGringo

謝謝你，我會改變它，看看是否有幫助。 – Julie

那簡直太棒了！感謝你 - 它的工作方式像魔術:) – Julie

沒用過cycle插件個人，但我覺得你不重視點擊回調到圖像的。相反，您將它附加到before上，這會使name在圖像開始交換時顯示在您的div中。有關詳細信息，

要在點擊用的顯示圖像的名字下面的代碼見cycle plugin reference：

$('.clickable_image').click(function(){ 
    $('#name').html($(this).attr('alt')); 
});

不要忘記添加clickable_image類圖像。

此外，如果您計劃動態添加圖像，live函數可能會有所幫助。

來源

2011-08-18 11:29:45 J0HN

我不確定這是否會影響jQuery代碼，因爲我現在無法測試它，但是您沒有關閉A標記。

應該是這樣的：

echo "<a href=\"show.php?id=".$info['id']."\"><img src=\"http://localhost:8080/about/images/".$info['photo'] . "\" alt=\"".$info['name'] ."\"/></a>";

來源

2011-08-18 11:30:16 Patrick

我添加了結束標記，但仍然沒有任何區別。將繼續嘗試。再次感謝 – Julie

使幻燈片放映可點擊圖片

回答

相關問題