XemorDio | Дата: Понедельник, 04.04.2016, 13:28 | Сообщение # 1 |
 Генерал-полковник
Группа: Проверенные
Сообщений: 897
Награды: 7
Репутация: 8
Статус: Оффлайн
| Описание скрипта: Очередная реализация информера на MobilySlider. Информер сделан под темные дизайны. Также не забывайте, что сделать можно не только, информер "Последних новостей" Но и последних файлов, лучших новостей или популярных материалов.
Слайдер становится на паузу и не движется, при наводке мышкой, убираете мышку и слайдер снова движется, что очень удобно для чтения заголовков новостей, если не успел)
И так, начнем установку... Для того, чтобы информер выглядел как на демо, нужно создать его с такими параметрами:
Новости сайта (можно и каталог файлов, смотря для чего создаете) Материалы Дата добавления материала A (это последние материалы) Материалы: 7 (желательно 7, это для того, чтобы выглядело как на демо, 7 пунктов под картинкой) Колонки: 1 (обязательно)
Теперь в шаблон информера вставим данный код:
Код <div class="item"> <div id="cont"> <img id="newsimage" src="$IMG_URL1$"> <div id="text"> <h2>$TITLE$</h2> $MESSAGE$ <a href="$ENTRY_URL$" id="readmore">Читать дальше...</a></div></div> </div> Сохраняем, идем в таблицу стилей CSS и ставим стилизацию для информера:
Код .slider { float:left; width:600px; height:200px; position:relative; padding:0px; }
.sliderContent { float:left; width:600px; height:200px; clear:both; position:relative; overflow:hidden; border:2px solid #333; }
.sliderArrows a { display:none; }
.prev { display:none; }
.next { display:none; }
.sliderContent .item { position:absolute; width:600px; height:200px; background: #333; background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); background-image: -webkit-linear-gradient(top, #444, #222); background-image: -moz-linear-gradient(top, #444, #222); background-image: -ms-linear-gradient(top, #444, #222); background-image: -o-linear-gradient(top, #444, #222); background-image: linear-gradient(top, #444, #222); }
.sliderBullets { position:absolute; bottom:15px; left:10px; z-index:50; margin-left:10px; }
.sliderBullets a { display:block; float:left; text-indent:-9999px; outline:none; margin-left:5px; width:20px; height:20px; background:url(http://webmaster-ucoz.ru/ucoz/1/img/bullets.png) no-repeat; background-position:right; }
.sliderBullets .active { background-position:left; }
.sliderContent a { outline:none; }
a { color:yellowgreen; text-decoration:none; }
a img { border:none; } .sliderContent #cont{padding:10px 10px 10px 20px;display:block;}
#text{text-align:left;float:right;width:360px;height:128px;color:#ccc;font-size:12px;overflow:hidden;} #text h2{font-size:13px;color:#999;color:#c69d33;} #readmore{ background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#333)); background-image: -webkit-linear-gradient(top, #444, #333); background-image: -moz-linear-gradient(top, #444, #333); background-image: -ms-linear-gradient(top, #444, #333); background-image: -ms-linear-gradient(top, #444, #333); background-image: -o-linear-gradient(top, #444, #333); background-image: linear-gradient(top, #444, #333); -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; -webkit-box-shadow: 0 0px 2px #666; -moz-box-shadow: 0 0px 2px #666; box-shadow: 0 0px 2px #666; color:#c69d33; float:right; display:inline-block; font-size:11px; font-weight:bold; padding:4px; position:absolute; bottom:20px; right:20px; } #readmore:hover{color:#999;} #newsimage{float:left;border:4px solid #222;width:180px;height:120px;margin:10px 10px 0px 0px;} В нижней части сайта или в глобальном блоке подключим скрипт:
Код <script src="http://webmaster-ucoz.ru/ucoz/1/js/mobilyslider.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('.news').mobilyslider({ transition: 'horizontal', animationSpeed:300, bullets: true, autoplay: true, pauseOnHover: true, arrows: false, }); }); </script> Идем на страницу, где хотите видеть информер
И вставляем код информера предварительно скопировав его:
Код <div class="slider news"> <div class="sliderContent">$MYINF_1$</div> </div> $MYINF_1$ - это нужно поменять на свой номер информера.
Все, "информер последних новостей" готов.
|
|
| |