Вопреки названию статьи скажу, что анимации на jQuery здесь по минимуму. Фактически для браузеров Firefox и Google Chrome ее и вовсе нет. На выходе у вас должен получиться вот такая симпатичная слайдер-галлерея
Но для начала немного предыстории. Задача очень простая, нужно сделать так, чтобы изображения на экране прокручивались по всей ширине, а когда крайнее подходило к концу слайдера, те что были впереди перемещались в конец. Получается бесконечная карусель, сделать которую, как оказалось позднее не так уж и просто.
Первое, что мне пришло в голову это абсолютно перемещать все блоки по оси x(меняя свойство style.left), как только крайний достигает границы слайдера, просто перемещать первые слайды в конец и продолжать общую анимацию. Все просто, и возможно читатель, который прочтет данный пост в недалеком будущем сделает именно так, однако на данный момент ни один браузер не показал достойную анимацию изображения, а слайдер который прокручивает изображение рывками думаю мало кого интересует.
Вариант номер два, клонировать с помощью jQuery.clone содержимое одного блока с фотографиями, и добавлять вконце первого. Прокручивание целого блока работает заметно быстрее, однако все равно это очень медленное мероприятие.
Вариант номер три, тоже а намеком на будущее, использование CSS3. В CSS3 есть такие фишки, которые при грамотной реализации браузерами позволят делать совершенно не тормозящую анимацию. Это возможно и сейчас, но только не в IE. Я не знаю, что там в IE10, но на данный момент IE9 эту штуку не поддерживает, но вот сама идея очень интересна. Нашел я ее тут http://css-tricks.com/infinite-all-css-scrolling-slideshow/
Собственно, само ТЗ изложенное выше, тут не выполняется, хотя слайдер и получился очень милым.
Как и в статье перемещать все картинки по отдельности мы не станем, это слишком накладно и на моем не самом последнем ноутбуке прилично тормозит. Мы пойдем другим путем. Закинем все фото при помощи php в один файл, а затем со спокойной душой будем двигать этот файлик, как background.
Для начала функция для перебора всех изображений находящихся в категории:
function Perebor( $path ){
if( file_exists( $path ) ){
$Handler = glob ($path . '*.jpg');
foreach ($Handler as $Photo){
//обработаем все фото
}
}
}
