在幻燈片放映中顯示圖像名稱

-2

我一直在學習使用我在某個網站上看到的幻燈片代碼。儘管我已經設法使它能夠很好地顯示圖像，但我無法弄清楚如何在幻燈片更改時在圖像旁邊的另一個表格中顯示圖像名稱。在幻燈片放映中顯示圖像名稱

我有provided the code here。所以我需要你的幫助。我在尋找的是當幻燈片隨着另一張圖片而改變時，我希望圖片名稱顯示在其旁邊。

感謝您的支持。

更新 - 這是一個基於Gilly3的建議更新的代碼，但我仍然對如何獲取名稱顯示

<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)){ 
       echo "<img src=\"http://localhost:8080/about/images/".$info['photo'] . "\" alt=\"".$info['name'] ."\"/>"; 
    } 
?> 

</div> 

<div id="name"> 
HELP ME PRINT THE NAME HERE 
</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-17 Julie

提供代碼* here *，並且現場演示會很有用（可能在[JS Fiddle]（http://jsfiddle.net/）供我們使用，並查看您的工作內容與 –

你有沒有嘗試過任何東西？ –

使用無論是before或after事件，這取決於當你想上的名字更改。

$('#slideshow').cycle({ 
    prev: '.prev', 
    next: '.next', 
    pager: '.nav', 
    before: function() { 
     $("#name").text(this.alt); 
    } 
});

您需要在您的php中填寫名稱爲alt。如果您不想添加工具提示，請添加title=""。

echo "<img src=\"http://localhost:8080/people/uploads/".$info['pic'] . "\" alt=\"".$info['name'] . "\" title=\"\" />";

來源

2011-08-17 22:38:13 gilly3

感謝Gilly3的幫助。我是新來的所有這些，不知道之前或之後是什麼:(你會介意告訴我如何使用它嗎？我非常感謝你的幫助。 – Julie

@Julie - 在你調用'.cycle（）'的'before'或'after'屬性時，像我在第一個代碼中所做的那樣例如在我的答案中，這就是你所要做的，你提供的函數將在每次圖像轉換之前或之後被調用，它在這個函數中你會設置圖像的名稱。 – gilly3

再次感謝Gilly3，我有點失落，所以我發佈了上面的更新代碼。但除了圖像之外，似乎沒有任何東西可以顯示。名字沒有顯示在'name'分區中：（ – Julie

這裏困惑是什麼，我認爲應該工作：

爲每張圖片添加一個'data-name'屬性。類似於：

echo "<img src='http://localhost:8080/people/uploads/".$info['pic']."' data-name='".$info['name']."'/>";

在jquery.cycle插件中設置了'onPrevNextEvent'選項。可能是這樣的：

希望有幫助。

鮑勃

來源

2011-08-17 22:15:48 rcravens

感謝鮑勃，我會試試看，看看它是否有幫助。非常感謝。 – Julie

在幻燈片放映中顯示圖像名稱

回答

相關問題