Битрикс — динамический ресайз картинок под адаптив

10.12.2017  15:03

Абсолютное большинство верстальщиков для адаптива наворачивают ресайз картинок стилями. Если фото большое, то выглядит более-менее сносно. А если фото маленькое, то при ресайзе стилями оно превращается в говно. Чтобы такого не происходило, сделаем велосипед: заранее нарежем картинки с шагов 20 пикселей.

PHP
$file = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], 
array (
	'width'  => 225,
	'height' => 150
), BX_RESIZE_IMAGE_EXACT, TRUE);
//базовое фото для десктопа
unset($add_html);
$start_width = 105;
$start_height = 70;
$end_width = 370;
$c = 0;
for ($i = $start_width;$i < $end_width;$i+=20) {
	$nwidth = $i;
	$nheight = ($nwidth / $start_width) * $start_height;
	$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; ?> /><span class="hover 
zoom"><span
class="icon"></span></span></a>
</div>


JavaScript
jQuery(document).ready(function() {
	if ($('.projlist').html()) resizeImgs('projlist',105);
	jQuery(window).resize(function() {
		if ($('.projlist').html()) {
			resizeImgs('projlist',105);
		}
	});
});
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;
	}
});
//cBlock.after(imgToShow);
}


Чтобы этот набор картинок не грузился сразу, я картинки распихал в аттрибут data-img(порядковый номер).
PHP-код у меня под Битрикс, можно переделать по любую CMS.

Пример, где это реализовано: СТАЛФОРМ. .


перейти в Блог

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


Ключевые слова (тэги): 1С-Битрикс 20  JavaScript 18  jQuery 11  PHP 29  web-программирование 46  

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


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