Регистрация    Войти
Авторизация

Поочерёдность картинок в виде материалов uCoz

Поочерёдность картинок в виде материалов uCozПоочерёдность картинок в виде материалов uCoz

В этом решении мы будем отображать картинки в новостях сайта 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;}


На этом всё, спасибо за внимание!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  20-12-2014, 18:14   Просмотров: 2977   
Вид материалов, Поочерёдность картинок, вид материалов ucoz, Поочерёдность картинок ucoz
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.