Битрикс — динамический ресайз картинок под адаптив
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С-Битрикс (исключительно программирование).
Есть вопросы по статье? Могу подсказать и помочь по скайпу (andrey.panevin.ru), WhatsApp (+7-911-091-0670) или перепиской в ВК.
1000 р./час.
1000 р./час.

перейти в Блог | Блог (стр. 6)
Ударим лайками по бездорожью, разгильдяйству и бюрократизму!
Ключевые слова (тэги): 1С-Битрикс 54 JavaScript 24 jQuery 19 PHP 67 web-программирование 91
Вам есть что сказать — ну я же чую.
Высказаться о наболевшем, я выслушаю-: