Вставка слайдера в шаблон DataLife Engine

Здравствуйте, уважаемые читатели. Сегодня хочу привести пример о том как вставить слайдер на сайт с движком DataLife Engine. В стандартных шаблонах DLE под названиями Pisces и Gemini уже имеются встроенные слайдеры. Но я не стал их использовать для примера, а решил воспользоваться сторонними разработками, которых в интернете существует великое множество.

Например, введя в яндексе запрос «слайдер для сайта» уже в первой позиции выдачи получаем то, что нужно, а именно «30 слайдеров контента на jQuery» (сайт http://yeap. narod. ru/js/022.html). Заходим на него и видим коллекцию разнообразных слайдеров. Попробовав демки большинства слайдеров я остановился на варианте под номером 16, который называется Coin Slider .

Пример работы данного слайдера можно посмотреть здесь. Кстати, на этой странице есть информация о данном слайдере и его возможностях. Сказано, что он совместим с Internet Explorer 6 +, Firefox 2 +, Safari 2 +, Google Chrome 3 +, Opera 9 +. Что же — очень неплохо! Практически кроссбраузерный вариант слайдера! Ниже дано описание отличительных особенностей данного слайдера:

  • Бесплатное использование в соответствии с лицензией MIT
  • Уникальные эффекты перехода
  • Гибкая конфигурация
  • Навигационный модуль
  • Ссылки в изображениях
  • Совместимость с Android и iPhone
  • Валидный код
  • Автоматическая прокрутка картинок
  • Легкий вес (8kb только)
  • Полностью настраиваемый с помощью CSS

Отлично! Нас все это вполне устраивает, да и сам слайдер тоже смотрится неплохо (эффекты переходов, навигация и т. д.). Жмем на кнопку «Download & Support» и попадаем на страницу http://workshop. rs/2010/04/coin-slider-image-slider-with-unique-effects/ .

Под изображением слайдера Coin Slider видим три ссылки, а именно: Demo page. Download и Source code. Жмем Download и скачиваем архив coin-slider. zip. В архиве лежат три файла: coin-slider. js. coin-slider-styles. css. coin-slider. min. js. Кстати, на этой странице присутствует и инструкция по установке и настройке слайдера (на английском языке).

Как мы помним, перед нами стоит задача — вставить понравившийся слайдер в шаблон сайта на DLE. Не мудрствуя лукаво, в качестве шаблона выберем стандартный шаблон DataLife Engine под названием Default. В нем вместо рисунка в шапке (обведен прямоугольной рамкой красного цвета) вставим слайдер.

Для начала определимся с графическим рисунками для нашего слайдера, а именно с их размерами и количеством. Я решил выбрать такие размеры для картинок: 1114px (ширина) и 240px (высота). Под эти размеры создал (нарезал) три картинки морской тематики ( sea-1.jpg. sea-2.jpg. sea-3.jpg ). Разумеется картинок для слайдера может быть и больше. Главное не переусердствовать. Помните, что чем больше будет картинок и чем больше будут их размеры — тем дольше будет загружаться страница с установленным слайдером. Готовые и обработанные картинки помещаем в папку images нашего шаблона, где уже находятся другие картинки для данной темы.

Далее заходим в панель управления DLE — Управление шаблонами — Шаблоны сайта. Проверяем, что выбранный шаблон для редактирования установлен Default. Ниже жмем Создать новый файл шаблона. Вводим название slider, в результате чего создается новый файл в нашем шаблоне slider. tpl. Открываем его и вставляем следующий код:

Здесь по коду все ясно и понятно. Есть три ссылки с картинками и текстовыми описаниями к ним. Вместо знака решетки вставляете адреса нужных страниц Вашего сайта, куда пользователи будут переходить при клике по картинке. Вся эта конструкция помещена в див с идентификатором coin-slider. На всякий случай решил сделать выравнивание блока со слайдером по центру, дописав style=»margin:0 auto! important; Далее открываем файл стилей нашего шаблона styles. css (в папке style). В самом его низу вставляем код из скаченного файла coin-slider-styles. css. а именно:

Теперь открываем главный файл шаблона main. tpl (Default/main. tpl). В самом низу файла, перед тегом ‹/body› вставляем код:

В нужное место нашего шаблона ( main. tpl ) вместо стандартной шапки вставляем наш слайдер (подключаем выше созданный нами файл slider. tpl ) строчкой:

вместо строк:

Класс sld пока что оставим пустым, т. е. создавать для него параметры и значения пока не будем.

В папку js (Default/js) помещаем ранее скаченные файлы из нашего архива, а именно: coin-slider. js. coin-slider. min. js. Теперь их надо подключить в шаблоне. В файле main. tpl вверху его перед тегом ‹/head› вставляем строчки:

Размеры наших картинок для слайдера отличаются от размеров картинок в примере. Поэтому изменим некоторые настройки в файле coin-slider. js. В самом низу этого файла есть кусок кода, отвечающий за настройки слайдера:

Открываем блокнотом файл coin-slider. min. js и в самом его конце видим вот такой код:

Здесь заменим на: width:1114,height:240

В папке style открываем файл styles. css. Ранее в самый конец кода данного файла мы вставляли стили оформления для нашего слайдера. Кое-что в них тоже придется изменить.

Здесь мы указали ширину не 1114 px, а 1094 px (на 20 px меньше, с учетом значения полей в 10 px слева и справа).

Как видно на рисунке слайдер установлен и прекрасно работает. Но есть в нем три момента (я обвел их красными рамками), которые на мой взгляд требуют доработки. Как видно из рисунка в слайдере для навигации есть кнопки навигации prev и next. Заменим в них английский текст на русский (прописав пред и след соответственно). Для этого откроем файл coin-slider. min. js и в нем найдем вот такой участок кода:

Меняем его на:

Далее, внизу слайдера есть дополнительные кнопочки навигации в виде трех квадратиков (по количеству картинок в слайдере). С помощью css можно изменить их расположение (переместить, например, внутрь самого слайдера, сделать вместо квадратиков — кружочки, цифры и т. п.). Но, на мой взгляд, они вообще не нужны, ведь для пролистывания картинок у нас есть кнопки пред и след. Поэтому я предлагаю эти квадратики просто убрать. Для этого в coin-slider. min. js находим участок кода:

Заменяем его на:

В результате получаем окончательный вариант слайдера. Выглядит по-моему очень даже неплохо.

Вот, что еще хотелось бы сказать. Помните, что ранее мы подключая слайдер в фале main. tpl заключив его в div с классом sld. Так вот, шаблоны бывают разные, в смысле фиксированные по ширине и резиновые. Чтобы в резиновом шаблоне слайдер отображался красиво можно задать в классе sld как прямоугольную область (блок) с определенными размерами (ширина и высота) и заливкой. В этом прямоугольнике отцентрировать сам слайдер. Для примера добавив в конец файла styles. css строчку:

Получаем вот такой вариант:

С помощью Photoshop-а и css можно рисовать и размещать в шаблоне какие-угодно слайдеры (в любых местах шаблона).

В примере «Как использовать слайдер Coin Slider» разработчики рекомендуют скачать и подключить библиотеку jquery-1.4.2.js строчкой:

Я ее использовать не стал, т. к. и без нее все и так работало нормально. Но, если у кого-то будут наблюдаться проблемы в работе слайдера, то скачайте либо эту версию jquery, либо старше и подключите в шаблон (файл main. tpl ) перед тегом ‹/head› строчку:

предварительно поместив файл jquery-1.4.2.js в папку js вашего шаблона. Действительно, данный слайдер получился кроссбраузерным, прекрасно работает в IE 6.0 и других старых версиях браузеров. Вышеописанный способ вставки слайдера может применяться не только для сайтов на основе DataLife Engine, но и для любых других движков или html-файлов. На всякий случай выкладываю архив шаблона Default с подключенным слайдером, картинками и файлами из примера.

Добавить комментарий