• 5073
  • 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

Можешь почитать и вот эту статейку "Jquery плагин галереи PrettyPhoto"

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

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

    ответить

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

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element