Масштабирование картинок на лету под адаптив

22.09.2016  00:34

Приехала тут антересная задачка: верстальщик навернул на сайте адаптив, а по пожеланию заказчика сделал масштабирование превьюшек CSS`ом. Превьюшки, соответственно, стали превращаться в говно при масштабировании в 150%, а в 201,5% в полное.

Прочитал нотацию верстальщику, да делать-то нечего — надо как-то выкручиваться.

Введение
Превьюшки на десктопном разрешении 100 и 105 точек по ширине. Максимально масштабируются до 370. Я решил наваять чукотский трюк: программно нарезаются картинки с шагом в 20 точек (105, 125, 145 и т.д.), а яваскрипт подменяет src превьюшки в зависимости от отображаемой ширины. Т.е. если на разрешении 360 точек стилями превьюшка увеличена до 340 точек, то хорошо будет смотреться картинка 345 по ширине с обрезанными сторонами (тут верстальщик мне подсобил и масштабирование картинок заменил масштабированием внешнего слоя с overflow:hidden внутри которого картинка с родным размером, чтобы не билось качество).

Итак, понеслось. Писал под 1С-Битрикс, но без проблем переделывается под любую программную часть, главная идея: программное масштабирование с шагом в 20 пикселей, но подгрузка картинок только по необходимости, только на конкретных разрешениях и при масштабировании.

Нарежем картинки и пихнём в HTML:

$file = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], array ('width'  => 225,
                                                                               'height' => 150
        ), BX_RESIZE_IMAGE_EXACT, TRUE);
$file_max = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], array ('width'  => 270,'height' => 180), BX_RESIZE_IMAGE_EXACT, TRUE);
unset($add_html);
$start_width = 105;
$start_height = 70;
$end_width = 370;
$c = 0;
$c2 = 0;
for ($i = $start_width;$i < $end_width;$i+=20) {
$nwidth = $i;
$nheight = ($nwidth / $start_width) * $start_height;
$c2 += 20;
$file_c = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], array ('width'  => $nwidth,'height' => $nheight), BX_RESIZE_IMAGE_EXACT, TRUE);
$add_html .= ' data-img'.$c.'="'.$file_c['src'].'"';
$add_html .= ' data-imgWidth'.$c.'="'.$file_c['width'].'"';
$add_html .= ' data-imgHeight'.$c.'="'.$file_c['height'].'"';
$c++;
}

+ HTML:
<div class="image">
<a href="<?= $arItem["DETAIL_PAGE_URL"] ?>" title="<?= $arItem["NAME"] ?>"><img
src="<?= $file["src"] ?>"
alt="<?= $arItem["NAME"] ?>"
title="<?= $arItem["NAME"] ?>" <?=$add_html; ?> /></a>
</div>

А яваскрипт уже отслеживает какая ширина блока с картинкой стала на данном разрешении, и подгрузит нужную превьюшку.

jQuery(document).ready(function() {
	if ($('.block_footer_photo_stream').html()) resizeImgs('block_footer_photo_stream',100);
	if ($('.projlist').html()) resizeImgs('projlist',105);
	if ($('.photolist').html()) resizeImgs('photolist',100);
	jQuery(window).resize(function() {
		if ($('.block_footer_photo_stream').html()) resizeImgs('block_footer_photo_stream',100);
		if ($('.projlist').html()) {
			resizeImgs('projlist',105);
			//alert('resize');
		}
		if ($('.photolist').html()) resizeImgs('photolist',100);
	});
});
function resizeImgs(cclass,step) {
var cBlock = $('.' + cclass);
var cImg = $('.' + cclass).find('a');
if (!cImg.width() || cImg.width() <= 0) cImg = $('.' + cclass + ' .image');
var imgToShow = (cImg.width() - step) / 20;
imgToShow = Math.round(imgToShow);
cBlock.find('img').each(function(e){
	if ($(this).data('img' + imgToShow)) {
		$(this).attr('src', $(this).data('img' + imgToShow));
		$(this).attr('width', $(this).data('imgWidth' + imgToShow));
		$(this).attr('height',$(this).data('imgHeight' + imgToShow));
		// alert($(this).data('img' + imgToShow) + ' - ' + $(this).data('imgWidth' + imgToShow) + ' - ' + imgToShow);return false;
	}
});
}


Вуаля!
Живой пример: http://www.stalform.ru/.

Описал как смог, сорян :) Задавайте вопросы в комменты, постараюсь помочь (задачи у всех разные, тут особый случай, хотя распростанённый)


перейти в Блог | Блог (стр. 7)

Ударим лайками по бездорожью, разгильдяйству и бюрократизму!


Ключевые слова (тэги): 1С-Битрикс 43  JavaScript 24  PHP 55  web-программирование 79  лучшее 10  молодым домохозяйкам 44  

Вам есть что сказать — ну я же чую.
Высказаться о наболевшем, я выслушаю:
Имя


email (не публикуется)