Что нового в этой версии:

• Улучшена производительность; особенно это относится к IE.
• Добавлена поддержка события onDomReady. Теперь скрипт инициализируется не дожидаясь, пока загрузятся все изображения. Вам не нужно отныне добавлять инициализацию скрипта в window.onload, достаточно просто lightgallery.init(); (однако старая конфигурация с window.onload также будет работать).
• Добавлены 2 новые темы. Одна из них – shape, любезно предоставлена Shape Design Studio, за что им большое спасибо.
• Исправлен ряд мелких багов.

Смотреть демоСкачать

Страница проектаСтраница проекта на Google Code

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");

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

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

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

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

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

скачать

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

исходники

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

Теперь о том, что же я исправил в скрипте. Во первых полное избавление от зависимости со стороны Prototype. Во вторых добавлена поддержка прозрачности и возможность устанавливать цвет фона при помощи функции setBgColor():

var img = new Photo().load('image.jpg').addCaption('Hello').setBgColor(255,255,255,10);
document.getElementById('e10').appendChild(img.fetch());

Первые три параметра функции setBgColor() – это значения для красного, зеленого, и синего цветов (0 – 255), а последний, четвертый параметр – это значение прозрачности (0 – 127).

В третьих, добавлена возможность добавлять дополнительное изображение поверх основного. Верней сказать, не добавлена а исправлена такая возможность, ибо в старой версии существовала функция addChuckNorris(), которая добавляла гордый профиль Чака Норриса поверх изображений (автор либо его поклонник либо просто шутник ). Я эту функцию преобразовал в addForeImage():

var img = new Photo().load('photo.png').addForeImage('chuck.png');
document.getElementById('e2').appendChild(img.fetch());

В качестве параметра она принимает имя файла JPEG или PNG, который должен быть в папке images. Скрипт автоматически изменяет размер изображение и помещает поверх основного в крайнем левом углу (возможность управлять размерами и положением этого изображения будет полем деятельности при разработке следующей версии).

В четвертых, добавлена возможность работать не только с файлами JPG , но и с файлами PNG, что при возможностях последнего делает скрипт значительно более полезным.

Ну и последнее, в моем скрипте можно устанавливать путь к библиотеке при помощи функции setImgPath(). То есть, если вы поместили библиотеку в /demo/phototype , то для правильного отображения нужно вызывать функцию следующим образом:

var img = new Photo().setImgPath('/demo/phototype');

В старом скрипте путь указывался относительным, т.е. изображения имели атрибут src=”image.php?…..”, и если скрипт располагался где-то во вложенных папках, то браузер просто не находил его.

На этом все мои усовершенствования и заканчиваются, хотя поле деятельности здесь потенциально очень большой и ограничивается лишь возможностями библиотеки GD. Есть также идею заюзать какую-нибудь библиотеку вроде Aside, которая может делать и ресайз и водяные знаки и многое другое. Может из этого что-нибудь и получится.

скачатьсмотреть демо