Регистрация Войти
Вход на сайт
» » Вставка слайдера в шаблон DataLife Engine

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

Просмотров: 17758
Комментариев: 21
Версия для печати

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

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

слайдер 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/.

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

Под изображением слайдера 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. В нем вместо рисунка в шапке (обведен прямоугольной рамкой красного цвета) вставим слайдер.

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


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

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

 

<div id='coin-slider' style="margin:0 auto !important;">
	<a href="#" target="_blank">
	    <img src="{THEME}/images/sea-1.jpg" />
	         <span><b>Морская тема 1</b><br />
	Пишем любой текст для нашей первой темы...
	</span>
	</a>
	<a href="#" target="_blank">
	<img src="{THEME}/images/sea-2.jpg" />
	<span><b>Морская тема 2</b><br />
	Пишем любой текст для нашей второй темы...
	</span>
	</a>
	<a href="#">
	<img src="{THEME}/images/sea-3.jpg" />
	<span><b>Морская тема 3</b><br />
	Пишем любой текст для нашей третьей темы...
	</span>
	</a>
	</div>

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

.coin-slider { overflow: hidden; zoom: 1; position: relative; }
	.coin-slider a{ text-decoration: none; outline: none; border: none; }
	.cs-buttons { font-size: 0px; padding: 10px; float: left; }
	.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
	.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
	.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
	.cs-prev, 
	.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

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

<script type="text/javascript">
	$(document).ready(function() {
	$('#coin-slider').coinslider();
	});
	</script>

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

<div class="hdr">{include file="slider.tpl"}</div>

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

<div class="himage"><div class="himage"><div class="himage dpad">
	<h2>Многопользовательский новостной движок,<br />
	предназначенный для организации собственных<br />
	СМИ и блогов в интернете.</h2>
	</div></div></div>

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

<script type="text/javascript" src="{THEME}/js/coin-slider.js"></script>
	<script type="text/javascript" src="{THEME}/js/coin-slider.min.js"></script>

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

// default values
	$.fn.coinslider.defaults = {
	width: 565, // width of slider panel
	height: 290, // height of slider panel
	spw: 7, // squares per width
	sph: 5, // squares per height
	delay: 3000, // delay between images in ms
	sDelay: 30, // delay beetwen squares in ms
	opacity: 0.7, // opacity of title and navigation
	titleSpeed: 500, // speed of title appereance in ms
	effect: '', // random, swirl, rain, straight
	navigation: true, // prev next and buttons
	links : true, // show images as links 
	hoverPause: true // pause on hover
	}

Меняем высоту и ширину на значения для наших картинок, т.е. ставим вот такие значения:

width: 1114, // width of slider panel
	height: 240, // height of slider panel

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

this.each(function(){init(this);});};$.fn.coinslider.defaults={width:565,height:290,spw:7,sph:5,delay:3000,sDelay:30,opacity:0.7,titleSpeed:500,effect:'',navigation:true,links:true,hoverPause:true};})(jQuery);

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

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

.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }

Меняем на

.cs-title { width: 1094px; padding: 10px; background-color: #000000; color: #FFFFFF; }

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

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


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

.append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>prev</a>");$('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>next</a>");

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

.append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'>пред</a>");$('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'>след</a>");

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

$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").

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

$("").

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

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

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

.sld {width:98%; height:260px; margin:0 auto; background-color:#000; padding:10px;}

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

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

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

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

<script type="text/javascript" src="jquery-1.4.2.js"></script>

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

<script type="text/javascript" src="{THEME}/js/jquery-1.4.2.js"></script>

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

Default.zip [555,3 Kb]
 

Рейтинг статьи:
  
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
Комментарии (21)
Евгений 15 ноября 2013 20:41
Отличная статья, все разжевано как для школьников младших классов. Респект за контент, воспользовался, заработало все сразу.
Цитировать          1
Дмитрий 20 декабря 2013 11:56
Супер статья! Я давно искал что нибудь подобное.

Обязательно применю ваш способ вставки слайдера!!!
Огромное спасибо.

Еще хотел узнать у Вас. А как сделать кликабельными текст в слайдере. Чтоб нажимая на картинку или текст можно было перейти на новость на сайте?
Был бы очень благодарен если поможете)))
Цитировать          2
Максим 9 сентября 2014 15:52
а как сделать чтобы кликая по картинке не открывалась новая страница в отдельном окне ? ссылку то я добавил вместо # а при нажатие на картинку открывается новое окно. Помогите пожалуйста.
Цитировать          3
Пользователь offline Офлайн Alexxey 10 сентября 2014 13:58
Цитата: Максим
а как сделать чтобы кликая по картинке не открывалась новая страница в отдельном окне ? ссылку то я добавил вместо # а при нажатие на картинку открывается новое окно. Помогите пожалуйста.

Убрать из ссылки target="_blank"
Цитировать          4
Anonymous 13 ноября 2014 13:24
Как изменить цвет и размер текста к изображениям в слайдере?
Цитировать          5
Алексадр 6 декабря 2014 07:12
Спасибо. то что нужно. на новой версии тоже встал, всё работает классно.
Цитировать          6
Alex888q 13 января 2015 17:51
Спасибо! Классный пост. Добавил в закладки...
Цитировать          7
root89 5 марта 2015 21:24
Подскажите, почему у меня не работает на другом шаблоне? Всё делал как описывалось...
Цитировать          8
Пользователь offline Офлайн Alexxey 6 марта 2015 08:31
Цитата: root89
Подскажите, почему у меня не работает на другом шаблоне? Всё делал как описывалось...

Очень странно, что не работает... Проверьте еще раз, может что упустили или не подключили... Да и по самому шаблону посмотрите - нет ли каких накладок, к примеру по css и т.п.
Цитировать          9
root89 6 марта 2015 19:04
Да вот перепроверял всё от и до, ставил скинутый в статье "Default" - работает, прописываю в своём - нет( Просто удивительно! CSS в своём шаблоне тоже ковырял, даже подключал библиотеку. Диву даюсь, что не так, что ему не нравится...
Цитировать          10
.htaccess 15 марта 2015 08:48
что-то .sld подключаем в конце статьи, ссылаясь на ранее якобы подключение, но по факту в статье мы не делали этого. Добейте
Цитировать          11
.htaccess 15 марта 2015 08:49
Цитата: .htaccess
что-то .sld подключаем в конце статьи, ссылаясь на ранее якобы подключение, но по факту в статье мы не делали этого. Добейте

либо это уже hdr?
Цитировать          12
Александр Ким 3 апреля 2015 22:02
авто воспроизведение убирается? или как отрегулировать задержку перед показом след.сладйда?
Цитировать          13
Chara 27 июня 2015 20:35
Спасибо! Максимально доходчиво. Нигде такого нет. Первый слайдер, который у меня реально встал, все благодаря вам!

Единственный вопрос - может быть подскажете, с чем может быть связано: когда обновляю страницу, все картинки из слайдера отображаются на странице одновременно, одна под другой, и буквально на несколько секунд так зависают, а потом "лишние" пропадают, как бы "складываются", и слайдер дальше функционирует нормально, красиво, и все хорошо. Это вот построение в ряд друг под другом длится буквально 3-4 секунды, и неважно, в слайдере 2 картинки или 4, и немного напрягает. Пока из-за этого не решаюсь его включить для посетителей. Размер картинок 544х222, слайдер располагается по центру на главной перед контентом. Может быть вы можете подсказать, с чем такое хотя-бы теоретически может быть связано?, в какую сторону копать.
Цитировать          14
Dimast21 9 сентября 2015 17:57
скажите, а как сделать два слайдера рядом лруг с другом?
Цитировать          15
Юлия 25 сентября 2015 17:03
Скажите пожалуйста, почему не отображаются стрелочки для пролистывания?
Цитировать          16
hipi 2 октября 2015 13:16
Как сделать так чтоб картинки отображались центрированно? у меня отображается лишь верхняя половина картинки.
Цитировать          17
baburxan 25 ноября 2015 08:46
Здравствуйте.
Отличная статья. Доходчиво и примеры "на пальцах" как говорится.
Все установил и все отлично работает. Есть один момент который мне не нравится:
При смене слайдов вся картинка как бы разбирается на квадратики и потом опять собирается это у нас(Уникальные эффекты перехода) Так вот, в это время ничего не понятно. У меня текст и наложенная на фон не большая картинка.
Сам вопрос:
Как сделать обычный переход, допустим с прокруткой влево-вправо?
Я пробовал настроить (уменьшать параметры показа и сборки слайда) это в файле .js, но ничего не получилось
Цитировать          18
baburxan 4 декабря 2015 11:59
Цитата: baburxan
Здравствуйте.
Отличная статья. Доходчиво и примеры "на пальцах" как говорится.


Жаль заброшенный проект, до сих пор ни кто не откликнулся sad
Цитировать          19
Роман 8 июня 2016 11:14
Помогите! Вот есть сайт best-brokers.eu Не пойму почему слайде загружается через раз, не пойму почему
Цитировать          20
Игорь 8 января 2017 17:39
Спасибо. Сделал . Супер. Работает. Респект и уважуха
Цитировать          21
Оставить комментарий
Ваше имя: *
Ваш e-mail: *
Текст комментария:
Полужирный Наклонный текст Подчёркнутый текст Зачёркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите проверочный код (защита от спама):
код: ----