Костыльрея — это способ посмотреть целую кучу фотографий в хорошем качестве. С обычного телефона или даже с калькулятора. Сверх гениальная идея ускоренной загрузки https://nasobe.ru/lazy-load.html#KostylReja
Хотелось бы сказать что это как обычная галерея, но это куда быстрее простой галереи. Потому что в “костельреи” применима космическая технология под названием: “сингал пейдж апликейшн”.

Принцип работы
Работа костыльреи на простом яваскрипте через подключенную XMLHttpRequest и подключение происходит новой страницы с картинками. Так было сделано потому что делать выборку форматов под разные браузеры было бы безумным сумасшествием. Если подгрузка будет осуществляться только того что нужно. Для открытия в том браузере для который используется в настоящее время. Как бы сказал доктор Шелдон Купер: “это гениально во всех 26 измерениях!”.

На js создается массив с html обработанными картинками (изображения вставлены по ссылки в страницы хтмл). Далее XMLHttpRequets открывает каждую картинку из массива и через функцию ТаймАут перегружает изображение. В период нажатия на кнопку «в лево или в право».
Разработка этой простой костыльреи будет оптимальна для всех. Особенно желающих наработать опыт в веб разработки, хоть и не большой. Что и говорит, основной показатель при устройстве на работу: это понимание ООП. В первую очередь для того чтобы было точное представление как накостылять в любую программу частичку: “ойВсё”.
<!-- тут скрпт костельреи -->
<script>
let i=0;
let slideDljaIMG = ['images/working-for-free/5.html','images/working-for-free/6.html','images/working-for-free/images.html', 'images/lol/gorilla-three.html', 'images/working-for-free/1.html','images/working-for-free/2.html','images/working-for-free/3.html','images/working-for-free/4.html'];
function ImagesPodmena(){
let podimg = new XMLHttpRequest();
podimg.open('GET',`${slideDljaIMG[i]}`);
podimg.send();
podimg.onload = function(){
if(podimg.status !=200){
alert(`Ошибка ${pogimg.status}: ${podimg.statusText}`);
}else { // если всё прошло гладко, выводим результат
// alert(`Готово, получили ${podimg.response.length} байт`); // response -- это ответ сервера
responseType ="Text";
document.querySelector('#images').innerHTML = this.response;
}
}
}
ImagesPodmena();
</script>
<div id='images'></div>
<div class="dis">
<div class="left"><=</div>      
<div class='right'> => </div>
</div>
<script>
const leftButton = document.querySelector('.left');
leftButton.onclick = function(){
i-=1;
if(i<0){
i=([slideDljaIMG].length)-1;
setTimeout(ImagesPodmena(),10);
console.log([slideDljaIMG].length+'ny vot');
}
slideDljaIMG[i];
setTimeout(ImagesPodmena(),10);
console.log(slideDljaIMG.length+'iz i <0');
// console.log(slideDljaIMG[i]);
}
const rigthButton = document.querySelector(".right");
rigthButton.onclick = function(){
i+=1;
if(i>slideDljaIMG.length){
i=0;
setTimeout(ImagesPodmena(),10);
console.log(i+'--------------');
}
slideDljaIMG[i];
setTimeout(ImagesPodmena(),10);
console.log('--------------------');
console.log(slideDljaIMG[i]);
console.log(slideDljaIMG.length);
console.log("onclick-right-button");
}
</script>
<!-- ЭНД картинки! -->