Извлеките текст из атрибута большого пальца img «alt» или «title» и используйте его в качестве подписи для увеличенной всплывающей фотографии

Question

Возможно ли это сделать?Пример: я получаю изображение img src = "some_img_thumb.png" alt = "Это изображение alt" title = "Это название изображения" , которое представляет собой миниатюру и содержит alt и заголовок атрибуты.При наведении на него курсора мыши или нажатии на него должно появиться увеличенное изображение.Теперь я хочу, чтобы это изображение всплыло с alt или title в виде подписи , расположенными на нижней границе img.Я знаю какой-то другой трюк (http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer), но я хотел бы знать, возможно ли это, чего я хочу достичь.Я уверен, что это связано с этим утверждением:

a: after {content: "(" attr (href) ")";}

но способ, которым я пытался использовать content: attr (title); выражение, был неверным:

img.thumb: activeimg.thumb: after {content: attr (title);вес шрифта: полужирный;поле: 10px 400px 20px 400px;}

Я новичок в веб-дизайне и искал вдохновение для достижения этой цели, но идей пока нет.

Спасибо за возможную помощь.Приветствия

Answer 1

Возможно, вы захотите использовать jquery для этого. Вы можете использовать тег alt или любой другой атрибут со следующей строкой

var altText = $('img').attr('alt');

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

Затем вы можете указать значение для подписи с помощью следующей строки.

$('#signature').append(altText);

Если вы хотите прокомментировать более конкретные указания, и я буду рад помочь вам в дальнейшем.

Это теория, но есть несколько отличных плагинов для лайтбоксов, которые имеют эту функциональность. Вы пробовали colorbox?

http://colorpowered.com/colorbox/