В этом решении мы будем отображать картинки в новостях сайта
uCoz в шахматном порядке.
Всем привет, в предыдущем материале
uCoz под названием Как отобразить с правой стороны чётные новости, а с левой не чётные? я решил поставленную задачу и благодаря данному решению меня осенило, как выставить поочерёдность отображение картинки в виде материалов.
Шаг 1 -
Установим HTML:
Для начала нам следует установить
HTML каркас, для этого в вид материалов нужного вам модуля устанавливаем следующий код:
Код
<div class="cell-news">
<?if($IMG_URL1$)?><img alt="$TITLE$" src="$IMG_URL1$" class="news-img"><?endif?>
$MESSAGE$
</div>
Основная задача - это прописать картинки в ячейки новостей нужный класс
news-img.
Шаг 2 -
Установим JS:
Далее на страницу где отображаются новости сайта, в самый низ перед закрывающим тегом устанавливаем следующий
JS:
Код
<script language="javascript">
$(document).ready(function() {
$('.cell-news:odd').addClass('news-r');
$('.cell-news:even').addClass('news-l');
});
</script>
Шаг 3 -
Установим CSS:
Код
.news-img{
width:250px;
height:100px;
}
.news-l .news-img{float:left; margin: 0 15px 10px 0;}
.news-r .news-img{float:right; margin: 0 0 10px 15px;}
Если вы по каким то причинам не хотите в данном решении использовать
JS, то пропустите
Шаг 2, а в
Шаге 3 пропишите следующие
CSS стили:
Код
.news-img{
width:250px;
height:100px;
}
.cell-news:nth-child(even) .news-img {float:left; margin: 0 25px 10px 0;}
.cell-news:nth-child(odd) .news-img {float:right; margin: 0 0 10px 25px;}
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
