После некоторого перерыва, я выпустил новую версию LightGallery – скрипта-галереи в стиле lightbox. Основное отличие от других подобных скриптов состоит в том, что LightGallery не требует сторонних скриптов. Просто подключаете на веб-страницу, и все готово к работе.

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

Raphaël это маленькая библиотека JavaScript, которая может упростить работу с векторной графикой. Если вам нужно создать специфический график, обрезать или повернуть изображение, сделать отражение рисунка, то все это можно легко сделать при помощи этой библиотеки.

Raphaël использует SVG и VML в качестве основы для создания графики. Поскольку все создаваемые объекты являются элементами DOM, вы можете добавлять к ним обработчики событий JavScript или модифицировать их как и любой другой элемент DOM. Цель библиотеки заключается в том, чтобы предоставить адаптер, который позволить легко и кроссбраузерно создавать графику. В данный момент библиотека поддерживает Firefox 2.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.

Использование

Нужно загрузить и подключить библиотеку raphael.js в HTML страницу, затем использовать предоставляемые ею функции:

// Создаём палитру 320 × 200 с координатами 10, 50
var paper = Raphael(10, 50, 320, 200);
// Создаем круг x = 50, y = 40, с радиусом 10
var circle = paper.circle(50, 40, 10);
// Устанавливаем цвет заполнения для круга
circle.attr("fill", "#f00");
// Устанавливаем цвет обводки
circle.attr("stroke", "#fff");

Скачать, просмотреть документацию и демо примеры библиотеки можно здесь.

Для исправления старой проблемы с прозрачными PNG в IE 6, я часто пользовался скриптом IE PNG Fix, который использовал behavior для исправления этого бага. Этот скрипт благополучно исправлял как простые изображения, так и фоновые, однако одна проблема все же существует – это невозможность растягивать изображение при помощи background-repeat.

Вчера я узнал о новом скрипте Unit PNG Fix, который может исправлять прозрачность изображений и при этом растягивать их. Заметьте, не повторять изображение, а именно растягивать, потому что свойство filter не позволяет повторять элементы. Это конечно не идеальный вариант и не для всех фоновых изображений подойдет, но все же таким образом можно симулировать повторение. Этот скрипт использует JavaScript вместо behavior для исправления прозрачности.

Для того, чтобы работать с этим скриптом, его достаточно просто подключить – не нужно создавать никаких объектов или вызывать функций при загрузке:

<script type="text/javascript" src="unitpngfix.js"></script>

Как и аналогичные скрипты, он требует также пустой gif файл clear.gif (входит в дистрибутив). Размер скрипта всего 1 килобайт.

скачать

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

Теперь о том, как это работает. Сначала скрипт проверяет содержимое переменной window.name во время загрузки страницы. Если переменная пустая, то необходимые файлы будут получены через AJAX и отправлены в этот кэш. Далее содержимое window.name будет выполнено интерпретатором. Если пользователь переходит на другую страницу на этом же домене, то файлы будут браться из кэша, не выполняя запросы к серверу. Автор утверждает, что используя этот скрипт можно улучшить скорость загрузки страниц. Думаю что сейчас трудно сказать верно ли это, и насколько практичен данный скрипт (это пока еще бета версия), однако идея мне понравилась.

исходники

Месяц назад я писал статью о клиент-серверном скрипте Phototype, который позволяет работать с изображениями (изменять размер, создавать эффект наброска, отбрасывать тень и др.) с использованием JavaScript. Работает он следующим образом: на стороне клиента выполняется скрипт, в котором указываем путь к изображения и что нам нужно сделать с ним, в результате создается элемент <img>, который указывает на скрипт php, выполняющий необходимые преобразования с помощью библиотеки GD. Таким образом можно динамически создавать и изменять нужные нам изображения, управляя всем процессом из JavaScript.

На днях мне довелось использовать этот скрипт на практике и сразу же обнаружились некоторые недостатки, исправив которые я получил новый скрипт, которым и хочу поделиться с вами. Но сначала о недостатках старого скрипта. Первый недостаток это зависимость скрипта от библиотеки Prototype. Во многих случаях использование JavaScript фреймворков является плюсом, ибо значительно облегчает дальнейшую работу со скриптами, но не в этом случае, ибо скрипт использовал всего лишь пару возможностей Prototype, а именно создание класса Photo и создание элемента img. Подключать ради этого такую большую библиотеку просто неразумно. В моем случае на сайте использовалась библиотека Mootools, и подключать дополнительную Prototype я желания не имел, отчего и пришлось переработать скрипт. Второй недостаток, это отсутствие поддержки прозрачности для изображений. Если я использовал, к примеру, эффект вращения, то фон возле изображения обязательно заполнялся белым цветом. То же самое и при добавлении тени, где на фоне теней виднелся белый фон. То есть, такие эффекты скрипта, как вращение и отбрасывание тени, можно эффективно применять только на белом фоне, иначе получается совсем не то, что хотелось бы.

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