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


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



Статистика
Онлайн всего: 13
Гостей: 12
Пользователей: 1
LESIYI



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

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

Elastislide state 5 / Эластичный слайдер вид 5 Слайдер
Описание:
В этой части дано максимум возможности скрипта, и к всему этому теперь если у вас резиновые дивы можно не бояться и вставлять скрипт в таблицы, так-как сам див котрый мы будем легулировать будет в глобальном блоке и плюс слайдер будет(останеться) резиновым, это можно легко проверит играя с окном браузера(Это у кого див на весь сайт, в таблице css)

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

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

  • 3.Загружаем сss,images,js на свой сайт.
  • 4.Код слайдера:
    Code
    <style>
    @import 'http://windchange.my1.ru/css/reset.css';  
    @import 'http://windchange.my1.ru/css/elastislide.css';
    </style>  
      <noscript>
      <style>
      .es-carousel ul{
      display:block;
      }
      </style>
      </noscript>
    <!--В дивах прописанна - ширина,отступ,положние от вверх в низ в процентах слайдера */-->
    <div style="width:48%;float:left;padding:1%;">
      <!-- Elastislide Carousel -->
      <div id="carousel1" class="es-carousel-wrapper">
      <div class="es-carousel">
      <ul>
    Ваш информер 1
    </ul>
      </div>
      </div><!-- End Elastislide Carousel -->
      </div>
    <!--В дивах прописанна - ширина,отступ,положние от вверх в низ в процентах слайдера */-->
    <div style="width:48%;float:left;padding:1%;">
      <!-- Elastislide Carousel -->
      <div id="carousel2" class="es-carousel-wrapper">
      <div class="es-carousel">
      <ul>
    Ваш информер 2
      </ul>
      </div>
      </div><!-- End Elastislide Carousel -->
    </div>
      <script type="text/javascript" src='http://windchange.my1.ru/js/jquery.min.js'></script>  
      <script type="text/javascript" src='http://windchange.my1.ru/js/jquery.easing.1.3.js'></script>  
      <script type="text/javascript" src='http://windchange.my1.ru/js/jquery.elastislide.js'></script>  
      <script type="text/javascript">
      $('#carousel1').elastislide({
      imageW : 50, // Ширина изображенния должна соответсвовать с шириной картинки в информере
      margin : 0, // Отступы между изображениями
      border : 1, // Ширина обводки  
      easing : 'easeInBack', // Новая функция того-же скрипта скольжения и торможения на 1 кадре
      current : 3 // Начальная позиция, в даном случае с 4 картинки, делим по палам из общего числа изображений в сладере
      });
       
      $('#carousel2').elastislide({
      imageW : 50, // Ширина изображенния должна соответсвовать с шириной картинки в информере
      margin : 0, // Отступы между изображениями
      border : 1, // Ширина обводки  
      easing : 'easeInBounce', // Новая функция того-же скрипта потрясование
      current : 3 // Начальная позиция, в даном случае с 4 картинки, делим по палам из общего числа изображений в сладере
      });
      </script>



    В коде все подписанно, если, что не понятно комментируем.
    В 2 слайдере по умолчанию стоит в кавычках easeInBounce, можно поменять на стандартную easeInBack.

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

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

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

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

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

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

    Всего комментариев: 3
    +2   Спам
    1 tigerforce   Дата: 25.03.2012  Время: 07:49   [№ 12678]
    Упс, савсем забыл что в оригинальном js не прописанна функция ссылки, а в архиве оригинальный, так что даю ссылку windchange.my1.ru/js/jquery.elastislide.js

    2 Yarich0k   Дата: 25.03.2012  Время: 12:11   1 [№ 12680]
    помоги плиз,все поставил,но изображения черные,нифига не видно

    3 tigerforce   Дата: 25.03.2012  Время: 13:08   2 [№ 12683]
    Возможно у вас иморт не работает, попробуйте css подключить таким методом:
    Code
    <link rel="stylesheet" type="text/css" href='http://windchange.my1.ru/css/reset.css' /><link rel="stylesheet" type="text/css" href='http://windchange.my1.ru/css/elastislide.css' />


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

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


    Поиск


    На форуме

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

    0

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

    1

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

    9

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

    0

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

    0

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

    51

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

    1

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

    9

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

    2

    10 Уже все перепробовал )

    1


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


    Комментарии



    Copyright UcozOn.ru™ © 2008-2016


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