Всем здравствуйте!
Помогите заблудившемуся в "трёх соснах".
Ниже в DEMO страничке выложен фрагмент кода.
Необходимо сделать вывод под каждой выводимой картинкой
А у меня никак не получается, вроде бы и рядом где то брожу, но ..... (comment №8 page)
СПАСИБО !
Помогите заблудившемуся в "трёх соснах".
Ниже в DEMO страничке выложен фрагмент кода.
Необходимо сделать вывод под каждой выводимой картинкой
А у меня никак не получается, вроде бы и рядом где то брожу, но ..... (comment №8 page)
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="script/jquery-1.5.2.min.js"></script>
<style>
img {border: 0px }
span {margin-left: 50px; color: Blue; }
.clear {font-size:0;line-height:0; margin:0; padding:0; clear:both; overflow:hidden;}
</style>
</head>
<body>
<span > Имеются несколько строк для вывода иконок размером 100 х 100 из картинок БОЛЬШОГО размера</span><br />
<div id="page">
<a href="#"><img src="images/img-01.jpg" class="img" width="100" height="100" /></a>
<a href="#"><img src="images/img-02.jpg" class="img" width="100" height="100" /></a>
<a href="#"><img src="images/img-03.jpg" class="img" width="100" height="100" /></a>
<!-- далее ещё есть строки -->
<div class="clear"></div>
</div>
<!-- С помощью jQuery проводяться манипуляции с КЛАССОМ "img" -->
<script>
// 1. Берем все необходимые нам изображения.
var $img = $('.img');
// 2. Дожидаемся загрузки изображения браузером.
$img.load(function(){
// 3. Кладем указатель на изображение в переменную
var CurImg = $(this);
// 4. Если заданы атрибуты width и height - удаляем их.
CurImg.removeAttr("width")
.removeAttr("height")
.css({ width: "", height: "" }) // тоже самое делаем в CSS-свойствах.
;
// 5. Получаем реальные ширину, высоту, имя файла и формируем текст подсказки для ALT & TITLE
var width = CurImg.width();
var height = CurImg.height();
var name_file = CurImg.attr("src");
var txt_file = (name_file + " - " + width + " x " + height);
// 6. Если изображение больше допустимой ширины или высоты (maxSize), задаем ее соответствующими атрибутами.
var maxSize = 100;
if (width > height) CurImg.attr('width', maxSize);
else if (height > width) CurImg.attr('height', maxSize);
else if (height == width) CurImg.attr('height', maxSize);
// 7. Вычисляем и задаем необходимый отступ сверху у изображения для того чтобы отцентрировать его по вертикали.
var imgHeight = CurImg.height();
var marginTop = (maxSize - imgHeight)/2;
CurImg.css('margin-top', marginTop)
.css('display', 'block') // Показываем отмасштабированное изображение.
.attr('alt', txt_file) // установить текст в alt
.attr('title', txt_file) // установить текст в title
;
// 8. ХОЧУ под каждой иконкой вывести подпись из переменной txt_file, по аналогии с ALT и TITLE
CurImg.html(txt_file); // НЕ ПОЛУЧАЕТСЯ !!!
CurImg.txt_file; // И так не получается !!!
// Как решить эту проблему
});
</script>
</body>
</html>