» »

Код вывода несколько изображений для 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 и выше.
19.03.2017 Просмотров: 564 Комментарий: (12)

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

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

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