Код вывода несколько изображений для uCoz - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- 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 и выше.

Важно!

При копировании материала указывать ссылку на источник.

- 445
- 23-Марта-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта