bousernamee5
New Member
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:\[code\]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(); }); });\[/code\]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.thanksussteele
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:\[code\]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(); }); });\[/code\]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.thanksussteele