Приветствую Вас Прохожий | RSS Суббота, 10.12.2016, 17:38
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 16
Гостей: 14
Пользователей: 2
sergaw, MaDaRa



Главная » Файлы » Скрипты для uCoz » Скрипты блоки и шапки

Elastislide state 3 / Эластичный слайдер вид 3

Elastislide state 3 / Эластичный слайдер вид 3 Слайдер
Описание
Как и вдургих частей слайдер его преимущество это эластичность, так-как он не только подходит под ширину <div>, но и если они резиновые - то слайд тоже резиновый, к этому слайдеру я не представляю пример, потому-что все файлы и хост где я проверяю его стабильность могут быть удаленны или перенесенны, так что настоятельно рекомендую загружать их на свой сайт.


  • 1.Создаем информер, как на скриншоте.(Там стоить материалов 15,но чем меньше, тем быстрее будет загружать слайдер)

  • 2.Заменяем код шаблона Информера:
    Code
    <li><a href="$ENTRY_URL$"><img src="$IMG_URL1$" width="110" height="82" title="$TITLE$" /></a></li>

  • 3.Загружаем сss,images,js на свой сайт.
  • 4.Код слайдера:
    Code
    <style>
    @import '/css/reset.css';  
    @import '/css/elastislide.css';
    </style>  
      <noscript>
      <style>
      .es-carousel ul{
      display:block;
      }
      </style>
      </noscript>
      <!-- Elastislide Carousel -->  
      <div id="carousel" class="es-carousel-wrapper">  
      <div class="es-carousel">  
      <ul>  
    Тут Ваш созданный информер
      <ul>  
      </div>  
      </div>  
      <!-- End Elastislide Carousel -->  
      <script type="text/javascript" src='/js/jquery.min.js'></script>  
      <script type="text/javascript" src='/js/jquery.easing.1.3.js'></script>  
      <script type="text/javascript" src='/js/jquery.elastislide.js'></script>  
      <script type="text/javascript">
      $('#carousel').elastislide({
      imageW : 110, // Ширина изображенния должна соответсвовать с шириной картинки в информере
      margin : +11, // Отступы между изображениями
      border : 4, // Ширина обводки  
      easing : 'easeInBack' // Новая функция того-же скрипта скольжения и торможения на 1 кадре
      });
      </script>

  • 5.Можно использовать вместо информера код картин:
    Code
    <li><a href="#"><img src="images/medium/1.jpg" alt="image01" /></a></li>
    <li><a href="#"><img src="images/medium/2.jpg" alt="image02" /></a></li>
    <li><a href="#"><img src="images/medium/3.jpg" alt="image03" /></a></li>
    <li><a href="#"><img src="images/medium/4.jpg" alt="image04" /></a></li>
    <li><a href="#"><img src="images/medium/5.jpg" alt="image05" /></a></li>
    <li><a href="#"><img src="images/medium/6.jpg" alt="image06" /></a></li>
    <li><a href="#"><img src="images/medium/7.jpg" alt="image07" /></a></li>
    <li><a href="#"><img src="images/medium/8.jpg" alt="image08" /></a></li>
    <li><a href="#"><img src="images/medium/9.jpg" alt="image09" /></a></li>
    <li><a href="#"><img src="images/medium/10.jpg" alt="image10" /></a></li>
    <li><a href="#"><img src="images/medium/11.jpg" alt="image11" /></a></li>
    <li><a href="#"><img src="images/medium/12.jpg" alt="image12" /></a></li>
    <li><a href="#"><img src="images/medium/13.jpg" alt="image13" /></a></li>
    <li><a href="#"><img src="images/medium/14.jpg" alt="image14" /></a></li>
    <li><a href="#"><img src="images/medium/15.jpg" alt="image15" /></a></li>
    <li><a href="#"><img src="images/medium/16.jpg" alt="image16" /></a></li>
    <li><a href="#"><img src="images/medium/17.jpg" alt="image17" /></a></li>
    <li><a href="#"><img src="images/medium/18.jpg" alt="image18" /></a></li>
    <li><a href="#"><img src="images/medium/19.jpg" alt="image19" /></a></li>
    <li><a href="#"><img src="images/medium/20.jpg" alt="image20" /></a></li>
    <li><a href="#"><img src="images/medium/21.jpg" alt="image21" /></a></li>
    <li><a href="#"><img src="images/medium/22.jpg" alt="image22" /></a></li>
    <li><a href="#"><img src="images/medium/23.jpg" alt="image23" /></a></li>
    <li><a href="#"><img src="images/medium/24.jpg" alt="image24" /></a></li>
    <li><a href="#"><img src="images/medium/25.jpg" alt="image25" /></a></li>



    Что же касаеться функции JQuery то вот easeInBack и есть в коде слайдера, если покапаться в jquery.easing.1.3.js, то можна поставить или оптимизировать код под свой вкус.

    О скрипте:
    Изображения - Karrie Nodalo.
    Карусель написанная - Мэри Лу.

    *Код сделан и оптизирован пользователем tigerforce специально для сайта UcozOn.ru и конкурса UcozOn.ru, при копирование частей кода или содержания желательна ссылка на источник, жду ваших предложений и коментариев о стабильности скрипта.
  • Автор\Источник: http://ucozon.ru

    Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 0,337 Мб

    Дополнительные скрины:
    Elastislide state 3 / Эластичный слайдер вид 3

    Просмотров: 2105 | Комментарии: 2 | Рейтинг: 3.3/3 | |Категория: Скрипты блоки и шапки | Добавил: tigerforce | Дата: 25.03.2012 | Скачали: 28
    Похожие новости на нашем сайте
    Коментарий к новости

    Всего комментариев: 2
    +1   Спам
    2 tartar01   Дата: 30.12.2012  Время: 17:04   [№ 14324]
    БЛИН ОПЯТЬ. ТУТ ТОЖЕ СЫЛКИ ПРОСРОЧЕНЫ!

    Ответ: использование заглавного шрифта влечет замечание в профиль.. предупреждаем, следующее отношение повлечет реальность.

    1 tobik2000   Дата: 17.11.2012  Время: 10:55   [№ 14040]
    У меня тоже, автора в топку!


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]

    Форма входа
    Логин:
    Пароль:


    Поиск


    На форуме

    1 Продажа рекламные мест ...

    2

    2 Файловик. Уникальные те...

    0

    3 Куплю сайты в индексе Я...

    1

    4 Куплю сайты с ТИЦ/PR (п...

    9

    5 Предлагаю услуги для ан...

    0

    6 Предлагаю услуги по про...

    0

    7 Комплексный прогон сайт...

    51

    8 Сайт онлайн фильмов на ...

    1

    9 Проблема с таблицей

    9

    10 Отредактировать фото

    2


    Подробней о форуме


    Комментарии



    Copyright UcozOn.ru™ © 2008-2016


    Кнопка 88х31 сайта ucozon.ru