Я бы предложил использовать плагин всплывающей подсказки , который сделает всю грязную работу за вас . Есть дюжины доступных , я покажу вам, как это сделать с помощью jQuery Tooltip .
При условии, что у вас есть следующая разметка:
<ul>
<li><a href="bigimage.jpg"><img src="preview.jpg" /></a></li>
<li><a href="big2.jpg"><img src="prev2.jpg" /></a></li>
</ul>
Я думаю, вы поняли идею (ссылка на большое изображение, ссылка для предварительного просмотра - ссылка). Тогда вы можете использовать плагин всплывающей подсказки следующим образом:
$(document).ready(function() {
$('img').tooltip({
bodyHandler: function() {
return $("<img/>").attr("src", $(this).parent().attr("href"));
}
});
});
(у него есть множество опций, которые вы все можете проверить на демонстрационной странице ).
Это может потребовать некоторого объяснения. Каждый раз, когда должна отображаться подсказка, плагин выполняет функцию bodyHandler. Мы используем эту функцию для генерации HTML-кода, который будет содержать подсказка. Итак, волшебство, которое происходит здесь, заключается в том, что мы извлекаем URL-адрес большого изображения из гиперссылки и создаем новое изображение с тем же src на лету. Это изображение затем отображается как всплывающая подсказка.
Конечно, вы можете генерировать там любой (вложенный) HTML, включая заголовки и т. Д., Но для демонстрации этого должно быть достаточно.
(все, что вы видите, это чистый CSS, так что не волнуйтесь, вы можете настроить его под свои требования)