Jquery Slideshow своими руками

[XBR]

В бесплатном курсе от Tuts+ Premium по jQuery который ведёт Jeffrey Way есть два урок по созданию такого слайдера. Первый урок просто лапша jQuery, второй рефакторинг этой лапши. Вообщем настоятельно рекомендуется вместо\после статьи.
Ссылочка вот.

[Ashot]

такое количество глобальных переменных в более-менее большом проекте может привести(и скорее всего приведёт) к печальным последствиям. создать такой слайдер можно без единой глобальной переменной.

моё личное ни на что не претендующее мнение:
лучше было бы написать статью о создании jQuery-плагина такого слайдшоу — такая статья будет более полезной и познавательной, да и в итоге весь ваш код в $(document).ready сократится до $('element').slideshow(options)

[happyproff]

Вопрос про options:
как лучше поступать с контролами (вперёд, назад, пауза, ...), стоит ли передавать ссылки на них / селекторы для их поиска внутри контейнера в options

$('.slideshow').slideshow({
'interval': 5,
'control_prev': '.slideshow_prev',
'control_next': '.slideshow_next',
'control_pause': '.slideshow_pause'
});

или лучше использовать заранее предопределённые классы? Или дать возможность определять свои, но если этого не происходит, то использовать стандартные для плагина?

[Seldon]

дать возможность передавать или jQuery объект или селектор по которому будет происходить поиск внутри контейнера.
И как разработчки я скажу чт омне приятней работать с плагином который имеет минимум опций и максимально чистый и грамотный код, нежели с плагином в 30 опций где в коде фиг разберешься.

[Ashot]

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

[Seldon]

а если у вас 5 слайдеров одинаковых по дизайну? логичже же что это будет 1 шаблон с одинаковыми классами и поиск по всему документу ".next" — выдаст вам 5 стрелочек на которые вы успешно повесите событие, в итоге кликая по 1 слайдеру крутятся все.
имено поэтому я и предложил или jQuery объект или селектор который ищется внутри контейнера, ибо как раз черед объект jquery вы можете сами выцепить из документа любой элемент который вне контейнреа если вам надо

[happyproff]

Вот-вот. Об этом я и думал. В случае, если сайдеров много, то очень хотелось бы сделать просто:

$('.b-slider').slideshow();

И каждый из них инициализируется отдельно.
К тому же ситуация, в которой контролы находятся не в контейнере слайдера кажется мне странной.

[Seldon]

«не в контейнере слайдера кажется мне странной» — такие случаи есть, тем более реализовать такое решение проще некуда

[Ashot]

если вызывать эти 5 таким образом $('div.slideshow').slideshow(), то действительно будет так, как вы описали. что-то я об этом не подумал. Но почему-то мне кажется, что в большинстве случаев пять слайдеров будут вызываться так: $('#slideshow1').slideshow(), $('#slideshow2').slideshow() — но так естественно прийдётся в контролы передавать уникальные элементы для каждого слайдера.

возможен ещё такой вариант: сделать возможность передать параметром функцию в контексте объекта, которая возвращает элемент-контрол

например

$('#slideshow').slideshow({
	control_prev: function() { 
//		здесь this == $('#slideshow')
		return $(this).find('.prev');
	}
})

[Seldon]

месье вы знаете толк в извращениях, чем вам не нравится пой вариант?
$('.slideshow').slideshow({
control_prev: ".prev"
control_next: $(".logo")
})

И все! Зачем какие-то фукнции в которых черт голову сломит? ".prev" найдем в констексте $(this), а $(".logo") — будет взято из глобально и все элементарно.

и вот код плагина фактически
jQuery.fn.slideshow= function(options) {
$(this).each(function(){
new Slideshow($(this), options);
});
};

[Ashot]

я не говорил, что мне не нравится, ваш вариант очень даже правильный

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

[Seldon]

Я бы вашим слайдером с такми апи пользоваться не стал )
Ибо по умолчанию мы должны считать что контролы внутри слайдера это 95% случаев, а передавать в аргумент функцию которая будет возвращать объект как-то его там хитро цепляя через селекторы — это уже слишком )) и очень плохо читается. намного проще уже сразу передавать объект $(".something")

$('#slideshow').slideshow({
    control_prev: function() { 
        return $(this).find('.prev');
    },
    control_next: function() { 
        return $(this).find('.next');
    },
    control_pause: function() { 
        return $(this).find('.pause');
    }
})

читается с трудом )

[Ashot]

так я и не предлагаю навязывать передачу параметров функцией:
можно вполне передавать один параметр несколькими типами, напимер:
1. строка-селектор
2. DOM-элемент
3. функция

а каким способом пользоваться выберет сам разработчик, которые его внедряет, в зависимости от ситуации и религиозных предпочтений :) главное — предоставить гибкость(которой лично мне иногда не хватает в некоторых плагинах)

[Seldon]

А я вот страдаю обычно из-за гибкости, когда разработчик попытался учесть кучу всегда наставил кучу if написал мегараздутый код, вставил в него html чтобы юзер совсем ни о чем не волновался, в итоге мне приходится отказываться от плагина, ибо реализовать требуемую фитчу в хорошем лаконичном плагине — 20 минут, а копаться в дебрях плагина с 30 отциями — часа два если не больше.

[Ashot]

в таком случае я бы сделал 2 варианта:

1. дефолтные кнопки, заранее определённые вами (т.е. вызываем $('.slideshow').slideshow() и слайдшоу готово в том виде, в котором вы его предоставили людям)

2. передавать в параметрах ссылки на контролы, как вы указали в своём комментарии, допустить при этом возможность передать как строку-селектор, так и DOM-элемент и производить поиск этих контролов не в рамках вашего слайд-шоу, а по всему документу — как я уже написал ниже, настройка внешнего вида станет от такого подхода гибкой

[Seldon]

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

По первому если значение option.control_next пусто, то можно скажем подставлять по дефолту ".next" и искать его в доме.

генерить же стрелочки на js — категорически — НЕТ, в самом скрите не должно быть ни одного html тега. И искоючение я могу сделать только для отрисовки «навигации по страницам», когда скажем если у вас 5 слайдов появлятеся 5 кружочков с помощью которых вы можете быстро ходить оп слайдам.

[Seldon]

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