За последние 24 часа нас посетили 60348 программистов и 1819 роботов. Сейчас ищет 831 программист ...

ресайз картинок

Тема в разделе "JavaScript и AJAX", создана пользователем Апельсин, 12 июл 2010.

  1. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    Нужно сделать следующую фишку:
    юзер размещает картинку через бб, как тут например.
    Хорошо если картинка небольшая и вписывается в страничный блок.
    Нужно на js на лету изменять размеры картинок юзеров. Нужна идея куда копать. По загрузке перебирать циклом все картинки чтоли...
     
  2. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    чтобы все картинки одинаковые были?
     
  3. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    а чего б не отлавливать только картинки в постах?

    чето я не очень понимаю может вопрос. ты ж вроде как шаришь в этих вопросах, или я че путаю?

    jQuery норм отловит нужные теги, а уж оттуда можно плясать, думается...
     
  4. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    а... ну.. ставишь всем элементам где картинки name потом берешь getelementsbyname и перебираешь их проверяя width и height так наверное
     
  5. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    Padaboo
    Не, не все, только те которые в постах и >700px например.

    igordata
    С jQuery не дружу :)

    В цикле пхп вывод строк табоицы (как тут), в каждой строке 1 сообщение юзера. Допустим все содержимое занести в контейнер.
    Имеем
    <div id="a1">сообщение 1</div>
    <div id="a2">сообщение 2</div>
    <div id="a3">сообщение 3</div>
    Нужно взять картинки, размещенные юзером в этих сообщениях и если размер больше указанного то пропорционально уменьшить.
     
  6. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    ну вот

    HTML:
    1. <body onLoad="Resize()">
    2. <img name="userimage" src="http://www.ananastelecom.ru/simpliest/img/10.jpeg">
    3. <img name="userimage" src="http://www.ananastelecom.ru/simpliest/img/11.jpeg">
    4. </body>
    [js]<script type="text/javascript">
    function Resize(){
    var imagez = document.getElementsByName("userimage");

    for(var i in imagez){

    if(imagez.width>100){

    imagez.width=100;

    }
    }
    }
    </script>[/js]
    вот оригиналы
    http://www.ananastelecom.ru/simpliest/img/10.jpeg
    http://www.ananastelecom.ru/simpliest/img/11.jpeg
     
  7. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    Padaboo
    Чтото мне совсем лень думать. За идею спасибо, буду докручивать.
     
  8. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    а куда там докручивать , просто когда преобразуешь бб тег в img добавь ему name="userimage" значения width в функции поставь 700
    повесь функцию на onLoad или какой нибудь DOMLoader , а вот насчет кросс браузерности не уверен
     
  9. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    может лучше класс? name нормально пихать куда ни попадя, да еще и одинаковый? =) Или это ок?
     
  10. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    а ты видел реализацию getElementsByClass() на js, а не во фрэймворке ;)
    Здоровая такая функция
    Имя вполне нормально, только можно было просто картинки (тэги) в контейнере проверить и всё. Погулял по DOM, поправил, профит
     
  11. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
  12. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    Во-во, это и надо будет подпиливать. Перебирать картинки внутри определенного дива. Дело плёвое, не спорю, просто на ночь глядя не охота вникать.
     
  13. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    соврамши, хотя когда пользовался казалась большой
    [js]function getElementsByClassName(strClass, strTag, objContElm) {
    strTag = strTag || "*";
    objContElm = objContElm || document;
    var objColl = objContElm.getElementsByTagName(strTag);
    if (!objColl.length && strTag == "*" && objContElm.all) objColl = objContElm.all;
    var arr = new Array();
    var delim = strClass.indexOf('|') != -1 ? '|' : ' ';
    var arrClass = strClass.split(delim);
    for (var i = 0, j = objColl.length; i < j; i++) {
    var arrObjClass = objColl.className.split(' ');
    if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
    var c = 0;
    comparisonLoop:
    for (var k = 0, l = arrObjClass.length; k < l; k++) {
    for (var m = 0, n = arrClass.length; m < n; m++) {
    if (arrClass[m] == arrObjClass[k]) c++;
    if (( delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
    arr.push(objColl);
    break comparisonLoop;
    }
    }
    }
    }
    return arr;
    }
    [/js]
     
  14. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    Luge
    понятно. конечно, если нейм допустимо, то круто.
    Я просто думал, что нейм есть только у некоторых элементов, и пихание его в другие теги - игра на грани фола.
     
  15. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
  16. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    name есть у всех элементов, только обращение по имени как бы устаревшее в пользу id
     
  17. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    В текущий момент браузер настроен ИГНОРИРОВАТЬ ошибки.

    Вот я к чему. Можно-то можно. Я просто хотел знать, кошерно ли! :D
     
  18. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    Luge
    name есть у всех элементов, только обращение по имени как бы устаревшее в пользу id

    Муть выходит. Name значит устаревшее, а поиск по классу происходит перебором всего и вся. Я надеюсь выборка по name не таким же макаром организована?
     
  19. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    igordata
    да наверное так же, только быстрее чем пользовательская функция
     
  20. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    Я это имел в виду. В смысле не на js же этот цикл в отличие от поиска "одноклассников" в jquery
     
  21. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.128
    Симпатии:
    1.248
    Адрес:
    там-сям
    )))
    Зачем так сложно? Всё решается через CSS. Вот работающий пример — картинка на форуме: http://fluxbb.org/forums/viewtopic.php?id=4233

    смотрим свойства картинки: 12 000px × 7 500px (в масштабе 576px × 360px)

    смотрим разметку и стиль файрбагом:

    HTML:
    1. <span class="postimg"><img alt="piratebay_logo.jpg" src="http://popartmachine.com/machine/daily/071808/piratebay_logo.jpg"></span>
    2.  
    [css].postimg img {
    max-width:98%;
    }
    [/css]
     
  22. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    artoodetoo
    Спасибо, кэп!
     
  23. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.128
    Симпатии:
    1.248
    Адрес:
    там-сям
    igordata, если ты не кэп, чего молчал до сих пор? искал решение позамороченнее?
     
  24. Апельсин

    Апельсин Активный пользователь

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    artoodetoo
    все бы хорошо, но ишак 6 не поддерживает, а 7й частично. Так что не подойдет такая "простота".
     
  25. phpdude

    phpdude Активный пользователь

    С нами с:
    9 июл 2010
    Сообщения:
    697
    Симпатии:
    0
    artoodetoo
    самый гениальный вариант, сам такое юзаю :)

    а на ишак пофиг, если в нем будет гавенно выглдять, но в общих чертах работать - сподвигнет пользователей пересаживаться по тихоньку, я бы даже везде делал изъяны под 6ой ишак, чтобы себя люди ущербными чувствовали