Доступна бета версия LightGallery 1.1

LightGallery это скрипт для просмотра изображений, написанный на JavaScript (подобен популярному скрипту LightBox). Он способен отображать как одиночные изображения, так и галереи с использованием визуальных эффектов. Скрипт очень компактен (7K – сжатая версия) и полнофункциональный, и при этом он независит от других библиотек.

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

  1. animate (по умолчанию – true) – включить/выключить анимацию
  2. framesNumber (по умолчанию – 20) – количество кадров используемых при анимации
  3. speed (по умолчанию – 30) – промежуток времени между кадрами, мсек
  4. resizeSync (по умолчанию – false) – если установлено в true, то контейнер изменяет размеры одновременно и по ширине и по высоте
  5. enableZoom (по умолчанию – true) – включить/выключить изменение масштаба картинки
  6. fadeImage (по умолчанию – true) – использовать эффект плавного появления изображения (лучше выключить для изображений большого размера)
  7. alias (по умолчанию – ‘lightgallery’) – псевдоним для атрибута rel (rel = ‘lightgallery’).

Изменился и метод подключения скрипта. Если раньше достаточно было просто подключить основной скрипт, то сейчас необходимо добавить явный вызов функции lightgallery.init(), которая может принимать один параметр – объект, содержащий опции. Пример:

<script src="lightgallery/lightgallery.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
	lightgallery.init({
		enableZoom:false,
		speed:50,
		fadeImage:false
	});
}
</script>

В новую версию также добавлены файлы русификации для трех кодировок – utf-8, cp-1251, koi8-r. Чтобы русифицировать скрипт, нужно просто подключить нужный файл русификации из папки lang. Это нужно обязательно сделать сразу после подключения основного скрипта. Пример:

<script src="lightgallery/lightgallery.min.js" type="text/javascript"></script>
<script src="lightgallery/lang/ru_utf8.js" type="text/javascript"></script>

В предыдущей версии анимированное изменение размеров контейнера производилось одновременно и по ширине и по высоте, в новой версии по умолчанию размер контейнера изменяется последовательно. Если же вам по душе вариант с одновременным изменением размера, то установите опцию resizeSync в true. Также полезным может быть возможность установки псевдонима для атрибута rel. В предыдущей версии в ссылки, которые нужно было отображать, добавлялся атрибут rel=”lightgallery”. Теперь, вместо lightgallery можно использовать другое значение при помощи опции alias. Например, если установить псевдоним в значение lightbox, то ссылки можно отметить как rel=”lightbox”, таким образом можно легко перейти с LightBox на LightGallery не изменяя все ссылки.

Ну и последнее – в этой версии добавлена возможность управления при помощи клавиатуры: n – следующее изображение, b – предыдущее изображение, + / - – увеличить/уменьшить изображение, f – показывает истинный размер изображения, ESC – закрыть галерею.

На этом все. Если у вас появятся замечания, буду рад услышать.

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

Скачать LightGallery также можно на Google Code. Страница проекта находится здесь.

Вышла новая версия WP-Prettify плагина

WP-Prettify – это плагин для wordpress, созданный на основе google-code-prettify. Он предназначен для подсветки синтаксиса на web-страницах. Подсветка выполняется на стороне клиента, то есть в браузере пользователя при помощи скрипта JavaScript.

В новой версии исправлены ошибки, возникавшие при отображении HTML/XML, а также несколько оптимизирован и сокращен скрипт. Также изменен дизайн панели переключения форматирования.

скачатьстраница проекта

Создание переключателя стилей

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

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

Вышел Firefox 3 beta 5

Firefox 3 Beta 5 включает в себя более 750 изменений по сравнению с прежней бета версией. По словам разработчиков, это самая быстрая из всех версий Firefox:

По сравнению с Firefox 2, веб приложения, такие как Google Mail и Zoho Office работают в два раза быстрее в Firefox 3 beta 5. Также, популярный тест SunSpider от Apple показывает улучшения по сравнению с предыдущим релизом.

В этой версии также улучшена интеграция с Windows, Mac и Linux за счет добавления родных иконок и тем. Помимо прочего усовершенствован органайзер, который позволяет просматривать, управлять и производить поиск в закладках, тэгах и истории поиска.

jQuery File Tree – браузер файлов на jQuery

jQuery File Tree – это AJAX браузер файлов написанный на jQuery. Он полностью конфигурируемый, легок в установке и настройке. Внешний вид изменяется простым редактированием CSS. jQuery File Tree работает во всех браузерах, поддерживаемых jQuery. Он также полностью протестирован в Internet Explorer 6 / 7, Firefox 2, Safari 3 и Opera 9.

jQuery File Tree

Для установки плагина необходимо скачать дистрибутив и загрузить его на сервер. Затем нужно подключить скрипты jQuery.js, jqueryFileTree.js и таблицу стилей jqueryFileTree.css. После этого нужно вызвать функцию fileTree() с указанием контейнера, в котором будет дерево файлов, параметров плагина и функции обработчика:

$(document).ready( function() {
	$('#container_id').fileTree({ root: '/some/folder/' }, function(file) {
		alert(file);
	});
});

Здесь, #container_id это ID div-а, в котором будет дерево файлов, root – корневая директория для просмотра. Функция обработчик принимает один параметр – имя выбранного файла. В данном примере имя файла будет просто выводится в alert. По умолчанию, AJAX запрос отправляется на скрипт jqueryFileTree.php (входит в дистрибутив), но вы можете указать другой скрипт, добавив опцию script:

$(document).ready( function() {
	$('#container_id').fileTree({
		root: '/some/folder/',
		script: 'jqueryFileTree.asp',
	}, function(file) {
		alert(file);
	});
});


Скачать плагинСмотреть демо

Страница 18 из 23« Первая...«14151617181920212223»

JSToolbox создан на основе WordPress