DEMO |
Необычный информер последних комментариев, снова сделан на MobilySlider. Идея была взята с обыкновенной картинки, на просторах интернета.
Для начала давайте зайдем в раздел "Информеры" и создадим информер с такими параметрами:
Раздел: Комментарии Модуль: Все модули Количество материалов: 5 (обязательно) Количество колонок: 1 (обязательно) Максимальная длина текста комментария: не важно
Теперь в шаблон информера вставим код: Code <div class="item"> <div id="cont"> <div id="comment">$MESSAGE$</div> <div id="information"><img src="$USER_AVATAR_URL$" id="avatars"><img src="/img/noavatar.png" id="avatars"><b>$USERNAME$</b><br/><a href="$ENTRY_URL$">Перейти к комментарию</a></div> </div> </div>
/img/noavatar.png - замените на свой файл (нет аватара)
Заходим в таблицу стилей CSS и ставим код: Code .slider { float:left; width:300px; height:200px; position:relative; padding:0px; }
.sliderContent { float:left; width:300px; height:200px; clear:both; position:relative; overflow:hidden; border:1px solid #eee; background:#eee; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }
.sliderArrows a { display:none; text-indent:-9999px; outline:none; }
.sliderContent .item { position:absolute; width:300px; height:200px; background: #eee; }
.sliderBullets { position:absolute; top:10px; right:20px; z-index:50; margin:0px; border:1px solid #ccc; padding:5px 5px 5px 3px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
.sliderBullets a { display:block; float:left; text-indent:-9999px; outline:none; margin-left:5px; width:9px; height:9px; background:url(http://getelement.3dn.ru/materials/inf_comment/bull.png) no-repeat; background-position:left; }
.sliderBullets .active {background-position:right;}
.sliderContent a {outline:none;}
a img {border:none;}
.sliderContent #cont{ padding:0px 10px 10px 20px; display:block; overflow:hidden; }
.sliderContent h2{ font-size:15px!important; color:#666!important; margin-left:20px; }
#comment{ padding:10px; text-align:left; width:240px; height:80px; color:#fff; font-size:12px; overflow:hidden; background:#adbc4e; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }
#comment:before{ content: ' '; position: absolute; width: 0; height: 0; left:230px; top: 100px; border: 15px solid; border-color: #adbc4e transparent transparent #adbc4e; }
#information{ width:200px; float:left; background:none; font-size:12px; margin-top:10px; padding:5px; color:#666!important; overflow:hidden; }
#avatars{ float:right; border:none; width:40px; height:40; margin:-5px 4px 0px 0px; -webkit-box-shadow: 0 0px 6px #666; -moz-box-shadow: 0 0px 6px #666; box-shadow: 0 0px 6px #666; } Подключаем скрипт Подключать нужно в нижнюю часть сайта или на страницах перед закрывающимся тегом body Code <script src="http://getelement.3dn.ru/materials/inf_comment/mobilyslider.js" type="text/javascript"></script> Идем в то место, где хотите видеть информер и вставляем код: Code <div class="slider news"> <div class="sliderContent"> <h2>Комментарии</h2> $MYINF_3$</div></div> <script type="text/javascript"> $(function(){ $('.news').mobilyslider({ transition: 'fade', animationSpeed:500, bullets: true, autoplay: true, pauseOnHover: true, arrows: false, }); }); </script> $MYINF_3$ - Замените на свой номер информера. Готово!
|
|
Добавлять комментарии могут только зарегистрированные пользователи. Регистрация | Вход
|
Полезная информация
Мы настоятельно рекомендуем вам использовать браузеры последних версий. Нажмите на иконку, чтобы перейти к скачиванию нужного вам браузера
Для правильного отображения сайта, вам понадобится минимальное разрешение экрана 1024 x 768px, оптимальное разрешение: 1280 x 1024px
Mozilla Firefox - один из лучших браузеров (рекомендуем)
Opera - Популярный браузер, но не полностью поддерживает CSS3
Google Chrome - один из лучших и быстрых браузеров
Safari - Качественый браузер от компании Apple
Яндекс.Браузер - браузер от Яндекс на платформе Chrome
|