База данных PHP и MySQL Отображение нескольких изображений

Question

Мне нужна помощь в отображении изображений из базы данных 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/показать увеличенное изображение работает только на изображении в первой строке таблицы для каждая страница, чтобы увидеть, как она работает в этой точке прибоя, чтобы:

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

любая помощь будет оценена. благодаря ussteele

Answer 1

проблема заключается в том, что ваш давая каждому из них тот же идентификатор, а не давать им все тот же класс

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, вам нужно дать им ДОЛЖНО быть уникальным.