Как я могу использовать этот API расширенного JQuery плагин - PullRequest
4 голосов
/ 02 августа 2011

Привет, я использую суперразмерный плагин.Я хочу изменить содержимое страницы в зависимости от того, какой слайд загружен.В документации я нашел API для этого, но не смог понять, как это сделать.

Ниже приведена копия-вставка из документации

тема.afterAnimation ()

Запускается каждый раз, когда завершается переход слайда.

trigger : after each slide transition

http://buildinternet.com/project/supersized/docs.html#theme-after

Если яхотите подсказать alert('slide changed!'); после каждой смены слайдов, как бы это было?Я просто не могу понять, как эти API ' могут быть использованы.

Ответы [ 3 ]

15 голосов
/ 02 августа 2011

Я создатель Supersized, и я хотел заглянуть сюда и помочь вам разобраться в этом.

При фактической загрузке , расположенной здесь , вы заметите, что в папке слайд-шоу есть папка темы, отдельная от папок js и css - это область, на которой мы сосредоточимся.

Суперразмерные пробеги в двух частях:

  1. базовые файлы (js / supersized.3.2.x & css / supersized.css) , которые содержат базовые функции, такие как переходы, следующий / предыдущий слайд, и все другие необходимые компоненты.

  2. Файлы темы (расположены в папке темы) , которые позволяют изменять слайд-шоу с настройками, такими как упомянутые вами, или такими, как индикаторы выполнения и пользовательский контент для каждого слайда. Они разделены, чтобы предотвратить потерю настроек при каждом обновлении базовых файлов, как это было в предыдущих версиях.

В загрузку я включил тему «Затвор», которую я собирался использовать в качестве основы для собственной разработки. Не беспокойтесь о прикосновении к базовым файлам - они автоматически вызывают файлы тем, куда будут отправлены все ваши изменения.

Если вы откроете theme / supersized.shutter.js , вы заметите, что в литерале объекта темы есть несколько функций - это место, куда вы должны были бы опустить описанные функции темы в документации. Имейте в виду, что вам нужно обновить путь на демонстрационной html-странице, чтобы он указывал на этот файл после его редактирования, поскольку по умолчанию он указывает на минимизированную theme / supersized.shutter.min.js .

Если вы прокрутите вниз до supersized.shutter.js , вы увидите нужную вам функцию afterAnimation - здесь вы можете подключить строку alert('Slide Changed');.

Оттуда вы можете удалить любые функции, которые вам не нужны, и создать собственную тему.

Надеюсь, это поможет, и большое спасибо за использование плагина!

Лучший, Сэм Данн

8 голосов
/ 28 сентября 2012

Я пытался создать свою собственную тему, и это сработало для меня:

(function($){
    theme = {
        _init : function(){
            console.log('hi im supersized');                
        },
        afterAnimation:function(){
                console.log('Slide Changed');
        }
    };
})(jQuery);
0 голосов
/ 16 апреля 2015

Вы можете использовать этот скрипт:

$('.selector').vTicker('init');
    theme.afterAnimation = function() {
    alert('slide changed!');
};
...