Адаптивная галерея для изображений на CSS
 | |
| Отлично проработанная галерея для изображения в адаптивной верстке под разные размеры монитора и безусловно мобильных носителей на экране. Все очень понятно создано в плане реализаций возможностей по управлению на разных обновленных браузерах, и как уже говорилось на мобильных аппаратах, как планшет или смартфон. Здесь вы изначально можете выставить картинки, которые по клику будут появляться, где по вверх идет темная панель функциональности, что с ней вы можете давать разнообразные команды. А так она простая в работе, это по клику вы можете увеличить снимок, но просто для пользователя больше функций предоставлено, чем на простом фотоальбоме. Но поскольку изображения и картинки загружаются автоматически или динамически, то довольно легко переключать источники, даже в старых браузерах. Нужно заметить, что большинство всплывающих окон поддерживают изображения и позволяют легко перемещаться между снимками. Также удобная для пользователя галерея изображений для мобильных и настольных компьютеров без зависимостей от разрешения экрана, это может быть как большой монитор, так и небольшой экран, везде корректно выводит. Здесь будет блестящая библиотека, которая накладывает изображение или группу снимков на вашу текущую страницу, что широко известно как лайтбокс. Где тематически отлично подойдет под разную тему, но характерно, чтоб было как можно больше информации, где при вуалируют изображение для просмотра. Приступаем к установки: 1. Разметка HTML Код <div class="picture" itemscope itemtype="http://schema.org/ImageGallery"> <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="img/city-1.jpg" itemprop="contentUrl" data-size="1000x667" data-index="0"> <img src="img/city-1-thumb.jpg" height="400" width="600" itemprop="thumbnail" alt="Beach"> </a> </figure> <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="img/city-2.jpg" itemprop="contentUrl" data-size="1000x667" data-index="1"> <img src="img/city-2-thumb.jpg" height="400" width="600" itemprop="thumbnail" alt=""> </a> </figure> </div> </div> 2. Разметка HTML галереи в целом — ставим внизу страницы перед тегом /body. Код <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> 3. Подключаем в шапку сайта стили CSS и jQuery Код <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/photoswipe.css"> <link rel="stylesheet" href="css/default-skin/default-skin.css"> <script src="js/jquery.min.js"></script> 4. Подключаем JavaScript’s внизу страницы, перед тегом /body. Код <script src="js/photoswipe.min.js"></script> <script src="js/photoswipe-ui-default.min.js"></script> <script src="js/script-min.js"></script> Также к материалу прилогается архив с элементами галерей. Демонстрация: web-team.su/demo/PhotoSwipe/index.html | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |