Comments 17
В бесплатном курсе от Tuts+ Premium по jQuery который ведёт Jeffrey Way есть два урок по созданию такого слайдера. Первый урок просто лапша jQuery, второй рефакторинг этой лапши. Вообщем настоятельно рекомендуется вместо\после статьи.
Ссылочка вот.
Ссылочка вот.
такое количество глобальных переменных в более-менее большом проекте может привести(и скорее всего приведёт) к печальным последствиям. создать такой слайдер можно без единой глобальной переменной.
моё личное ни на что не претендующее мнение:
лучше было бы написать статью о создании jQuery-плагина такого слайдшоу — такая статья будет более полезной и познавательной, да и в итоге весь ваш код в $(document).ready сократится до $('element').slideshow(options)
моё личное ни на что не претендующее мнение:
лучше было бы написать статью о создании jQuery-плагина такого слайдшоу — такая статья будет более полезной и познавательной, да и в итоге весь ваш код в $(document).ready сократится до $('element').slideshow(options)
Вопрос про options:
как лучше поступать с контролами (вперёд, назад, пауза, ...), стоит ли передавать ссылки на них / селекторы для их поиска внутри контейнера в options
$('.slideshow').slideshow({
'interval': 5,
'control_prev': '.slideshow_prev',
'control_next': '.slideshow_next',
'control_pause': '.slideshow_pause'
});
или лучше использовать заранее предопределённые классы? Или дать возможность определять свои, но если этого не происходит, то использовать стандартные для плагина?
как лучше поступать с контролами (вперёд, назад, пауза, ...), стоит ли передавать ссылки на них / селекторы для их поиска внутри контейнера в options
$('.slideshow').slideshow({
'interval': 5,
'control_prev': '.slideshow_prev',
'control_next': '.slideshow_next',
'control_pause': '.slideshow_pause'
});
или лучше использовать заранее предопределённые классы? Или дать возможность определять свои, но если этого не происходит, то использовать стандартные для плагина?
дать возможность передавать или jQuery объект или селектор по которому будет происходить поиск внутри контейнера.
И как разработчки я скажу чт омне приятней работать с плагином который имеет минимум опций и максимально чистый и грамотный код, нежели с плагином в 30 опций где в коде фиг разберешься.
И как разработчки я скажу чт омне приятней работать с плагином который имеет минимум опций и максимально чистый и грамотный код, нежели с плагином в 30 опций где в коде фиг разберешься.
согласен, только поиск по селектору я бы производил не в нутри контейнера, как вы предложили, а по всему документу — добавит больше гибкости в настройку
а если у вас 5 слайдеров одинаковых по дизайну? логичже же что это будет 1 шаблон с одинаковыми классами и поиск по всему документу ".next" — выдаст вам 5 стрелочек на которые вы успешно повесите событие, в итоге кликая по 1 слайдеру крутятся все.
имено поэтому я и предложил или jQuery объект или селектор который ищется внутри контейнера, ибо как раз черед объект jquery вы можете сами выцепить из документа любой элемент который вне контейнреа если вам надо
имено поэтому я и предложил или jQuery объект или селектор который ищется внутри контейнера, ибо как раз черед объект jquery вы можете сами выцепить из документа любой элемент который вне контейнреа если вам надо
Вот-вот. Об этом я и думал. В случае, если сайдеров много, то очень хотелось бы сделать просто:
$('.b-slider').slideshow();
И каждый из них инициализируется отдельно.
К тому же ситуация, в которой контролы находятся не в контейнере слайдера кажется мне странной.
$('.b-slider').slideshow();
И каждый из них инициализируется отдельно.
К тому же ситуация, в которой контролы находятся не в контейнере слайдера кажется мне странной.
если вызывать эти 5 таким образом $('div.slideshow').slideshow(), то действительно будет так, как вы описали. что-то я об этом не подумал. Но почему-то мне кажется, что в большинстве случаев пять слайдеров будут вызываться так: $('#slideshow1').slideshow(), $('#slideshow2').slideshow() — но так естественно прийдётся в контролы передавать уникальные элементы для каждого слайдера.
возможен ещё такой вариант: сделать возможность передать параметром функцию в контексте объекта, которая возвращает элемент-контрол
например
возможен ещё такой вариант: сделать возможность передать параметром функцию в контексте объекта, которая возвращает элемент-контрол
например
$('#slideshow').slideshow({
control_prev: function() {
// здесь this == $('#slideshow')
return $(this).find('.prev');
}
})месье вы знаете толк в извращениях, чем вам не нравится пой вариант?
И все! Зачем какие-то фукнции в которых черт голову сломит? ".prev" найдем в констексте $(this), а $(".logo") — будет взято из глобально и все элементарно.
и вот код плагина фактически
jQuery.fn.slideshow= function(options) {
$(this).each(function(){
new Slideshow($(this), options);
});
};
$('.slideshow').slideshow({
control_prev: ".prev"
control_next: $(".logo")
})
И все! Зачем какие-то фукнции в которых черт голову сломит? ".prev" найдем в констексте $(this), а $(".logo") — будет взято из глобально и все элементарно.
и вот код плагина фактически
jQuery.fn.slideshow= function(options) {
$(this).each(function(){
new Slideshow($(this), options);
});
};
я не говорил, что мне не нравится, ваш вариант очень даже правильный
не такое уж и извращение — это просто на случай, если контролы будут вне контекста объекта, к которому применяется плагин (таки случаи иногда бывают). на самом деле рассуждать можно долго — как подходить к решению нужно нужно смотреть на реальной задаче, я лишь предложил варианты, которые можно в данном случае можно использовать
не такое уж и извращение — это просто на случай, если контролы будут вне контекста объекта, к которому применяется плагин (таки случаи иногда бывают). на самом деле рассуждать можно долго — как подходить к решению нужно нужно смотреть на реальной задаче, я лишь предложил варианты, которые можно в данном случае можно использовать
Я бы вашим слайдером с такми апи пользоваться не стал )
Ибо по умолчанию мы должны считать что контролы внутри слайдера это 95% случаев, а передавать в аргумент функцию которая будет возвращать объект как-то его там хитро цепляя через селекторы — это уже слишком )) и очень плохо читается. намного проще уже сразу передавать объект $(".something")
читается с трудом )
Ибо по умолчанию мы должны считать что контролы внутри слайдера это 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');
}
})
читается с трудом )
так я и не предлагаю навязывать передачу параметров функцией:
можно вполне передавать один параметр несколькими типами, напимер:
1. строка-селектор
2. DOM-элемент
3. функция
а каким способом пользоваться выберет сам разработчик, которые его внедряет, в зависимости от ситуации и религиозных предпочтений :) главное — предоставить гибкость(которой лично мне иногда не хватает в некоторых плагинах)
можно вполне передавать один параметр несколькими типами, напимер:
1. строка-селектор
2. DOM-элемент
3. функция
а каким способом пользоваться выберет сам разработчик, которые его внедряет, в зависимости от ситуации и религиозных предпочтений :) главное — предоставить гибкость(которой лично мне иногда не хватает в некоторых плагинах)
А я вот страдаю обычно из-за гибкости, когда разработчик попытался учесть кучу всегда наставил кучу if написал мегараздутый код, вставил в него html чтобы юзер совсем ни о чем не волновался, в итоге мне приходится отказываться от плагина, ибо реализовать требуемую фитчу в хорошем лаконичном плагине — 20 минут, а копаться в дебрях плагина с 30 отциями — часа два если не больше.
в таком случае я бы сделал 2 варианта:
1. дефолтные кнопки, заранее определённые вами (т.е. вызываем $('.slideshow').slideshow() и слайдшоу готово в том виде, в котором вы его предоставили людям)
2. передавать в параметрах ссылки на контролы, как вы указали в своём комментарии, допустить при этом возможность передать как строку-селектор, так и DOM-элемент и производить поиск этих контролов не в рамках вашего слайд-шоу, а по всему документу — как я уже написал ниже, настройка внешнего вида станет от такого подхода гибкой
1. дефолтные кнопки, заранее определённые вами (т.е. вызываем $('.slideshow').slideshow() и слайдшоу готово в том виде, в котором вы его предоставили людям)
2. передавать в параметрах ссылки на контролы, как вы указали в своём комментарии, допустить при этом возможность передать как строку-селектор, так и DOM-элемент и производить поиск этих контролов не в рамках вашего слайд-шоу, а по всему документу — как я уже написал ниже, настройка внешнего вида станет от такого подхода гибкой
по второму пункту я уже ответил почему нельзя искать по всему документу.
По первому если значение option.control_next пусто, то можно скажем подставлять по дефолту ".next" и искать его в доме.
генерить же стрелочки на js — категорически — НЕТ, в самом скрите не должно быть ни одного html тега. И искоючение я могу сделать только для отрисовки «навигации по страницам», когда скажем если у вас 5 слайдов появлятеся 5 кружочков с помощью которых вы можете быстро ходить оп слайдам.
По первому если значение option.control_next пусто, то можно скажем подставлять по дефолту ".next" и искать его в доме.
генерить же стрелочки на js — категорически — НЕТ, в самом скрите не должно быть ни одного html тега. И искоючение я могу сделать только для отрисовки «навигации по страницам», когда скажем если у вас 5 слайдов появлятеся 5 кружочков с помощью которых вы можете быстро ходить оп слайдам.
Да, в общем то статья скорее вредна, чем полезна, подобнй подход неприемлем в разработке. Особенно когда ваш проект занимает более 5000 строк и с ним работают другие люди с такими слайдерами можно успешно его начинать переписывать, ибо никто ничего не поймет )
Sign up to leave a comment.
Jquery Slideshow своими руками