PHP & MySQL Database Display multiple images

Question

Hello All, I need help with displaying images from a MySQL database. What I have is a an Dynamic PHP/HTML table that has multiple pages with a pagination link. The table layout is: Book Title, Author, Publisher, Category and image. I can connect to database with connection script - working OK. I can see all the information for the table at the correct column and row per above locations including the images. At this point I hover on link below image and use jQuery to pop up larger view of an image, but this works only
on the first image of each HTMl page.

First I connect to Database with a connection script.
This is the code I use to query database:

here is the jQuery script:

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();  

  });

 });

As I said above the jQuery hover/show larger image works only on image in first row of table for each page, to see how it is working at this point surf to:

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

any help would be appreciated. thanks ussteele

Answer 1

the problem is that your giving every one of them the same id instead give them all the same class

 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>';

then target the class

 $(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();  

   });

it should also be noted that your doing that all around. if you want to use id's you need to give they MUST be unique .