jQuery - Все о web разработке на xdan.ru

Информация о материале: Категория: jQuery; Опубликовано: 03 сентября 2012; Просмотров: 3869

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

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

Информация о материале: Категория: jQuery; Опубликовано: 15 июня 2012; Просмотров: 19249

На просторах интернета нашел один очень симпатичный слайдер изображений COIN SLIDER, работающий на jQuery. Его можно скачать как на официальном сайте так и на xdan'е. Всякое бывает, проект забросят или сайт пропадет, именно поэтому выкладываю public скрипты у себя на сайте, но все же настоятельно советую качать такие вещи с оффсайтов. Слайдер вырос из другого подобного плагина того же автора jqFancyTransitions

Симпотичнчый COIN SLIDER на Jquery с великолепным эффектом перехода

И так, что он умеет.

Плагин совместим с Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+, т.е. можно уверенно сказать, что он запуститься почти на всех браузерах. Также у него есть ряд несомненных плюсов:

Он бесплатен и используется по MIT лицензии

Совместим с Android и iPhone (iOS) платформами

Имеет уникальный эффект перехода между слайдами

Валидная разметка слайдера

Гибко настраеваемая конфигурация

Автоматическая прокрутка слайда

Кнопки навигации (Назад, Вперед и перейти к нужному слайду)

Легковесный (всего 8kb)

Полностью настраиваемый с помощью CSS

Посмотрите на Демо

Подробнее... 9 комментариев

Информация о материале: Категория: jQuery; Опубликовано: 17 мая 2011; Просмотров: 21136

Для написания плагина будут использоваться материалы из статьи Мастер класс по созданию плагина галереи на jQuery, а также для понимания материала рекомендую ознакомится со статьей Как написать плагин на jQuery

Что я хотел получить в результате

На страницу в произвольном порядке выводятся несколько блоков, содержащих фотографии. Этими блоками могут быть, как обычные <div> так и ссылки <a>. Кроме них к странице подключаются два файла, сам плагин и его стили. Вызвав соответствующий названию плагина метод объекта $, с некими параметрами мы бы получали прокручивающуюся галерею фото. Фотографии должны прокручиваться, как с помощью мыши так и соответствующими кнопками по бокам галереи - назад-вперед. Кроме этих средств навигации в плагине должна быть возможность прокрутки к любой фотографии.

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

Если Вам лень читать, как это все работает то Вы можете скачать готовый плагин

Подробнее... 7 комментариев

Информация о материале: Категория: jQuery; Опубликовано: 11 апреля 2011; Просмотров: 56917

Итак, вы стали комфортно работать с jQuery и хотели бы знать, как написать свой собственный плагин. Замечательно! Вы там, где нужно. Расширение функционала jQuery по средствам плагинов и методов является очень мощной штукой и может спасти много часов разработки Вам и Вашим коллегам, заключая Ваши самые часто употребляемые функции в плагины. Этот пост, обрисует в общих чертах, основы, лучшие методы, и распространенные ошибки, которые надо учитывать при написании Вашего плагина.

Содержание

Приступая к работе
Контекст
Hello World!!!
Поддержка цепочек вызовов
Умолчания и опции
Пространство имен
Методы плагина
События
Данные
Резюме

Приступая к работе

Начнем писать JQuery плагин, с добавления нового метода к объекту jQuery.fn, где имя метода - это название Вашего плагина:

jQuery.fn.myPlugin = function() {

  // здесь помещаете код Вашего плагина

};

Но постойте! Где же мой знак доллара, который я знаю и люблю?- спросите Вы. Он по прежнему доступен, однако надо убедиться, что Ваш плагин не будет конфликтовать с другими библиотеками, которые также могут использовать знак доллара(Mootools, Prototype). Для этого код Вашего плагина нужно поместить в само вызывающееся замыкание.

(function( $ ){
  $.fn.myPlugin = function() {
  
    // здесь код Вашего плагина

  };
})( jQuery );

Так-то лучше. После этого, другие библиотеки сколько угодно могут изменять знак $, на Вас это не отразится. Внутри замыкания, $ будет равен jQuery.

Подробнее... 29 комментариев

Информация о материале: Категория: jQuery; Опубликовано: 08 апреля 2011; Просмотров: 23622

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