PHP & MySQL 数据库显示多张图片答案

【问题标题】：PHP & MySQL Database Display multiple imagesPHP & MySQL 数据库显示多张图片
【发布时间】：2011-04-23 00:30:42
【问题描述】：

我在显示来自 MySQL 数据库的图像方面需要帮助。我拥有的是一个动态 PHP/HTML 表，它有多个带有分页链接的页面。表格布局为：书名、作者、出版商、类别和图像。我可以使用连接脚本连接到数据库 - 工作正常。我可以在上述位置的正确列和行中看到表格的所有信息，包括图像。此时我将鼠标悬停在图像下方的链接上并使用 jQuery 弹出图像的更大视图，但这仅适用
在每个 HTML 页面的第一张图片上。

首先我使用连接脚本连接到数据库。
这是我用来查询数据库的代码：

这里是 jQuery 脚本：

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
  $bg = ($bg=='#ffffff' ? '#FCFCFC' : '#ffffff'); // Switch the background color. 
  echo '<tr bgcolor="' . $bg . '">
  <td id="books">' . '<h4>'. $row['booktitle'] .'</h4>'. '</td>
  <td id="auth">' . $row['author'] . '</td>
  <td id="publ">' . $row['publisher'] . '</td>
  <td id="cat">' . $row['category'] . '</td>
  <td id="img">'.'<img src="'. $row['image'].'" width="90"/>'.'<div span="getLargeImage">'.'<a href="'. $row['image'].'" id="popup">Larger view</a>'.'</span>'.'</td>
 </tr>';


$(document).ready(function(){

$('#popup').hover(function(e) {
   var getId = $(this).attr("id");
   var getAttr = $(this).attr("href"); 
   var html = '<div id="full_img">';
   html +=    '<img src="'+ getAttr +' />';
   html +=  '</div>'; 

  //console.log(getId);    //returns the a href id
   //console.log(getAttr);     //returns the a href link  

   $('body').append(html).children('#full_img').hide().fadeIn(100);
   $('#full_img').animate({"width" : "0px","width" : "250px"}, 100);
   $('#full_img').css('top', e.pageY + -160).css('left', e.pageX - 350);

  }, function() {
   $('#full_img').animate({"width" : "250px","width" : "0px"}, 100);
   $('#full_img').fadeOut(10);
   $('#full_img').remove();  

  });

 });

正如我上面所说的，jQuery hover/show large image 仅适用于每个页面的表格第一行中的图像，要查看此时它是如何工作的，请浏览：

http://stevenjsteele.com/websitedesign/php/database/index.php

任何帮助将不胜感激。谢谢美国钢铁公司

【问题讨论】：

标签： php jquery mysql

【解决方案1】：

问题是你给他们每个人一个相同的ID，而不是给他们所有相同的类

 while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
   $bg = ($bg=='#ffffff' ? '#FCFCFC' : '#ffffff'); // Switch the background color. 
   echo '<tr bgcolor="' . $bg . '">
   <td id="books">' . '<h4>'. $row['booktitle'] .'</h4>'. '</td>
   <td id="auth">' . $row['author'] . '</td>
   <td id="publ">' . $row['publisher'] . '</td>
   <td id="cat">' . $row['category'] . '</td>
   <td id="img">'.'<img src="'. $row['image'].'" width="90"/>'.'<div span="getLargeImage">'.'<a href="'. $row['image'].'"       class="popup">Larger view</a>'.'</span>'.'</td>
  </tr>';

然后定位类

 $(document).ready(function(){

 $('.popup').hover(function(e) {
    var getId = $(this).attr("id");
    var getAttr = $(this).attr("href"); 
    var html = '<div id="full_img">';
    html +=    '<img src="'+ getAttr +' />';
    html +=  '</div>'; 

   //console.log(getId);    //returns the a href id
    //console.log(getAttr);     //returns the a href link  

    $('body').append(html).children('#full_img').hide().fadeIn(100);
    $('#full_img').animate({"width" : "0px","width" : "250px"}, 100);
    $('#full_img').css('top', e.pageY + -160).css('left', e.pageX - 350);

   }, function() {
    $('#full_img').animate({"width" : "250px","width" : "0px"}, 100);
    $('#full_img').fadeOut(10);
    $('#full_img').remove();  

   });

还应该注意的是，你在做这一切。如果你想使用 id，你需要给它们必须是唯一的。

【讨论】：