VPF::Определить ширину картинки - Форум программистов

Parallelogram

Дата 15.1.2015, 10:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 22.1.2013

Репутация: нет
Всего: нет

Здравствуйте. Подскажите, как узнать ширину картинки '$dir_big$files[$i]', поделить значение на 3 и подставить в стиль к ссылке вместо padding-left и padding-right? Если это важно, то дивы и картинки формируются с помощью цикла, последовательно присваивая порядковый номер (showimage1 link_back1 link_next1).

Код


<div class='popupbox' id='showimage1'>
  <div class='popupbox_image'>
    <img src='$dir_big$files[$i]' />
    <div class='navigat'>
      <a href='#' id='link_back1' class='back_g' style='padding-left:XXpx;'>
      <a href='#' id='link_next1' class='next_g' style='padding-right:XXpx;'>
    </div>
  </div>
</div>
<div class='popupbox' id='showimage2'>
  <div class='popupbox_image'>
    <img src='$dir_big$files[$i]' />
    <div class='navigat'>
      <a href='#' id='link_back2' class='back_g' style='padding-left:XXpx;'>
      <a href='#' id='link_next2' class='next_g' style='padding-right:XXpx;'>
    </div>
  </div>
</div>
<div class='popupbox' id='showimage3'>
  <div class='popupbox_image'>
    <img src='$dir_big$files[$i]' />
    <div class='navigat'>
      <a href='#' id='link_back3' class='back_g' style='padding-left:XXpx;'>
      <a href='#' id='link_next3' class='next_g' style='padding-right:XXpx;'>
    </div>
  </div>
</div>

Наковырял код, но он работает только для первой картинки, а для всех последующих не изменяется. Мне посоветовали: "Слушать событие onload для каждой картинки, а не как сейчас", но что это значит и как реализовать, не знаю. Помогите, пожалуйста.

Код


var shh = document.getElementsByClassName("popupbox_image").length;
document.getElementsByClassName("popupbox_image")[0].children[0].onload=function()
{
var w = Math.ceil(this.offsetWidth/3);
var i;
for (var i = 0; i < shh; i++){
    document.getElementsByClassName("back_g")[i].style.paddingLeft=w+"px";
    document.getElementsByClassName("next_g")[i].style.paddingRight=w+"px";
}}

Aliance

Дата 15.1.2015, 10:34 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Цитата(Parallelogram @ 15.1.2015, 11:12

)

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

потому что идет обращение только в одному - первому - элементу массива нод:

Цитата

document.getElementsByClassName("popupbox_image")[0]

Можно сделать примерно так:

Код


var containers = document.getElementsByClassName("popupbox_image");
var shh = containers.length;
for (var i = 0; i < shh; i++) {
    containers[i].children[0].onload = function() {
        var w = Math.ceil(this.offsetWidth/3);
        var navigat = this.parentNode.children[1];
        navigat.children[0].style.paddingLeft=w+"px";
        navigat.children[1].style.paddingRight=w+"px";
    }
}

http://jsfiddle.net/en5b1L19/

Добавлено через 41 секунду
Только большой вопрос зачем это делать на JS, если можно примерно тоже самое достичь с помощью чистого CSS.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Parallelogram

Дата 15.1.2015, 11:03 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 22.1.2013

Репутация: нет
Всего: нет

Спасибо, код прекрасно работает.
А как Вы там говорите можно сделать примерно тоже самое на чистом CSS?

Aliance

Дата 15.1.2015, 11:12 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Цитата(Parallelogram @ 15.1.2015, 12:03

)

А как Вы там говорите можно сделать примерно тоже самое на чистом CSS?

ну я так понимаю итог - ссылки должны быть под центром картинки?
тогда блоку navigat можно выставить центрирование текста, например.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Parallelogram

Дата 24.1.2015, 17:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 22.1.2013

Репутация: нет
Всего: нет

Что если <img src='$dir_big$files[$i]' /> запихнуть еще в один контейнер? Будет же вот так? containers[i].children[0].children[0].onload = function(). Если да, то у меня так не работает. Не хочет вычислять ширину и прочее.

Aliance

Дата 26.1.2015, 08:30 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

А что если не гадать - а привести измененную структуру сюда, либо на jsfiddle?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »