ZorNet.Ru — сайт для вебмастера » HTML и CSS » Код вывода несколько изображений для uCoz

Код вывода несколько изображений для uCoz

Код вывода несколько изображений для uCoz
Если вам нужно на материале вывести несколько изображение, то этот код сделает это красиво и будет работать стандартное увеличение. Думаю многие видели файл или материал, где на вид материала идет одна картинка, но когда заходим вид материала и комментарий, то после описание идет несколько изображений, которые перекреплены к этому материалу. Сам этот код взят с кино сайта, но есть очень много тематических площадок, где как раз представляют не одно и не два изображения, а как можно больше.

Кто-то вообще делает установку в картинках, но здесь каждому виднее будет где его поставить. Теперь вы можете сделать, здесь сделано на четыре места не считая главной, которая стоит на модуле. Выставлено по умолчанию в стилях по центру и высота и ширина все выставляется вручную. Так что можно сделать каркас как большой и не очень. Увеличение здесь стандартное, идет от конструктора, что не нужно чего дополнять к нему. Идет в 2 колонки, но все редактируется и можно сделать в одну. Но и обвод, так как на светлый можно поставить аналогичный, или оставить как есть и будет смотреться так, что представлено ниже.

Проверено на тестовом сайте на белом фоне:

Поставить несколько картинок на сайт

Приступаем к установке:

Код
<div class="main-container">  
<div class="container-screen"><?if($IMG_URL2$)?><a href="$IMG_URL2$" class="ulightbox" title="Кадр сайта zornet.ru №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="Кадр сайта zornet.ruа №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="Кадр сайта zornet.ru №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="Кадр сайта zornet.ru №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="Кадр сайта zornet.ru №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="Кадр сайта zornet.ru №6"><div class="img-screen"><img src="$IMG_URL7$" width="270px" height="140px"></div></a><?endif?></div>
</div>


И здесь же ниже пропишем CSS стили:

Код
<style>  
/* kartinka */
.ulightbox img{border: 3px solid #9E9E9E;border-radius: 5px;margin: -3px;width: 270px;height: 130px;padding: 1px;}
   
.main-container {  
text-align:center;  
}  
.container-screen {
display: inline-block;
}  
.img-screen {
display: block;  
float: left;
margin: 5px;
}  
</style>

Если вам нужно больше добавить, то копируем и прописываем рядом, также уменьшаем, но не нужно забывать, что IMG_URL1 идет на главную, и основном это на вид материала, а здесь начинается с IMG_URL2 и выше.
2017-03-19 Просмотров: 1261 Комментарий: (12)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 12
Kolinkor
Kolinkor 2017-03-19 23:421
0
Что за кино, название, нравится фильмы про снайпера.
Kosten
Kosten 2017-03-20 00:306
0
Не помню, это сериал, начал его смотреть, так не чего по сюжету, можно посмотреть, но серий долго выходят.
Марковичь
Марковичь 2017-03-19 23:492
0
Вот такие коды больше на сайт нужно на сайте размещать, а не шаблоны старые. Это больше пригодится для пользователя.
Kosten
Kosten 2017-03-20 00:317
0
Если материал адаптирован под мобильные устройства, то это козырный явно является.
Kosten
Kosten 2017-03-19 23:543
0
Просто кино сайт разобрал по частям, думал давно залил этот код, но что то по запросам посмотрел и не нашел, а вообще встретил на одном сайте, и подумал почему бы не залить, здесь можно явно с десяток вывести картинок.
Kosten
Kosten 2017-03-19 23:554
0
Хотя изначально говорил, что идет на 4 не считая главной, а выходит на одно изображение больше.
Scheme
Scheme 2017-03-19 23:585
0
Под шаблон нормально подойдет, где можно разные формы отдельно выводить, это персональная страницы, вообщем разные элементы дизайн.
Kolinkor
Kolinkor 2017-03-20 15:298
0
Когда с этого сайта начнешь сливать элементы дизайн, меня волнуют счетчики в шапке, в интернете ботва!
Kosten
Kosten 2017-03-20 18:0911
0
Все возможно, но пока операторы остаются у первоисточника.
Nikas
Nikas 2017-03-20 15:429
0
просто то как
Kosten
Kosten 2017-03-20 18:0810
0
Но а как еще, можно поставить на сайт и добавить картинок.
1 2 »
avatar