Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 1 - февраля Интерфейс
6567 - 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

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

Опрос

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [8]
  • Гости: [7]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.318сек
  • Потребление памяти: 5.204 Mb 
  •   Яндекс.Метрика