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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем BorisEgor, 12 апр 2012.

  1. BorisEgor

    BorisEgor Гость

    Всем здравствуйте!
    Помогите заблудившемуся в "трёх соснах".
    Ниже в DEMO страничке выложен фрагмент кода.
    Необходимо сделать вывод под каждой выводимой картинкой
    А у меня никак не получается, вроде бы и рядом где то брожу, но ..... (comment №8 page)
    Код (Text):
    <!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>
    СПАСИБО !
     
  2. Bugnet

    Bugnet Гость

    Код jQuery? :

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

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

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

    ну и т.д.
     
  3. BorisEgor

    BorisEgor Гость

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

    Bugnet Гость

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

    Bugnet Гость

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

    BorisEgor Гость

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

    BorisEgor Гость

    В дополнении к предыдущему моему ответу
    == Если провести небольшую доработку (для красоты вывода), то надо вставить:
    в <style> сл. строку
    Код (Text):
    .msg_pic{display: block; width: 100px; color: Blue; font-size: smaller; margin-left: 1px; text-decoration: none;}
    в №5 вместо
    Код (Text):
    var txt_file = (name_file + " - " + width + " x " + height);
    вставить
    Код (Text):
    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 вместо
    Код (Text):
    CurImg.after(txt_file);
    вставить
    Код (Text):
    CurImg.after(msg_pic);
    ENJOY
    Но за load удивили и за переменные узнал новое.
    == В данном случае load
    Код (Text):
      // 2. Дожидаемся загрузки изображения браузером.
    $img.load(function(){
    Спасибо!
     
Загрузка...

Поделиться этой страницей