Хаки и Скрипты Next Generation CMS : Интерфейс, Слайдшоу и анимация : Слайдер контента SlideJS на jQuery

irbees2008 Опубликовано - 1 - февраля Интерфейс

Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Демо:

Слайдер контента SlideJS на jQuery
Установка SlideJS
Скачать исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковать и залить в папку с шаблоном,там три варианта,заливаем понравившийся,ну а я опишу стандартный вариант
1. опишем html - структуру на примере плагина lastnews и xfields :
2.В плагине xfields создаем поле poster
3.В плагине lastnews
В файле lastnews.tpl оставляем только этот код

Код:

{entries}

в файле entries tpl все меняем на этот код

Код:

[TWIG]<img src="{{ p.xfields.poster.entries[0].purl }} "  alt="{title}" />[/TWIG]

4.Подключаем стили и скрипты в head в файле main.tpl:

Код:

<link rel="stylesheet" href="{tpl_url}/css/style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>/*повторно подключать не надо если уже подключен jquery*/
	<script src="{tpl_url}/js/slides.js"></script>

Инициализация слайдера и настройка :

Код:

<script>
		/*
			Get the curent slide
		*/
		function currentSlide( current ) {
			$(".current_slide").text(current + " of " + $("#slides").slides("status","total") );
		}

		$(function(){
			/*
				Initialize SlidesJS
			*/
			$("#slides").slides({
				navigateEnd: function( current ) {
					currentSlide( current );
				},
				loaded: function(){
					currentSlide( 1 );
				}
			});

			/*
				Play/stop button
			*/
			$(".controls").click(function(e) {
				e.preventDefault();

				// Example status method usage
				var slidesStatus = $("#slides").slides("status","state");

				if (!slidesStatus || slidesStatus === "stopped") {

					// Example play method usage
					$("#slides").slides("play");

					// Change text
					$(this).text("Stop");
				} else {

					// Example stop method usage
					$("#slides").slides("stop");

					// Change text
					$(this).text("Play");
				}
			});
		});
	</script>

5.Сам вызов плагина

Код:

<div id="container">
<div id="slides">
{plugin_lastnews}
</div>
</div>

Вот и все ,при добавлении новости появится доп. поле poster т.е. загрузить картинку

Слайдер несколько громоздкий, но это следствие, того, что у него в арсенале очень много занятных настроек.

Раскрыть

Прелоадер — показ изображения во время загрузки контента слайдера.

Код:

Preload:true/false

Код:

$(function(){
  $("#slides").slides({
    preload: true
  });
});

По умолчанию отключено, то есть содержит значение: false.

Изображние прелоадера — можно указывать название и расположения.

Код:

 preloadImage (string)

Код:

$(function(){
  $("#slides").slides({
    preload: true,
    preloadImage: '{tpl_url}/images/loading.gif'
  });
});

По умолчанию используется путь:

Код:

 '{tpl_url}/images/loading.gif'.

Имя класса в CSS для контейнеров слайдов

Код:

container (string)

Код:

$(function(){
  $("#slides").slides({
    container: 'slides_container'
  });
});

По умолчанию используется имя класса:

Код:

"slides_container".

Вставка контролеров скролла, то есть стрелок вперед/назад

Код:

 generateNextPrev (boolean)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    generateNextPrev: true
  });
});

По умолчанию отключено:

Код:

 false.

Класс для контролера следующего слайда

Код:

next (string)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    next: 'next'
  });
});

По умолчанию имя класса:

Код:

.next.

Класс для контролера предыдушего слайда

Код:

 prev (string)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    next: 'next'
  });
});

По умолчанию имя класса:

Код:

.prev.

Вывод нумерации слайдов

Код:

pagination (boolean)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    pagination: true
  });
});

По умолчанию отключено:

Код:

false.

Спрятать
Автоматическое создание нумерации слайдов

Код:

generatePagination (boolean)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    generatePagination: true
  });
});

А это как раз по умолчанию включено:

Код:

 true.

Имя класса для блока с нумерами слайдов

Код:

paginationClass (string)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    paginationClass: 'pagination'
  });
});

По умолчанию используется имя класса:

Код:

 .pagination.

Установка скорости затухания анимации при смене слайдов в милисекундах

Код:

fadeSpeed (number)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    fadeSpeed: 350
  });
});

По умолчанию поставлено 350 милисекундю

Установка скорости анимации смены слайдов в милисекундах

Код:

slideSpeed (number)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    slideSpeed: 350
  });
});

По умолчанию поставлено 350 милисекундю

Установка позиции стартового слайда

Код:

start (number)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    start: 1
  });
});

По умолчанию, естевственно первый слайд, является стартовым.

Установка эффекта смены слайда — затухание или просто привычный сдвиг справа на лево.

Код:

 effect (string)

Здесь интересно, что можно разделить эффекты смены слайдов для кликов по обычным контролерам и кликам по номерам слайдов. Так вот, если поставить один эффект смены, вот так:

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    effect: 'slide'
  });
});

То один и тот же эффект будет использован в двух описанных выше случаях.
А если написать вот так:

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    effect: 'slide, fade'
  });
});

То в зависимости от того каким образом была вызвана смена слайда будет использоваться соотвествующий эффект. В общем можно поиграться.
По умолчанию испольуется эффект:

Код:

slide.

Накладывание изображений слайдов

Код:

crossfade (boolean)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    crossfade: true
  });
});

По умолчанию, отключено:

Код:

false

Случайная смена слайдов

Код:

randomize (boolean)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    randomize: true
  });
});

По умолчанию, отключено:

Код:

 false

Добавление интервала проигрывания слайдов

Код:

 play (number)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    play: 5000
  });
});

По умолчанию равно 0, что эквивалентно

Код:

false

Добавление паузы проигрывания слайдов

Код:

pause (number)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    pause: 2500
  });
});

По умолчанию равно 0, что эквивалентно

Код:

false

Добавление паузы при наведении курсора на слайд

Код:

hoverPause (boolean)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    hoverPause: true
  });
});

По умолчанию отключено:

Код:

false

Установка регулировка высоты под содержимое слайда

Код:

autoHeight (boolean)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    autoHeight: true
  });
});

По умолчанию отключено:

Анимация изменения высоты

Код:

autoHeightSpeed (number)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    autoHeightSpeed: 350
  });
});

По умолчанию, поставилено: 350 милисекунд

Привязка ссылкой

Код:

 bigTarget (boolean)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    bigTarget: true
  });
});

По умолчанию отключено:

Код:

false

Анимируем что-то ещё кроме слайда

Код:

animationStart() (callback)

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    animationStart: function() {
		// Делаем что-то крутое
	}
  });
});

Комбинирование настроек, например, вот так:

Раскрыть

Код:

$(function(){
  $("#slides").slides({
    preload: true,
    preloadImage: '/img/loading.gif',
    play: 5000,
    pause: 2500,
    hoverPause: true
  });
});

Приятного использования

Можешь почитать и вот эту статейку "Красивое оформление "хлебных крошек" breadcrumbs"

Это тоже интересно

zorro 10.02.2014 - 10:54 В описании ошибки, например:

Цитата:
<div>
<h1><a href="{link}" style="display:block;text-align:center"></h1>
<p>[TWIG]<img src="{{ p.xfields.poster.entries[0].purl }} " alt="{title}" />[/TWIG]</p>
</div>

где закрывающий тег ссылки?

реально стилей для примера нет, да и пример на другом сайте.
Ну и как можно повторить такое???

ответить

zorro 10.02.2014 - 10:56 и как правильно настроить плагин xfields для работы со слайдером???

ответить

irbees2008 10.02.2014 - 16:28 zorro, за указанную ошибку спасибо,по плагину создать поле poster-группа изображений и в новости заполнить дополнительное поле poster. Правда все зависит от версии движка 9.3 или 9.4

ответить

zorro 10.02.2014 - 17:17

Цитата:
<p>[TWIG]<img src="{{ p.xfields.poster.entries[0].purl }} " alt="{title}" />[/TWIG]</p>

- от версии зависит purl или url в выражении выше или это тоже ошибка (описка) ???

ответить

irbees2008 10.02.2014 - 22:04 zorro, Переработал пост полностью,надеюсь все понятно,файл перезалил,
purl- ссылка на уменьшенную картинку , url- ссылка на картинку полного размера,можешь поставить url за место purl

ответить

zorro 11.02.2014 - 01:17 irbees2008, спасибо! Буду пробовать внедрить.

ответить

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.