Работая над сайтом-портфолио для своей Сестры, я встал перед очень тяжелым выбором: сверстать самому фото-галерею (слайдер) или же внедрить какой-либо готовый плагин.
Лень взяла верх, и я полез в интернеты в поисках того что нужно.
Краткое резюме: 8 часов впустую — мне ничего не понравилось…
Дальше время терять я был не намерен, и сел думать над алгоритмом:
Мне нужно окно 900х600 пикселей, с двумя кнопками «туда» и «сюда». В этом окне собственно и будут перелистываться фотки. А раз уж нужен адаптив — значит надо-бы сразу заложить реакцию на всячиские ресайзы экрана (а также перевороты устройства).
К делу! Разметка:
<div class="fotobox"> <div class="leftControl"><</div> <div class="rightControl">></div> <img src="https://kapu.cat/img/wlp/1.jpg"> <img src="https://kapu.cat/img/wlp/2.jpg"> <img src="https://kapu.cat/img/wlp/3.jpg"> <img src="https://kapu.cat/img/wlp/4.jpg"> <img src="https://kapu.cat/img/wlp/5.jpg"> <img src="https://kapu.cat/img/wlp/6.jpg"> <img src="https://kapu.cat/img/wlp/7.jpg"> </div> |
Тут все просто как 2 байта: контейнер Фотобокс, в нем две кнопки ЛефтКонтрол и РайтКонтрол, дальше внутри сами фотки. Фотки честно взял с яндекс-фоток.
Зададим сперва-сначала стили для самого бокса, приправив их медиа-запросами:
.fotobox{ position: relative; /* позишн - релятиве */ overflow: hidden; /*будем обрезать всё, что так или иначе не влезло*/ background-color: #000; /* афро-американский фон*/ text-align: center; /* так как фотки у меня в img а не всякими модными бэкграунд-аймэджами - это самый простой способ их отцентровать*/ width: 900px; /*ну тут ясно*/ height: 600px; /* тут тоже*/ border: 1px solid black; /* на всякий случай*/ border-radius: 10px; /* закруглим углы*/ transition: all 1s; /* а вдруг анимация будет какая... пропишем уж сразу*/ } @media screen and (max-width: 400px){ /*медиа-запрос под экраны мельче 400 пикселей (телефон в вертикальном виде, к примеру*/ .fotobox{ width: 300px; height: 200px; } } @media screen and (max-width: 700px){ /*тодж телефон в горизонтальном виде */ .fotobox{ width: 450px; height: 300px; } } |
Теперь стилизуем наши Лефт и Райт контролы:
/* кнопочки одинаково круглые, и имеют много общих черт, по этому стили одинаковые для обеих сразу*/ .leftControl, .rightControl{ position: absolute; /* родитель - релятив, значит ребёнки - абсолют (чтоб разбежались в разны стороны потом)*/ top: 40%; /* сверьху отступ*/ z-index: 1; /* кнопки поверх фоток*/ display: inline-block; /*на одной линии кнопки*/ background-color: rgba(0,0,0,.5); /* полупрозрачные*/ color: #fff; /* текст белый*/ text-decoration: none; /* безо-всяких-там*/ font-size: 40px; /* покрупней шрифт*/ padding: 1.8% 3%; /* отступы */ vertical-align: middle; // и шоб отцентровать на всякий случай*/ cursor: pointer; /* чтоб обозначить кликабельность*/ border-radius: 50%; /* скруглим квадрат*/ } .leftControl{left: 1%;} /* а теперь одну кнопку влево*/ .rightControl{right: 1%;} /* а другую вправо*/ .leftControl:hover{ /* при наведении по-темней хай будет */ background-color: rgba(0,0,0,.9); } .rightControl:hover{ background-color: rgba(0,0,0,.9); } |
Ну и для самих картинок — ничего такого хитрого:
.fotobox img{ width: auto; height: 100%; opacity: 0; } |
Растягиваем по высоте во всю, а по длине уж как получится. Отцентруется — красиво будет.
— А прозрачность на нуль зачем? — спросите вы.
— Ведь ничего такого хитрого! Сам сказал! — скажете вы.
Едем дальше — в яваскрипт.
Для начала зададим ресайзы. Медиа-запросы — медиа-запросами, а с яваскриптом надежней имхо.
$(window).resize(function() { var boxW = parseInt($(window).width()); // ширину экрана измеряли if (boxW > 900) { $(".fotobox").css({ width: "900px", height: "600px" }); // если больше 900 - то вот так } else if ((500 < boxW) && (boxW < 900)) { $(".fotobox").css({ width: "450px", height: "300px" }); // если помельче - то сяк } else if (boxW < 500) { $(".fotobox").css({ width: "300px", height: "200px" }); // а если еще мельче то эдак } }); |
Ну а теперь отрабатываем события нажатия на кнопочки и смену фоток (тут и прозрачность зачем была — поймете):
var $fotobox = $('.fotobox'), $firstImg = $fotobox.find("img:first"), // узнаем кто первый в очереди $lastImg = $fotobox.find("img:last"); // и кто последний - тоже $firstImg.css({'opacity' : '1'}) // первую фотку делаем видимой, остальные нет. $('.rightControl').on('tap click', function(){ // кнопка вправо поехала: $fotobox.append($firstImg); // первую фотку вконец списка переместили $firstImg = $fotobox.find("img:first"); //запомнили что теперь первой стала вторая $lastImg = $fotobox.find("img:last"); // а последней первая $firstImg.css({'opacity' : '1'}) // новую первую сделали видимой }); $('.leftControl').on('tap click', function(){ // кнопка влево поехала: $fotobox.prepend($lastImg); // крайнюю фотку сделали первой $firstImg = $fotobox.find("img:first"); // запомнили кто теперь стал первым $lastImg = $fotobox.find("img:last"); // а кто крайним $firstImg.css({'opacity' : '1'}) }); |
Все оказалось не так страшно, и совсем не 8 часов… Осталось доработать событие свайпа и разворот в фулскрин.
Код можно пощупать 😉
See the Pen Gallery adaptiv by kapu (@kapu) on CodePen.0