Вопреки названию статьи скажу, что анимации на 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){
			//обработаем все фото
		}
	}
}

 

Рассказать друзьям

Добавить комментарий


Защитный код
Обновить