Группа: Бывалые
Ранг: Отмычка
Сообщений: 74
 Дата:
04.08.2015 в 17:07
Описание скрипта: Очередная реализация информера на 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$ - это нужно поменять на свой номер информера.
Все, "информер последних новостей" готов.
|
Группа: Бывалые
Ранг: Отмычка
Сообщений: 51
 Дата:
05.08.2015 в 05:03
Бармен, Ошибка на скриншоте, Чтать дальше
|
Слышу гимн зашитых ртов

Группа: Администратор
Ранг: Опытный
Сообщений: 1416
 Дата:
05.08.2015 в 09:33
-Мольфар™-, на скриншоте не важно, в коде правильно прописано
|