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


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



Статистика
Онлайн всего: 6
Гостей: 5
Пользователей: 1
MaDaRa



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

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

Первое.
Создаем информер: Панель управления >>> Вкладка инструменты >>> Информеры >>> Создать информер.
К примеру новостей. Способ сортировки >>> Дата добавления материала D, Количество материалов >>> 15, Количество колонок >>> 1


Открываем шаблон информера — оттуда все удаляем, и ставим код.
Code
<li><a href="$ENTRY_URL$"><img title="$TITLE$" src="$IMG_URL1$" width="180" height="115"></a></li>



Где $TITLE$ - название новости, $IMG_URL1$ - ссылка на загруженную картинку, $ENTRY_URL$ - ссылка к полной новости.

Второе.
Создаем глобальный блок: Панель управления >>> Управление дизайном >>> Глобальные блоки >>> Добавить блок. На зовем его SLIDER, английский шрифт.
Теперь вставляем в созданный блок SLIDER сам код.
Code
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<meta name="description" content="Elastislide - A Responsive jQuery Carousel Plugin" />
<meta name="keywords" content="carousel, jquery, responsive, fluid, elastic, resize, thumbnail, slider" />
<meta name="author" content="Codrops" />
<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' />
  <noscript>
  <style>
  .es-carousel ul{
  display:block;
  }
  </style>
  </noscript>
<br><h2>Elastislide A Responsive jQuery Carousel Plugin</h2>
  <div class="content">
  <!-- Elastislide Carousel -->
  <div id="carousel" class="es-carousel-wrapper">
  <div class="es-carousel">
<ul>
<script type="text/javascript" src='Ссылка на ваш информер'></script>
<ul>
  </div>
  </div>
  <!-- End Elastislide Carousel -->
  <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">
  $('#carousel').elastislide({
  imageW : 180,
  minItems : 5
  });
  </script></div>



Регулирует размер и пропуск:
imageW : 180,minItems : 5 >>> лучше не менять.
Вместо скриптовой версии ссылки можно вставить: $MYINF_X$ >>> где X номер вашего информера >>> с права от созданного информера.

Также изображения можно вставить и без информера — в случае если вам нужно прикрепить определенные картинки и ссылки, то вот код.
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>



# - Ссылка, images/large/25.jpg — ссылка на картинку, в архиве все есть,просто загружаете папку images по ftp на ваш (host) или ручным методом (Файловый менеджер).

Третье.
Теперь я поясню к материалу почему мы создали глобальный блок. Это чисто моя инициатива, код находиться в отдельном блоке что упращает его редактирование. Что бы слайдер появился на нужном вам месте достаточно взять простой код.
Например: Панель управления >>> Управление дизайном >>> Страницы сайта.
Смотрим чуть ниже редактора кода, мы видим что рядом с другими глобальными блоками появился наш $GLOBAL_SLIDER$.
Например вы хотите чтобы слайдер был над/под шапкой сайта ищем $GLOBAL_AHEADER$ и вставляем перед или после него $GLOBAL_SLIDER$.

Все слайдер готов, но только на главной и созданных вами страниц. В модулях же его тоже надо будет вставлять по месту.(Страница архива материалов, Страница материала и комментариев к нему, Общий вид страниц форума, Главная страница каталога статей, Страница со списком материалов раздела, Страница со списком материалов категории, Страница материала и комментариев к нему, Страница поиска и рейтинга материалов, Страница добавления/редактирования материала и так далее) Это чтобы было на всех страницах вашего сайта.

Есть еще легче варианты, например форум: Панель управления >>> Управление дизайном >>> Общий вид страниц форума.
Кнопка поиска и замены - Найти: </table> $BODY$ >>> Заменить на: $GLOBAL_SLIDER$ </table> $BODY$ >>> найти, заменить. Вот что у нас получилась.


И еще один пример, чтобы показать как слайдер эластичен: Панель управления >>> Управление дизайном >>> Главная страница модуля игры. Ищем <hr /> $BODY$, заменяем или перед ним вставляем $GLOBAL_SLIDER$. Также делаем: (Страница со списком материалов раздела, Страница со списком материалов категории, Страница материала и комментариев к нему)


Теперь немного о скрипте.
Elastislide использует JQuery Плагин Touchwipe , который позволяет вам получить и стереть события на iPhone, iPad или iPod Touch.
Изображения - Karrie Nodalo.
Карусель написанная Мэри Лу.

Мои исправления.
Запрет на ссылку - не открывал материал. (исправленно в jquery.elastislide.js)
Адаптирован под ucoz.
Подключаемый информер.
Все файлы и описание установки есть в архиве.
Отдельная страница с кодом.

Примечания.
Если по каким то причинам у вас не работает $GLOBAL_SLIDER$ попробуйте без него.
Учтите у всех шаблонов свой дизайн и стили менять его нужно, если вы знаете хотя бы базовые знания в HTML (язык разметки WWW документов) и CSS (Cascading Style Sheets) технологиях. Специально для сайта ucozon.ru, указывайте ссылку на источник материалов.
Автор\Источник: не указан или не известен!

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

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

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

Просмотров: 2456 | Комментарии: 3 | Рейтинг: 2.3/3 | |Категория: Скрипты блоки и шапки | Добавил: tigerforce | Дата: 13.02.2012 | Скачали: 10 | Теги: слайдер
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 3
+1   Спам
1 edik2009   Дата: 16.02.2012  Время: 02:12   [№ 12197]
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<meta name="description" content="Elastislide - A Responsive jQuery Carousel Plugin" />
<meta name="keywords" content="carousel, jquery, responsive, fluid, elastic, resize, thumbnail, slider" />
<meta name="author" content="Codrops" /> - это зачем???

<h2>Elastislide A Responsive jQuery Carousel Plugin</h2> - Заголовок ? У нас сайт о сладере?

2 tigerforce   Дата: 17.02.2012  Время: 20:19   1 [№ 12210]
Да они не нужны, но как это моя первая версия решил выложыть оригинальный код, впоследущих же версий их не будет.

3 admin63   Дата: 13.01.2014  Время: 20:04   2 [№ 15167]
Дайте рабочую ссылку на архив, на всех 5-ти версиях файл не найден или удален(((((


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

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


Поиск


На форуме

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