Код вывода несколько изображений для 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 и выше. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 29 | |
|
| |
| 1 2 » | |
