Если вам нужно на материале вывести несколько изображение, то этот код сделает это красиво и будет работать стандартное увеличение. Думаю многие видели файл или материал, где на вид материала идет одна картинка, но когда заходим вид материала и комментарий, то после описание идет несколько изображений, которые перекреплены к этому материалу. Сам этот код взят с кино сайта, но есть очень много тематических площадок, где как раз представляют не одно и не два изображения, а как можно больше.
Кто-то вообще делает установку в картинках, но здесь каждому виднее будет где его поставить. Теперь вы можете сделать, здесь сделано на четыре места не считая главной, которая стоит на модуле. Выставлено по умолчанию в стилях по центру и высота и ширина все выставляется вручную. Так что можно сделать каркас как большой и не очень. Увеличение здесь стандартное, идет от конструктора, что не нужно чего дополнять к нему. Идет в 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 и выше.