Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Динамическая высота и ширина картинки и родителя в зависимости от ширины контейнера (https://javascript.ru/forum/events/46306-dinamicheskaya-vysota-i-shirina-kartinki-i-roditelya-v-zavisimosti-ot-shiriny-kontejjnera.html)

Scumtron 05.04.2014 11:08

Динамическая высота и ширина картинки и родителя в зависимости от ширины контейнера
 
Здравствуйте,

Я недавно начал осваивать Javascript и столкнулся с такой задачей. Имею функцию которая задает изображениям и их родителям высоту и ширину в зависимости от ширины контейнера. В контейнере, некоторые изображения имеют высоту в два раза выше стандартной высоты, т.е. вертикальные и помечаются классом "vertical" Проблемные участки (сроки: 21, 25, 27), на которых появляются ошибки "arrImgs[i].find is not a function". Подскажите пожалуйста, что я делаю не так? Может быть есть более изящное решение этой задачи?

function getImageWidthForScreen(containerWidth) {
    var numColumns = 0,
        spaceLeft = 0,
        ratio = 0,
		imageWidth = 300,
		imageHeight = 186,
		itemMargin = 7,
        newImgW, i, len, row, w, h, itemClass;
		numColumns = Math.floor(containerWidth / imageWidth);
		spaceLeft = containerWidth - numColumns * (imageWidth - itemMargin);
		if(spaceLeft > 0) {
			newImgW = 0;
			if(!(numColumns === 1 && imageWidth / 2 > spaceLeft)) {
				numColumns += 1
			}
			newImgW = Math.floor(containerWidth / numColumns) - itemMargin;
			ratio = imageWidth / newImgW;
			
			var arrImgs = $('.content-box');
			for(i = 0, len = arrImgs.length; i < len; i += 1) {
				itemClass = arrImgs[i].find('img').className;
				row = itemClass === 'vertical' ? 2 : 1; 
				w = newImgW;
				h = 0;
				arrImgs[i].width(w).find("img").width(w);
				h = (Math.floor(imageHeight / ratio) + itemMargin) * row - itemMargin;
				arrImgs[i].height(h).find("img").height(h);
			}
		}
		return newImgW + itemMargin
}


<div id="container">
	<div class="content-box">
		<img class="vertical" width="300" height="379" src="img1.jpg">
	</div>
	<div class="content-box">
		<img class="horizontal" width="300" height="186" src="img2.jpg">
	</div>
	...
</div>

рони 05.04.2014 11:39

Scumtron,
arrImgs обьект вы из него достали элемент arrImgs[i] у элемента нет никаких свойств find
-- можно так arrImgs.eq(i).find('img')[0].className - но весь этот венигрет из ваниллы и квери -- можно сократить используя методы jquery типа
.each() и зная селекторы либо зная js

Scumtron 06.04.2014 09:15

Может кто-нибудь помочь грамотно переписать эту функцию на чистый JavaScript за не большое вознаграждение? :)

рони 06.04.2014 09:25

Scumtron,
пишите в личку

Scumtron 06.04.2014 14:03

Вопрос решен, топик неактуален.


Часовой пояс GMT +3, время: 13:35.