Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 1
  • 1
Форум о uCoz и Web » Вопросы по веб » JavaScript и jQuery » News Slider (by uNiceGroup, by nDiviD)
News Slider
AimedДата: Воскресенье, 29.05.2011, 17:41 | Сообщение # 1
Генерал-лейтенант
Сообщений: 648
Репутация: 60
Социальная репутация:

Статус: Offline

Здравствуй, кто бы ты ни был. Хочу сегодня с тобой поделится одной интересной и полезной штуковиной. C новостным слайдером. Вам наверное не раз хотелось выдать своим пользователям как можно больше информации, рассказать что же нового на Вашем сайте. Но зачастую возникала проблема нехватки места. Изначально этот слайдер создавался для одного из шаблонов, а теперь он общедоступен.

Сразу смотрим ДЕМО, если нравится, качаем АРХИВ.


Разархивирываем и заливает содержимое (т.е. папку newsslider со всеми внутренностями) в корень Вашего сайта.

Шаг первый. Подключаем стили.

Между head и /head вставляем:
Code
<link rel="stylesheet" type="text/css" href="/newsslider/css/ns.css" media="screen"/>
      <link rel="stylesheet" type="text/css" href="/newsslider/css/ns1.css" media="screen"/>
      <link rel="stylesheet" type="text/css" href="/newsslider/css/ns2.css" media="screen"/>
      <link rel="stylesheet" type="text/css" href="/newsslider/css/ns5.css" media="screen"/>

Из-за того, что стили эти писались сразу к нескольким "примочкам" на сайте, то в них присутствует немного лишнего кода. Освобожусь - почищу, оптимизирую. Но этот код никак на Ваш сайт не повлияет.

Шаг второй. Html код.

Сначала опишу оболочку.
Code
<div class="nss" align="center" style="width: 940px; margin:-250px 0 0 -500px;top:50%;left:50%;position:absolute; " >
<div class="rt-grid-16 rt-alpha rt-omega">
<div class="title3">
<div class="rt-block">
<div class="module-title"><h2 class="title">News Slider</h2></div>
<div class="rt-module-inner">
<div class="module-content">
<div class="nsp_main autoanim nsp_fs90" id="nsp-nsp_106" style="width:100%;">
<div class="nsp_arts bottom" style="width:100%;">
<div class="nsp_top_interface">
<div><ul class="pagination"><li >1</li><li>2</li><li>3</li><li>4</li></ul></div>
</div>
<div class="n1" style="width: 940px; overflow: hidden;"><div class="n2" style="width: 100000px;"><div class="n3" style="width: 940px; float: left;">
ТУТ ВНУТРЕННИЙ КОД
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>

Тут у нас весь контейнер, верхняя полоса, и место под внутренний код. Тут лучше ничего не трогать.
Теперь внутренний код
Code
<div class="nsp_art" style="width:20%;clear:both;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/ludi-iks-5.html" title="Люди Икс: Первый класс - 5">"Люди Икс: Первый класс" - 5</a></h4><p class="nsp_text tleft fleft">Я расскажу вам эксклюзивно о новой части «Людей Икс: Первый класс» за ...</p></div></div>
<div class="nsp_art" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/mobilnie-telefony/lutshie-programmu-dlya-ipad.html" title="Лучшие программы для iPad">Лучшие программы для iPad</a></h4><p class="nsp_text tleft fleft">Когда iPad только поступил в продажу, программ на него было мало. Така...</p></div></div>
<div class="nsp_art" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/letnie-blokbasteri-2011.html" title="Летние блокбастеры 2011">Летние блокбастеры 2011</a></h4><p class="nsp_text tleft fleft">Вот и пришло время разобраться с самыми крупными релизами лета 2011 го...</p></div></div>
<div class="nsp_art" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/igra-vedmak-2-ubiicy-korolei-obzor.html" title="Игра Ведьмак 2: Убийцы королей обзор">Игра Ведьмак 2: Убийцы королей обзор</a></h4><p class="nsp_text tleft fleft">Продолжение самой оригинальной и интересной RPG 2007-го наконец в прод...</p></div></div>
<div class="nsp_art" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/kannskij-kinofestival-2011-itogi-.html" title="Каннский кинофестиваль: Прогнозы на 2011 год и победители последних лет!">Каннский кинофестиваль: Прогнозы на 2011 год и победители последних ле…</a></h4><p class="nsp_text tleft fleft">Перед вами фавориты каннского конкурса 2011 года. Честно публикуем в...</p></div></div>
<div class="nsp_art" style="width:20%;clear:both;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/igra-fable-3-2011-obzor.html" title="Игра Fable 3 2011 обзор">Игра Fable 3 2011 обзор</a></h4><p class="nsp_text tleft fleft">Третья часть знаменитой ролевой игры от мастера Питера Мулинье вышла...</p></div></div>
<div class="nsp_art" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/igra-brink2011-obzor.html" title="Игра BRINK 2011 обзор">Игра BRINK 2011 обзор</a></h4><p class="nsp_text tleft fleft">Крайне любопытный проект от студии Splаsh Damage, под названием Brin...</p></div></div>
<div class="nsp_art" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/igra-dungeon-siege-3-obzor.html" title="Игра Dungeon Siege 3 предварительный обзор">Игра Dungeon Siege 3 предварительный обзор</a></h4><p class="nsp_text tleft fleft">Качественный представитель жанра "hack and slash" нынче редкость, и им...</p></div></div>
<div class="nsp_art" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/film-piraty-karibskogo-morya-4-chasti-kvadrikvela.html" title="Фильм Пираты Карибского моря 4. И обзор всех четырех фильмов!">Фильм Пираты Карибского моря 4. И обзор всех четырех фильмов!</a></h4><p class="nsp_text tleft fleft">Дата выхода свежего квадриквела «Пираты Карибского моря: На странных б...</p></div></div>
<div class="nsp_art" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/igra-l-a-noire-2011-obzor.html" title="Игра L. A. Noire 2011 обзор">Игра L. A. Noire 2011 обзор</a></h4><p class="nsp_text tleft fleft">Наконец, 17 мая 2011 состоялся релиз долгожданного детективного трил...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;clear:both;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/luchie-melodrami-2010.html" title="Лучшие мелодрамы 2010 года">Лучшие мелодрамы 2010 года</a></h4><p class="nsp_text tleft fleft">Жанр мелодрамы произрастает корнями из драмы. Как правило, если в др...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/mobilnie-telefony/mobilnye-telefony-novinki2011.html" title="Мобильные телефоны новинки 2011.Бюджетные модели.">Мобильные телефоны новинки 2011.Бюджетные модели.</a></h4><p class="nsp_text tleft fleft">Наигравшись с дорогими и сложными в обращении смартфонами, иногда пр...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/forsaj-5-2011-i-obzor-franchaiza.html" title="Фильм Форсаж 5 (2011) и обзор франчайза">Фильм Форсаж 5 (2011) и обзор франчайза</a></h4><p class="nsp_text tleft fleft">На большие экраны c ревом ворвалась уже пятая часть самого знаменитого...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/igra-duke-nukem-forever-obzor.html" title="Игра Duke Nukem Forever предварительный обзор">Игра Duke Nukem Forever предварительный обзор</a></h4><p class="nsp_text tleft fleft">Про эту игру на протяжении 12 лет ходило столько слухов, было создано ...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/igra-fear3-2011-obzor.html" title="Игра F.E.A.R.3 2011 предварительный обзор">Игра F.E.A.R.3 2011 предварительный обзор</a></h4><p class="nsp_text tleft fleft">До релиза третьей части атмосферного хоррор-шутера от 1-го лица остает...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;clear:both;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/red-faction-armageddon-predvaritelnyi-obzor.html" title="Игра Red Faction Armageddon 2011 предварительный обзор">Игра Red Faction Armageddon 2011 предварительный обзор</a></h4><p class="nsp_text tleft fleft">Уже четвертая по счету часть самого «разрушительного» шутера совреме...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/filmy-2010-goda-spisok.html" title="Лучшие фильмы 2010 года: список">Лучшие фильмы 2010 года: список</a></h4><p class="nsp_text tleft fleft"> Представляем полный список наших статей - где собраны лучших фил...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/mobilnie-telefony/obzor-planshetnyh-kompyuterov-2011-goda.html" title="Обзор планшетных компьютеров 2011 года. Новинки весны!">Обзор планшетных компьютеров 2011 года. Новинки весны!</a></h4><p class="nsp_text tleft fleft"> В 2011 году на выставках CES2011 (Consumer Electronics Show, Л...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/mobilnie-telefony/plansheti-na-windows.html" title="Обзор планшетов на Windows. Аргументы за и против.">Обзор планшетов на Windows. Аргументы "за" и "против".</a></h4><p class="nsp_text tleft fleft">До 2010 года планшетный компьютер в сознании людей оставался всё-таки ...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/mobilnie-telefony/plansheti-na-android.html" title="Обзор: Планшеты на Android">Обзор: Планшеты на Android</a></h4><p class="nsp_text tleft fleft">Планшетный бум ещё впереди, но в этой статье мы рассмотрим те планшетн...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;clear:both;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/premery-filmov-2011-vesna.html" title="Премьеры фильмов 2011: Весна.Часть 2">Премьеры фильмов 2011: Весна.Часть 2</a></h4><p class="nsp_text tleft fleft">В первой части статьи были охвачены, в большинстве своем, новинки ап...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/mortal-kombat-2011.html" title="Mortal Kombat 2011 обзор">Mortal Kombat 2011 обзор</a></h4><p class="nsp_text tleft fleft">Свершилось! Самый жестокий файтинг современности под названием Mortal ...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/mobilnie-telefony/navigacionnie-programmi-dlya-mobilnih-telefonov.html" title="Навигационные программы для мобильных телефонов">Навигационные программы для мобильных телефонов</a></h4><p class="nsp_text tleft fleft">GPS в мобильных телефонах уже давно перестал быть функцией исключитель...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/luchshie-faitingi-na-pc-.html" title="Лучшие файтинги на PC и консолях">Лучшие файтинги на PC и консолях</a></h4><p class="nsp_text tleft fleft">Ten Stars предлагает вашему вниманию десятку лучших файтинг-игр за пос...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/kric-4-from-proshloe-k-nastoishemy-or-new-chact-popular-phranshizi.html" title="Фильм Крик 4 от прошлого к настоящему, или Новая часть популярной франшизы">Фильм "Крик 4"от прошлого к настоящему, или Новая часть популярной фра…</a></h4><p class="nsp_text tleft fleft">На этой неделе стартовал очередной фильм популярной франшизы «Крик» - ...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;clear:both;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/mobilnie-telefony/obzor-mobilnih-telefonov-1-kvartal.html" title="Рейтинг смартфонов 2011. I квартал">Рейтинг смартфонов 2011. I квартал</a></h4><p class="nsp_text tleft fleft">За последние 3 месяца в продажу поступило довольно много новинок сот...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/kannskij-kinofestival-2011.html" title="Каннский кинофестиваль 2011 – все о великом событии!">Каннский кинофестиваль 2011 – все о великом событии!</a></h4><p class="nsp_text tleft fleft"> Вот и закончился один из самых влиятельных и значимых кинофе...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/dirt3.html" title="Игра Dirt3 предварительный обзор">Игра Dirt3 предварительный обзор</a></h4><p class="nsp_text tleft fleft"> Хотите узнать, чем занимались два года Codemasters - создатели...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/portal-2.html" title="Игра Portal 2: обзор">Игра Portal 2: обзор</a></h4><p class="nsp_text tleft fleft">Продолжение необычной эксперимент-головоломки от кудесников Valve ...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/twisted-metal-2011.html" title="Twisted Metal 2011 предварительный обзор">Twisted Metal 2011 предварительный обзор</a></h4><p class="nsp_text tleft fleft">Tenstars предлагает вашему вниманию мини-анонсы, посвященные выходящим...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;clear:both;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/gonki-2010-obzor-igr-dlya-pc.html" title="Гонки 2010 - обзор игр для PC">Гонки 2010 - обзор игр для PC</a></h4><p class="nsp_text tleft fleft">Эта статья - своего рода обзор лучших гоночных игр для PC. Неплохих го...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/dragon-age-2-obzor.html" title="Dragon Age 2 - обзор">Dragon Age 2 - обзор</a></h4><p class="nsp_text tleft fleft"> Если не шедевральная, то, по крайней мере, очень качественна...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/the-best-films-from-russia-2010.html" title="Лучшие русские фильмы 2010">Лучшие русские фильмы 2010</a></h4><p class="nsp_text tleft fleft">Подводить черту под лучшими русскими фильмами за 2010 год – дело сложн...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/igra-shift-2-unleashed-obzor.html" title="Игра Shift 2 Unleashed - обзор">Игра Shift 2 Unleashed - обзор</a></h4><p class="nsp_text tleft fleft">Теперь, прежде чем бежать и хватать только-только появившуюся в про...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/kanny-2011.html" title="Канны 2011 – конкурсная программа!">Канны 2011 – конкурсная программа!</a></h4><p class="nsp_text tleft fleft"> Для многих кинолюбителей, не говоря уже о творцах кинематограф...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;clear:both;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/samye-ojidaemye-igry-2011-na-pc-2.html" title="Самые ожидаемые игры 2011 на PC (2)">Самые ожидаемые игры 2011 на PC (2)</a></h4><p class="nsp_text tleft fleft">Вторая часть статьи посвящена самым ожидаемым играм, которые выходят в...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kinosovety/samye-ojidaemye-premery-filmov-2011.html" title="Самые ожидаемые премьеры фильмов 2011: Весна.Часть 1">Самые ожидаемые премьеры фильмов 2011: Весна.Часть 1</a></h4><p class="nsp_text tleft fleft">Ради чего мы ходим в кинотеатр? Посмотреть тот или иной фильм? Правиль...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/samye-ojidaemyi-igry-2011.html" title="Самые ожидаемые игры 2011 на PC">Самые ожидаемые игры 2011 на PC</a></h4><p class="nsp_text tleft fleft"> Tenstars предлагает вашему вниманию самые ожидаемые игры...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/igra-crysis-2-2011-obzor.html" title="Игра Crysis 2 (2011) - обзор">Игра Crysis 2 (2011) - обзор</a></h4><p class="nsp_text tleft fleft">Наступило 23 марта 2011 – дата выхода Crysis 2, продолжения с...</p></div></div>
<div class="nsp_art unvisible" style="width:20%;"><div style="padding:2px 5px 2px 5px"><h4 class="nsp_header tcenter fleft"><a href="/sovety/kompyuternye-igry/onlain-igry-dlya-devochek.html" title="Онлайн игры для девочек: список лучших игр!">Онлайн игры для девочек: список лучших игр!</a></h4><p class="nsp_text tleft fleft">        Онлайн игры для девочек,...</p></div></div>

Это все 40! материалов, что присутствуют в слайдере. их Вы можите менять на свои. Теперь разберем 1 строчку, что бы было понятно.

Code
<div class="nsp_art" style="width:20%;clear:both;">
      <div style="padding:2px 5px 2px 5px">
      <h4 class="nsp_header tcenter fleft">
      <a href="/sovety/kinosovety/ludi-iks-5.html" title="Люди Икс: Первый класс - 5">"Люди Икс: Первый класс" - 5</a>
      </h4>
      <p class="nsp_text tleft fleft">Я расскажу вам эксклюзивно о новой части «Людей Икс: Первый класс» за ...</p>
      </div>
</div>

Значит у нас есть див, с классом nsp_art !ВНИМАНИЕ! этот клас имеют только первые 10 новостей, те, которые видимы изначально, все остальные имеют класс nsp_art unvisible! Стиль, в 20% ширины всего блока (ну у нас всего же 5 новостей в строку, вот и приходится на 1 новость по 20%), и запрет на "обтикание" этой новости другими !ВАЖНО!, что запрет на обтикание присвается блокам, начинающим строку (т.е. 1, потом 6, потом 11, потом 16 и т.д.). В диве еще один див =), который создает небольшой отступ по краям и содержет в себе "заглавие", ссылку, и параграф (тот самый p).

Шаг третий. Подключаем javascript.
В самый низ, перед body вставляем:
Code
<script type="text/javascript">
//<![CDATA[
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick["nsp-nsp_106"] = {
      "animation_speed": 350,
      "animation_interval": 25000,
      "news_column": 5,
      "news_rows": 2,
      "links_columns_amount": 1,
      "links_amount": 0,
      "counter_text": '<strong>Page:</strong>'
};
//]]>
</script>

      <script type="text/javascript" src="/newsslider/js/ns.js"></script>


Не забываем разархивировать скаченный архив и залить содержимое (т.е. папку newsslider со всеми внутренностями) в корень Вашего сайта!

Все. Если Вы владеете знаниями css, то сможете полностью настроить вид слайдера под себя. Желаю удачи.

Источник: www.unicegroup.ru
Как установить кнопки социальных сетей?

 
Форум о uCoz и Web » Вопросы по веб » JavaScript и jQuery » News Slider (by uNiceGroup, by nDiviD)
  • Страница 1 из 1
  • 1
Поиск: