ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Стильный вид материалов D1 в 2 колонки

Стильный вид материалов D1 в 2 колонки

Стильный вид материалов D1 в 2 колонки
Не знаю может уже кто то такой же материал выкладывал, рискну, вообщем решил скрестить два материала и поделиться с вами,может кому понадобится. Данный вид подходит для каталогов и информер,эффекты взял с сайта http://mvcreative.ru,так что можно поменять самому посмотрев там примеры.
Установка:
1.Скачиваем файлы,в архиве нужны CSS и JS файлы,картинки к другим эффектам.
2.Установка CSS,на главную страницу каталога добавляем
Код
<link rel="stylesheet" href="Путь до CSS - hovernews.css "/>

3.Установка JS,тоже на главную страницу каталога перед </body>
Код
<script type="text/javascript" src="Путь до скрипта - hovernews.js"></script>

4.Ну и данный код в вид материалов или в тело информера.
Настройки вида: width: 290px и height: 190px я уже делал под свой сайт,так что меняйте под свои пропорции чтоб было равномерно на странице каталога
Настройки эффектов: в hovernews.js,размер шрифта например ищем номер эффекта tpl4 и меняем.
Для примера сами эффекты - Hover эффекты ну а менять их можно меняя классы в коде.

Код

<div style="width:50%;float:left;">  
<div class="vidnews">
<div class="he-wrap tpl4">
<img src="$IMG_URL1$" class="img">
<div class="he-view">
<div class="bg">
<div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div>
</div>
<div class="content">
<p class="info-title a2" data-animate="fadeInDown">$TITLE$</p>
<div class="detail a2" data-animate="fadeInUp"><p><?substr($MESSAGE$,0,150)?>...</p></div>
<a href="$ENTRY_URL$" class="more a2" data-animate="fadeInRight">Подробнее о материале</a>
</div>
</div>
</div>
</div>
</div>

<style>
.vidnews {
  margin-bottom: 10px;
  opacity: 0.9;
}
.img {
  display: block;
  border-radius: 5px;
  background-size: 100% 100%;
  position: relative;
  margin: 0;
  width: 290px;
  height: 190px;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
</style>


<?substr($MESSAGE$,0,150)?> 150 количество символов в кратком описании
Кстати можно и 3 колонки и в 4 меняя настройки,но с данным эффектом мало места для краткого описания материала.
14 Февраля 2016 Загрузок: 10 Просмотров: 1758 Комментариев: (11)
Поделиться в социальных сетях

Материал разместил
Angerfist
Похожие материалы

Оставь свой отзыв

Комментарии: 11
Kosten
Kosten 14 Февраля 2016 20:481
0
Очень не дурно получилось.
Angerfist
Angerfist 14 Февраля 2016 20:492
0
да а то старый вид думаю устарел решил сократить стили и добавил hover
Kosten
Kosten 14 Февраля 2016 20:553
0
Но сейчас старое все переделывают, и хорошие скрипты получаются.
Сопрано
Сопрано 15 Февраля 2016 10:564
0
Вот так в титле можно выставить.

Код
<?if(len($TITLE$)>30)?><?substr($TITLE$,0,30)?>....<?else?>$TITLE$<?endif?>
Сафрон
Сафрон 15 Февраля 2016 15:025
0
Angerfist, нужно было на клик также оставить, это закругленные углы, думаю вы это не учли, так собрали нормальный вид.
Angerfist
Angerfist 15 Февраля 2016 15:496
0
Цитата Сафрон
Angerfist, нужно было на клик также оставить, это закругленные углы, думаю вы это не учли, так собрали нормальный вид.
Да точно спасибо,наскоряк и не заметил) В стилях надо добавить .he-view {border-radius: 5px;},сам не могу редактировать надеюсь Kosten увидит.
Kosten
Kosten 15 Февраля 2016 16:378
0
Заметил, спасибо что отписал!
Kosten
Kosten 15 Февраля 2016 16:429
0
Angerfist, в комментариях оставь полный код с стилями правильными, потом в материале размещу, то что то со знаками не пойму тут.)
Angerfist
Angerfist 15 Февраля 2016 15:527
0
Цитата Trantel
Вот так в титле можно выставить.

Ну если заголовок длинный то согласен,а так я там только для описания укорачивал,вообщем общими усилиями будем и дальше что нибудь модернизировать)
Angerfist
Angerfist 15 Февраля 2016 17:1110
0
Код


<div style="width:50%;float:left;">  
<div class="vidnews">
<div class="he-wrap tpl4">
<img src="$IMG_URL1$" class="img">
<div class="he-view">
<div class="bg">
<div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div><div class="a0" data-animate="fadeInUp"></div><div class="a0" data-animate="fadeInDown"></div>
</div>
<div class="content">
<p class="info-title a2" data-animate="fadeInDown">$TITLE$</p>
<div class="detail a2" data-animate="fadeInUp"><p><?substr($MESSAGE$,0,150)?>...</p></div>
<a href="$ENTRY_URL$" class="more a2" data-animate="fadeInRight">Подробнее о материале</a>
</div>
</div>
</div>
</div>
</div>

<style>
.vidnews {
  margin-bottom: 10px;
  opacity: 0.9;
}
.he-view {
  border-radius: 5px;
}
.img {
  display: block;
  border-radius: 5px;
  background-size: 100% 100%;
  position: relative;
  margin: 0;
  width: 290px;
  height: 190px;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
</style>
AnTron
AnTron 18 Февраля 2016 17:0011
0
Вообще то красиво смотрится, на скрине не понял всея, что должно быть.
Войдите:
avatar