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


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



Статистика
Онлайн всего: 8
Гостей: 7
Пользователей: 1
sergaw



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

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

Elastislide state 4 / Эластичный слайдер вид 4 Слайдер
Описание:
В самой первой версии я написал как создать глобальный блок слайдер, можно и без него, но мне кажеться это будет выглядет не совсем профиссеонально, но бывают разные случаи и решать Вам.Да кстати во всех кодах слайдера встречайеться вот этот кусок кода:
Code
<noscript>
  <style>
  .es-carousel ul{
  display:block;
  }
  </style>
  </noscript>



Что это за <noscript> и зачем он нужен, все просто, когда у пользователя отключенна функция подержки скриптов то он выдаст ему сам слайдер.А без этого он не выдаст его разве, ответ: нет, потому-что стили еще про писанны в самом скрипте и следовательно подключить elastislide.css с другим названием мы не сможем будет просто баг.Возможные варианты: elastislide.css, elastislide2.css, так-как в скрипте они прописанны.Будьте внимательны.

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

  • 2.Заменяем код шаблона Информера:
    Code
    <li><a href="$ENTRY_URL$"><img src="$IMG_URL1$" width="180" height="182" 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 : 180, // Ширина должна быть равна ширине картинки в информере
      minItems : 3, // Число картинок в слайдере, влияет на их размер
      margin : +2, // Отступ между изображениями
      border : 0, // Рамка
      current : 4 // Начальная позиция, в даном случае с 4 картинки, делим по палам из общего числа изображений в сладере
      });
      </script>

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



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

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

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

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

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

    Просмотров: 3377 | Комментарии: 4 | Рейтинг: 4.2/5 | |Категория: Скрипты блоки и шапки | Добавил: tigerforce | Дата: 25.03.2012 | Скачали: 25
    Похожие новости на нашем сайте
    • Купить люстру

      Интернет-магазин люстр всех стилей. Огромный выбор, гарантия, доставка

      lampastore.ru

    Коментарий к новости

    Всего комментариев: 4
    4 admin63   Дата: 13.01.2014  Время: 19:57   [№ 15166]
    Ссылки битые для скачивания

    2 tartar01   Дата: 30.12.2012  Время: 16:49   [№ 14323]
    СЫЛКИ НЕ АКТИВНЫ!!!!!!!!!!!!!!!!!!!!!!!

    3 regionvay   Дата: 04.08.2013  Время: 23:59   1 [№ 14861]
    ты измени на свои ссылки и порядок

    1 breaker   Дата: 29.12.2012  Время: 16:34   [№ 14321]
    File was not found. It could possibly be deleted.


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

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


    Поиск


    На форуме

    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