Сам прелоадер честно стырен отсюда, но его можно заменить любым понравившимся кодом.
Ставится легко и просто. В принципе, все файлы понятно названы и проблем не должно возникнуть.
В футер перед /body ставим вызов включаемой области. Скрипт я обычно копирую вниз включаемой области. Весь код в ней - это хтмл код прелоадера.
CSS можно скопировать в template_styles, а можно подключить отдельно в header.php шаблона сайта.
| // Debug | |
| function dbg($res, $hidden = false, $die = false){ | |
| if ($hidden == true) $style = ' style="display: none;"'; | |
| echo '<pre'.$style.'>'; print_r($res); echo '</pre>'; | |
| if ($die == true) die(); | |
| return; | |
| } |
| <? | |
| $arResult["IBLOCK_DESCRIPTION"] = CIBlock::GetArrayByID($arParams["IBLOCK_ID"], "DESCRIPTION"); |
| a.disabled { | |
| pointer-events: none; /* делаем ссылку некликабельной */ | |
| cursor: default; /* устанавливаем курсор в виде стрелки */ | |
| color: #999; /* цвет текста для нективной ссылки */ | |
| } |
| <? | |
| foreach ($arResult["ITEMS"] as $key => $arItem){ | |
| // EXACT | |
| $arResult["ITEMS"][$key]["RESIZE_PICTURE"] = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]["ID"], array('width'=>100, 'height'=>100), BX_RESIZE_IMAGE_EXACT, true); | |
| // PROPORTIONAL | |
| //$arResult["ITEMS"][$key]["RESIZE_PICTURE"] = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]["ID"], array('width'=>100, 'height'=>100), BX_RESIZE_IMAGE_PROPORTIONAL, true); | |
| } |
| .SomeClass{ | |
| filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ | |
| filter: gray; /* IE6-9 */ | |
| -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ | |
| -moz-filter: grayscale(100%); | |
| -ms-filter: grayscale(100%); | |
| -o-filter: grayscale(100%); | |
| filter: grayscale(100%); | |
| } |