2010-10-16 1 views
0

Мне нужна помощь при отображении изображений из базы данных MySQL. У меня есть динамическая таблица PHP/HTML, которая имеет несколько страниц с ссылкой на страницы. Раскладка таблицы: название книги, автор, издатель, категория и изображение. Я могу подключиться к базе данных со сценарием подключения - работать нормально. Я вижу всю информацию для таблицы в правильном столбце и строке на указанные выше места, включая изображения. В этот момент я наводил ссылку на ссылку под уменьшенным изображением и использовал jQuery для отображения увеличенного изображения миниатюры, это работает во всех
браузерах, за исключением Internet Explorer.jquery append html show hide in IE

Сначала я подключаюсь к базе данных с помощью сценария подключения.
Это код, который я использую для запросов к базе данных:

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="isbn">' . $row['isbn'] . '</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>'; 

здесь скрипт JQuery:

$(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); 
     //console.log(getAttr); 
     $('body').append(html).children('#full_img').hide().fadeIn(100); 
     $('#full_img').animate({"width" : "0px","width" : "250px"}, 100); 
     $('#full_img').css('top', e.pageY + -330).css('left', e.pageX - 350); 

    }, function() { 

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

}); 

Как я уже говорил выше парение JQuery/показать увеличенное изображение работает работает во всех браузерах, за исключением Internet Explorer. , чтобы посмотреть, как он работает в этой точке прибоя, чтобы:

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

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

+0

ссылка на ваш демо не работает - Я получаю ошибку 404. – Mottie

+1

В скрипте на вашем сайте отсутствует исходная цитата (") для источника изображения:' html + = ''; ' –

+0

Кроме того, просто совет: ** никогда не дублируйте идентификаторы в вашем html ** (каждый строка имеет «# img» td). Большинство фреймворков javascript, таких как jQuery, полагаются на собственную версию браузера для производительности, и эти реализации могут меняться (обычно они возвращают только первый элемент, найденный сверху вниз, но это не гарантируется). Вместо id рассмотрите возможность использования класса –

ответ

1

Как я уже сказал в комментарии - на вашем сайте у вас есть недостающий цитата в строке:

html += '<img src="'+ getAttr +'" />'; 

Смотрите эту работу jsFiddle example

+0

. Это скопировано из источника со страницы: – ussteele

+0

html + = \t ''; – ussteele

+0

Это было не так, когда я впервые обратился к сайту. Теперь с окончанием '' 'it работает в IE8 для меня. (кстати, какая версия IE?) –