• 4793
  • 6
  • Адаптировал: 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
});
});
Приятного использования wink

Можешь почитать и вот эту статейку "Склоняем "комменты" по количеству на TWIG"

mistakes

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

    zorro

    zorro | 11.02.2014 - 01:17

    irbees2008, спасибо! Буду пробовать внедрить.

    ответить

    irbees2008

    irbees2008 | 10.02.2014 - 22:04

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

    ответить

    zorro

    zorro | 10.02.2014 - 17:17

    Цитата:
    <p>[TWIG]<img src="{{ p.xfields.poster.entries[0].purl }} " alt="{title}" />[/TWIG]</p>
    - от версии зависит purl или url в выражении выше или это тоже ошибка (описка) ???

    ответить

    irbees2008

    irbees2008 | 10.02.2014 - 16:28

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

    ответить

    zorro

    zorro | 10.02.2014 - 10:56

    и как правильно настроить плагин xfields для работы со слайдером???

    ответить

    zorro

    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>
    где закрывающий тег ссылки?

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

    ответить

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

Ваше мнение

Какие темы вам интереснее?
Результаты

----