Jquery Подпись Под Каждой Выводимой Картинкой

  • Автор темы BorisEgor
  • Дата начала
B

BorisEgor

Гость
#1
Всем здравствуйте!
Помогите заблудившемуся в "трёх соснах".
Ниже в 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>
СПАСИБО !
 
B

Bugnet

Гость
#2
Код jQuery? :

строка 1 :var $img
1. Имя переменной должно начинаться с буквы или символа подчёркивания "_".
2. Имя может состоять из букв, цифр и знака подчёркивания.
3. Имя не должно состоять из отдельных слов.
4. Различают верхний и нижний регистры.

строка 2
load - это из Ajax load( url, [данные], [вызов] )

строка 3
var CurImg = $(this); - в переменную заносим ЭТО Что?

ну и т.д.
 
B

BorisEgor

Гость
#3
Код jQuery? :

строка 1 :var $img
1. Имя переменной должно начинаться с буквы или символа подчёркивания "_".
2. Имя может состоять из букв, цифр и знака подчёркивания.
3. Имя не должно состоять из отдельных слов.
4. Различают верхний и нижний регистры.

строка 2
load - это из Ajax load( url, [данные], [вызов] )

строка 3
var CurImg = $(this); - в переменную заносим ЭТО Что?

ну и т.д.
А вы сами то пробовали исполнить страничку ?
А в ней всё работает, кроме последнего пункта скрипта, а именно вывод ТЕКСТА под фото.
Рекомендую обратить внимание что а ALT и TITLE для каждого фото ПРАВИЛЬНО определяются фактические размеры фото.
Проведите эксперимент и убедитесь в этом !!!!
Спасибо !!!
 
B

Bugnet

Гость
#4
Удивили! А как это должно вообще работать? Я серьёзно. Код, то я скопировал, а изображения.
В папку images нужно поместить 3 изображения, большого размера (какого?) И что должно произойти. Или я что-то недопонял? Если не затруднит, расскажите подробнее. Что скрипт делает?
 
B

Bugnet

Гость
#5
Всё кажись понял. Маштабирует большие изображение. Но за load удивили и за переменные узнал новое.
Что каcается вашего вопроса, если я правильно понял, так хотите?
Если да, то тогда
CurImg.after(txt_file);
 
B

BorisEgor

Гость
#6
Всё кажись понял. Маштабирует большие изображение. Но за load удивили и за переменные узнал новое.
Что каcается вашего вопроса, если я правильно понял, так хотите?
Если да, то тогда
CurImg.after(txt_file);
Ну СПАСИБО, ну УДРУЖИЛ !!!!!!!!!!!
Я же сказал, что заблудился в трёх соснах :)
Конечно надо вставить after если есть желание поставить ПОСЛЕ УКАЗАТЕЛЯ, т.е. ставим "на лету"
Ну и конечно поставить before если надо поставить ДО УКАЗАТЕЛЯ !!!
И ещё одно уточнение хочется прояснить.....
Когда много строчек с картинками (в оригинале у меня 23 картинки), то они выводятся РЯДАМИ, в зависимости от разрешения экрана (уж сколько поместится в одном ряду)
А в приведённом DEMO (фрагмент из основной страницы) почему то выводятся по ВЕРТИКАЛИ.
Может какие мысли есть по этому поводу ?
Спасибо
P.S. совсем упустил ответить на вопрос "В папку images нужно поместить 3 изображения, большого размера (какого?)"
- картинки могут быть ЛЮБОГО размера, хоть в 5000px !!!!!
Если я знаю их ФАКТИЧЕСКИЙ размер, то могу КОРРЕКТНО масштабировать для дальнейшего просмотра.
Если не затруднит, расскажите подробнее. Что скрипт делает?
- для того я поставил комменты в скрипте, что бы понятно было что я делаю и что хочу получить.
Конечно у меня недоработка вышла - Не указал ИДЕЮ приведённого ДЕМО МАСШТАБИРОВАНИЕ !!!!
Применение самое разное, например такой необычный пример.
Если грузить бекграунд БОЛЬШОГО размера на экран с малым разрешением, то без слёз не взглянешь, а тут "на лету" можно определить Фактические размеры экрана юзера и масштабировать ВСЮ картинку, тогда она будет в лучшем виде.
Естественно никаких выводов иконок в этом случае не надо делать, размеры определяются в ПРЕЛОАДЕ ,выбросить пункт 7 и иконки не будет видно.
Ну это к примеру, а вообще то для корректного масштабирования задач море!!!!
 
B

BorisEgor

Гость
#7
Всё кажись понял. Маштабирует большие изображение. Но за load удивили и за переменные узнал новое.
Что каcается вашего вопроса, если я правильно понял, так хотите?
Если да, то тогда
CurImg.after(txt_file);
В дополнении к предыдущему моему ответу
== Если провести небольшую доработку (для красоты вывода), то надо вставить:
в <style> сл. строку
Код:
.msg_pic{display: block; width: 100px; color: Blue; font-size: smaller; margin-left: 1px; text-decoration: none;}
в №5 вместо
Код:
var txt_file = (name_file + " - " + width + " x " + height);
вставить
Код:
var txt_file = (name_file + " - " + width + "px x " + height+ "px"); // for ALT & TITLE
var msg_pic = "<span class='msg_pic'>" + txt_file + "</span>"		// for msg_pic
в №8 вместо
Код:
CurImg.after(txt_file);
вставить
Код:
CurImg.after(msg_pic);
ENJOY
Но за load удивили и за переменные узнал новое.
== В данном случае load
Код:
  // 2. Дожидаемся загрузки изображения браузером.
$img.load(function(){
Спасибо!