Галерея изображений для материала uCoz
 | |
| Это простая фото галерея, на которой выводим фотографии или картинки для материала на CSS, где идет главная и остальные в горизонтальном виде. Безусловно такой вид вам знаком, ведь вы его могли видеть в кино сайтах, где главная афиша идет вертикальном положение, остальные выставлены в 2 колонки в горизонтальном виде. Теперь появилась возможность, как можно больше закрепить картинок к материалу. Здесь касается любой тематики, ведь изначально все выстраивали под кино сайт, также все они отлично смотрятся на мобильных аппаратах, ведь материал идет полностью адаптивный, который подойдет на светлый или темный формат. Так как у него есть небольшой отвод в один пиксель, что сделано больше для оформления, чтоб красиво смотрелось на интернет ресурса, где по клику они увеличиваются в свой оригинальный размер. Так смотрится при установки:  Установочный процесс: HTML Код <div class="main-container"> <div class="kinovego"><img src="$IMG_URL1$" alt="" title="" itemprop="image"></div> <div class="container-screen"><?if($IMG_URL2$)?><a href="$IMG_URL2$" class="ulightbox" title="Кадр из фильма №1"><div class="img-screen"><img src="$IMG_URL2$" width="270px" height="140px"></div></a><?endif?></div> <div class="container-screen"> <?if($IMG_URL3$)?><a href="$IMG_URL3$" class="ulightbox" title="Кадр из фильма №2"><div class="img-screen"><img src="$IMG_URL3$" width="270px" height="140px"></div></a><?endif?></div> <div class="container-screen"> <?if($IMG_URL4$)?><a href="$IMG_URL4$" class="ulightbox" title="Кадр из фильма №3"><div class="img-screen"><img src="$IMG_URL4$" width="270px" height="140px"></div></a><?endif?></div> <div class="container-screen"> <?if($IMG_URL5$)?><a href="$IMG_URL5$" class="ulightbox" title="Кадр из фильма №4"><div class="img-screen"><img src="$IMG_URL5$" width="270px" height="140px"></div></a><?endif?></div> <div class="container-screen"> <?if($IMG_URL6$)?><a href="$IMG_URL6$" class="ulightbox" title="Кадр из фильма №5"><div class="img-screen"><img src="$IMG_URL6$" width="270px" height="140px"></div></a><?endif?></div> <div class="container-screen"> <?if($IMG_URL7$)?><a href="$IMG_URL7$" class="ulightbox" title="Кадр из фильма №6"><div class="img-screen"><img src="$IMG_URL7$" width="270px" height="140px"></div></a><?endif?></div> </div> CSS Код .main-container { text-align:left; } .container-screen { display: inline-block; } .img-screen { display: block; float: left; margin: 5px; } /* kartinka */ .ulightbox img{border: 1px solid #696565;border-radius: 3px;margin: -5px;width: 272.5px;height: 145.5px;padding: 1px;} .kinovego img { float: left; width: 219px; height: 300.5px; border: 1px solid #6d6969; border-radius: 3px; margin-right: 10px; padding: 1px; } @media screen and (max-width: 870px) { .kinovego img { background: #151b23; width: 234.5px; height: 314.5px; padding: 0px; margin: 0px 0px 10px 0px; display: none; } } Также эту галерею можно оптимизировать по вашему усмотрению, а точнее существующий фотоальбом на сайте uCoz может преобразиться, где можно как добавить картинки, так и сделать меньшее количество снимков. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |