Lightgallery – клон популярного скрипта Lightbox, который не зависит от сторонних библиотек и весит всего 9,8К (минимизированная версия, 7,7 К в сжатом виде).

Возможности

• Масштабирование изображений
• Возможность изменять режим “во весь экран/по размеру экрана”
• Анимированные эффекты – плавное изменение размеров и прозрачности
• Возможность устанавливать опции: изменять скорость анимации, включать/выключать анимацию, устанавливать синхронное изменение размеров, включать/выключать масштабирование и др.
• Возможность добавлять языковые пакеты (в данный момент доступен только русский)
• Предварительная загрузка изображений (preload)

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

смотреть демозагрузитьдомашняя страница проекта

Phototype – интересный и вместе с тем простой клиент-серверный скрипт основанный на библиотеке Prototype для работы с изображениями, который может обрезать, поворачивать, добавлять тень к изображениям и др. Все эти манипуляции выполняются на сервере при помощи GD библиотеки для PHP. На стороне клиента работа с библиотекой выглядит так:

l_oPhoto = new Photo().load('image.jpg');
l_oPhoto.resize({width:200});
l_oPhoto.rotate(3);
l_oPhoto.dropShadow();
l_oPhoto.addCaption('Get ajaxorized!', '1942.ttf');
document.body.appendChild(l_oPhoto.fetch());

И результат выполнения этого кода:

Посмотреть больше примеров и скачать скрипт можно здесь.

В одной из предыдущих статей я написал о скрипте sessvars.js, который позволяет работать с сессиями без cookies, используя свойство window.name. Однако у этого скрипта есть одна большая проблема – сессии сохраняются только в том случае, если вы открываете ссылки в том же окне. Если же открывать ссылки в новом окне/табе, то данные сессий там будут не доступны.

Скрипт, который я вам сегодня представлю – PersistJS, также работает с сессиями, однако в отличии от sessvars.js он использует для хранения данных другие “накопители”. Суть в том, что многие браузеры имеют механизмы хранения данных на стороне клиента отличные от cookies. Все они намного проще и лучше последних, могут хранить больше данных, и не передаются в HTTP запросах. Однако, каждый браузер реализует эти механизмы по-своему. В данный момент существуют 4 различных решения для хранения данных на стороне клиента:

• globalStorage: Firefox 2.0+, Internet Explorer 8
• localStorage: development WebKit
• openDatabase: Safari 3.1+
• userdata: Internet Explorer 5.5+

Помимо вышеперечисленного, работу с сессиями можно организовать при помощи плагинов Adobe Flash и Google Gears, однако они также имеют свои проблемы – Flash может быть отключен или отсутствовать в браузере, а Google Gears пока еще не очень распространен.

PersistJS способен работать с сессиями исользуя собственный API и автоматически определяя, какую технологию использовать для хранения данных. В данный момент он поддерживает следующие механизмы:

• Flash 8
• Google Gears
• localstorage
• whatwg_db
• globalstorage
• UserData (Internet Explorer)
• cookie: хранение данных при помощи Cookie.

Как видите Cookies также могут использоваться, но только в том случае если другие методы невозможно использовать. Можно также явно запретить использовать Cookies, об этом ниже.

Это пока что первый релиз PersistJS, и протестирован он только на FireFox 2.0, FireFox 3.0rc1, IE7, и Safari 3.1.

<< читать дальше >>

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

<< читать дальше >>

Тег canvas постепенно набирает популярность, поскольку позволяет создавать 2-х мерную графику при помощи JavaScript. Однако отсутствие поддержки со стороны Internet Explorer значительно тормозит дальнейшее его продвижение. Сегодня я нашел скрипт ExplorerCanvas, который добавляет поддержку этого тега в IE используя возможности Vector Markup Language (VML). Конечно же не все возможности canvas реализованы (например радиальный градиент), но будем надеяться в будущем они появятся. Также трудно сказать о производительности этого чуда, по всей видимости она уступает canvas.

Подключать скрипт нужно только для IE используя условное подключение:

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

Чтобы продемонстрировать его в работе, я выложил один из демо примеров, доступных в дистрибутиве: смотреть демо

Загрузить