[英]PHP & MySQL Database Display multiple images
我需要显示MySQL数据库图像的帮助。 我所拥有的是一个动态PHP / HTML表,该表具有带有分页链接的多个页面。 表格布局为:书名,作者,出版者,类别和图像。 我可以使用连接脚本连接到数据库-工作正常。 我可以在上述每个位置的正确列和行中看到表格的所有信息,包括图像。 此时,我将鼠标悬停在图像下方的链接上,并使用jQuery弹出图像的较大视图,但这仅适用于
在每个HTM1页面的第一张图片上。
首先,我使用连接脚本连接到数据库。
这是我用来查询数据库的代码:
这是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悬停/显示较大的图像仅适用于每个页面的表格第一行中的图像,以查看此时的工作方式:
http://stevenjsteele.com/websitedesign/php/database/index.php
任何帮助,将不胜感激。 谢谢ussteele
问题是,您给他们每个人都相同的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,则需要给它们提供唯一值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.