All-For-Kompa.RU

Сегодня:
Карта сайта форум Главная
Скрыть рекламный блок

Всё для компа

chat

Видео дня

Популярное

Реклама

Хочешь помочь проекту? Установи наш баннер!

Партнёры



Развлекательный портал по игре Dota 2. У нас вы первым узнаете о последних игровых новостях, сможете почитать интересные статьи и гайды, посмотреть стримы популярных комментаторов и многое другое.

Про-софт - сайт професионального софта. Ето сайт не только софта но также игровых дополнений, музыки, фильмов, игр для ПК а также читов для ПК игр. Постоянное обновление материалов и каждый день появляется чтото новенькое!

Авторизация


Реклама

Хочешь помочь проекту? Установи наш баннер!

Опрос

На сколько оцениваете сайт?

1. Лучший из лучших
2. Круто
3. отлично
4. пойдёт
5. так себе
6. О_о

Реклама

Хочешь помочь проекту? Установи наш баннер!

Популярные тэги

Комментарии

Счетчики

На сайте: 1
Прохожие: 1
Пользователей: 0
Статус:

Счётчик тИЦ и PR Rambler's Top100
HTML и DHTML [2] JavaScript [5]
Mootools [2] JQuery [22]
Разное [2] CSS [4]
PHP [1]
АвторАвтор: leonP4 | ДатаДата: 11.09.2010 |Голосов: 0


Очень красивый и функциональный плагин на moootols и jQuery. Впечатляет
качество исполнения, лёгкость настройки и изящность самого плагина

Не поленитесь просмотреть все 4 демонстрации (переключение внизу) и выбрать наиболее понравившийся

Установка:

Плагин имеет различные настройки анимации и положение переключателей

Этап1:

После /head на страницах, где будет использован данный слайдер, вставляйте:

1) Для переключателей с левой стороны:





Code
<link rel="stylesheet" type="text/css" href="/css/style.css" />  
  <script language="javascript" type="text/javascript" src="/js/mootools.svn.js"></script>  
  <script language="javascript" type="text/javascript" src="/js/lofslidernews.mt11.js"></script>  
  <style>  
  /** css for override **/  
  /* move the main wapper to the right side */  
  .lof-snleft .lof-main-wapper{  
  margin-left:auto;  
  margin-right:inherit;  
  clear:both;  
  height:300px;  
  }  
  /* move the navigator to the left side */  
  .lof-snleft .lof-navigator-outer{  
  left:0;  
  top:0;  
  right:inherit;  
  }  
   
  .lof-snleft .lof-navigator .active{  
  background:url(/images/arrow-bg2.gif) center right no-repeat;  
  }  
  .lof-snleft .lof-navigator li div{  
  margin-left:inherit;  
  margin-right:18px;  
  }  
   
  .lof-snleft .lof-navigator li.active div{  
  margin-left:inherit;  
  margin-right:18px;  
  background:url(/images/grad-bg2.gif)  
   
  }  
  </style>

2) Для переключателей с правой стороны:

Code
<link rel="stylesheet" type="text/css" href="/css/style.css" />  
  <script language="javascript" type="text/javascript" src="/js/mootools.svn.js"></script>  
  <script language="javascript" type="text/javascript" src="/js/lofslidernews.mt11.js"></script>

Этап 2:
Далее прописывается сам слайдер (в том месте, где хотите видеть его отображение):

Code
<!------------------------------------- THE CONTENT ------------------------------------------------->  
  <div id="lofslidecontent45" class="lof-slidecontent lof-snleft">  
  <div class="preload"><div></div></div>  
  <!-- MAIN CONTENT -->  
  <div class="lof-main-wapper">  
  <div class="lof-main-item">  
  <img src="Ссылка на картинку" title="Заголовок 1 height="300" width="900">  
  <div class="lof-main-item-desc">  
  <h3><a target="_parent" title="Подсказка" href="#">Заголовок 1</a></h3>  
   

Любой ваш текст</p>  
  </div>  
  </div>  
  <div class="lof-main-item">  
  <img src="Ссылка на картинку" title="Заголовок 2 height="300" width="900">  
  <div class="lof-main-item-desc">  
  <h3><a target="_parent" title="Подсказка" href="#">Заголовок 2</a></h3>  
   

Любой ваш текст</p>  
   
  </div>  
  </div>  
  <div class="lof-main-item">  
  <img src="Ссылка на картинку" title="Заголовок 2 height="300" width="900">  
  <div class="lof-main-item-desc">  
  <h3><a target="_parent" title="Подсказка" href="#">Заголовок 3</a></h3>  
   

Любой ваш текст</p>  
   
  </div>  
  </div>  
  <div class="lof-main-item">  
  <img src="Ссылка на картинку" title="Заголовок 2 height="300" width="900">  
  <div class="lof-main-item-desc">  
  <h3><a target="_parent" title="Подсказка" href="#">Заголовок 4</a></h3>  
   

Любой ваш текст</p>  
   
  </div>  
  </div>  
  <div class="lof-main-item">  
  <img src="Ссылка на картинку" title="Заголовок 2 height="300" width="900">  
  <div class="lof-main-item-desc">  
  <h3><a target="_parent" title="Подсказка" href="#">Заголовок 5</a></h3>  
   

Любой ваш текст</p>  
   
  </div>  
  </div>  
  <div class="lof-main-item">  
  <img src="Ссылка на картинку" title="Заголовок 2 height="300" width="900">  
  <div class="lof-main-item-desc">  
  <h3><a target="_parent" title="Подсказка" href="#">Заголовок 6</a></h3>  
   

Любой ваш текст</p>  
   
  </div>  
  </div>  
   
  </div>  
  <!-- END MAIN CONTENT -->  
  <!-- NAVIGATOR -->  
   
  <div class="lof-navigator-outer">  
  <ul class="lof-navigator">  
  <li>  
  <div>  
  <img src="Ссылка на картинку" />  
  <h3> Заголовок 1 </h3>  
  Текст первого пункта  
  </div>  
  </li>  
  <li>  
  <div>  
  <img src="Ссылка на картинку" />  
  <h3> Заголовок 2 </h3>  
  Текст второго пункта  
  </div>  
  </li>  
   
  <li>  
  <div>  
  <img src="Ссылка на картинку" />  
  <h3> Заголовок 3 </h3>  
  Текст третьего пункта  
  </div>  
  </li>  
   
  <li>  
  <div>  
  <img src="Ссылка на картинку" />  
  <h3> Заголовок 4 </h3>  
  Текст четвёртого пункта  
  </div>  
  </li>  
  <li>  
  <div>  
  <img src="Ссылка на картинку" />  
  <h3> Заголовок 5 </h3>  
  Текст пятого пункта  
  </div>  
  </li>  
  <li>  
  <div>  
  <img src="Ссылка на картинку" />  
  <h3> Заголовок 6 </h3>  
  Текст шестого пункта  
  </div>  
  </li>  
  </ul>  
  </div>  
  </div>  
  <!-- END OF NAVIGATOR -->  
  

Так как я расписал вам все пункты на русском языке, думаю, у вас трудностей на этом этапе не возникнет

Этап 3:

Теперь переходим к виду анимации. Данный код необходимо вставить сразу после предыдущего:

1) Плавное исчезание

Code
<script type="text/javascript">  
  var _lofmain = $('lofslidecontent45');  
  var _lofscmain = _lofmain.getElement('.lof-main-wapper');  
  var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');  
  var object = new LofFlashContent( _lofscmain,  
  _lofnavigator,  
  _lofmain.getElement('.lof-navigator-outer'),  
  { fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800},  
  interval:3000,  
  direction:'opacity' } );  
  object.start( true, _lofmain.getElement('.preload') );  
  </script>

2) Перелистывание вертикальное

Code
<script type="text/javascript">  
  var _lofmain = $('lofslidecontent45');  
  var _lofscmain = _lofmain.getElement('.lof-main-wapper');  
  var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');  
  var object = new LofFlashContent( _lofscmain,  
  _lofnavigator,  
  _lofmain.getElement('.lof-navigator-outer'),  
  { fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800},  
  interval:3000,  
  direction:'vrdown' } );  
  object.start( true, _lofmain.getElement('.preload') );  
  </script>

3) Перелистывание горизонтальное

Code
<script type="text/javascript">  
  var _lofmain = $('lofslidecontent45');  
  var _lofscmain = _lofmain.getElement('.lof-main-wapper');  
  var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');  
  var object = new LofFlashContent( _lofscmain,  
  _lofnavigator,  
  _lofmain.getElement('.lof-navigator-outer'),  
  { fxObject:{ transition:Fx.Transitions.Quad.easeInOut, duration:800},  
  interval:3000,  
  direction :'hrleft' } );  
  object.start( true, _lofmain.getElement('.preload') );  
  </script>

Этап 4:

Осталось лишь залить скрипты из прикреплённого архива в папку js, стиль в папку css и все картинки в папку images

Автор: Материал подготовил Apocalypse

Источник : прямая ссылка на источник


Теги к статье:

| : jQuery, слайдер, скрипты, Mootools
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Популярные файлыНовые файлы
Call of Duty 5: World at ...[ Скачали 67375 раз ]
Амфибии, Гайд по ассасина...[ Скачали 31758 раз ]
Амфибии, Гайд по шаманам.[ Скачали 30663 раз ]
cs 1.6 patch v48 full[ Скачали 29046 раз ]
Русский бот PW Alfa v 2.6[ Скачали 17192 раз ]
Огромный пак глюков и баг...[ Скачали 12745 раз ]
civilization 5 скачать бе...[ Скачали 11941 раз ]
PW MP5[ Скачали 11149 раз ]
MHS-Bot-PW 2.3 ботовод[ Скачали 10405 раз ]
Niko Bellic (нико белич) ...[ Скачали 10006 раз ]
Wallpapers Girls №1044[ Добавлен 14.04.2024 ]
Shadow Corridor 2 (2024/E...[ Добавлен 14.04.2024 ]
Inkbound (2024/En/MULTI/R...[ Добавлен 13.04.2024 ]
The Planet Crafter (2024/...[ Добавлен 13.04.2024 ]
My Life: Farm Vet (2024/R...[ Добавлен 12.04.2024 ]
Headquarters: World War I...[ Добавлен 12.04.2024 ]
Ereban: Shadow Legacy (20...[ Добавлен 11.04.2024 ]
Broken Roads (2024/Ru/En/...[ Добавлен 11.04.2024 ]
Wallpapers Girls №1042[ Добавлен 11.04.2024 ]
Children of the Sun (2024...[ Добавлен 09.04.2024 ]