Заметки лёвика

На многих сайтах можно встретить “красивое” увеличение картинок по клику, а также слайдшоу, перемещение между изображениями и некоторые другие функции. При этом особенно удачно иногда используется затемнение оставшейся части экрана. Получается lightbox (дословно что-то вроде “светлая коробка”).

Рассмотрим некоторые инструменты, с использованием которых можно легко разместить всплывающие изображения в lightbox у себя на сайте.

Собственно lightbox (ныне Lightbox 2)
Скрипт использует библиотеки prototype.js и scriptaculous.js Если не считать их, то размер скрипта довольно мал. http://www.lokeshdhakar.com/projects/lightbox2/

Lightview
Скрипт использует JavaScript-библиотеки prototype.js и scriptaculous.js
Сайт и демо: http://www.nickstakenburg.com/projects/lightview/

LightWindow
Также использует упомянутые библиотеки javascript. Вполне функционален.
http://stickmanlabs.com/lightwindow/

jQuery lightBox plugin
фактически плагин для Jquery с функционалом, аналогичным lightbox-оригиналу.
http://leandrovieira.com/projects/jquery/lightbox/

Highslide.js
Не использует дополнительных javascript-фреймворков. Полностью автономный скрипт с довольно внушительным функционалом. Позволяет внедрять не только изображения, но и страницы, HTML-код, flash. Удобно реализована работа с галереями изображений - предпросмотр
http://highslide.com/

FancyBox для JQuery
Похоже, лучшее решение для jquery - куча возможных вариантов анимации, работа с галереями изображений. В общем, смотреть примеры на
http://fancybox.net/

jsImageBox
очень компактный автономный скрипт без использования фреймворков
http://jsimagebox.ru/

Shadowbox.js
Решение может использовать как любой из нескольких популярных фреймворков, так и обходиться без них - нужный вариант можно загрузить с сайта
http://shadowbox-js.com/

Конечно, такое количество lightbox-скриптов не обязательно использовать на собственных сайтах. Вполне достаточно освоить один из вариантов. Хотя, знать о существовании альтернатив иногда бывает полезно.

Очень удобно дать возможность пользователю выбрать как будет выглядеть “превьюшка” изображения (уменьшенный вариант изображения… особенно в случае фиксированного разрешения), или отредактировать картинку “онлайн”, непосредственно в браузере.

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

Инструменты для редактирования изображений в браузере

JavaScript Image Cropper UI

Удобный инструмент для “редактирования” картинки непосредственно в браузере.

Demo: http://www.defusion.org.uk/demos/060519/cropper.php
Скачать: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

Статья о редакторах изображений (а-ля “paint online”, функционал у многих довольно широк)
http://www.coolwebmasters.com/web-applications/511-online-professional-image-editors-and-drawing-applications.html

Переезд хуже пожара. Услышав эту поговорку многие, (в основном те, кому приходилось переезжать) невольно улыбаются.

Переезд блога, хоть и не сравним с пожаром, но тоже потребует некоторых усилий.

Во-первых (точнее, “в нулевых”), перед началом переезда следует убедиться, что на новом хостинге блог будет работать. Например, блоги на wordpress 3.2 требуют php5 и mysql 5. На сегодняшний день не на всех хостингах установлено соответствующее ПО. Достаточно ли дискового пространства для блога? Хватит ли оперативной памяти для Wordpress (Wordpress “из коробки” в последнее время очень требователен к памяти. Если ещё не сделали, то рекомендую воспользоваться плагином MaxCashe для уменьшения её потребления)

1. Запрещаем комментирование (либо стандартными средствами Wordpress), или переводим блог в режим обслуживания;
2. Копируем файлы на новый хостинг (возможно, “транзитом”, предварительно сохраняя на свой компьютер. В этом случае не торопимся заливать на новый хостинг );
3. Сохраняем дамп базы данных (можно воспользоваться средствами phpmyadmin, которая довольно часто предоставляется хостером, либо утилитой SQL DUMPER).
4. Если блог меняет доменное имя (например, с blog-1.com на blog-2.com), то делаем массовую замену в файлах (включая дамп базы данных, не забываем его разархивировать). Следует быть аккуратным - маловероятно, но не исключено, что под замену может попасть служебная информация. (ни разу такого не случалось). Как провести массовую замену в Linux, а для массовой замены в windows можно воспользоваться, например, бесплатным текстовым редактором notepad++.
5. Если для переезда был использован “транзитный” локальный компьютер, сохраняем все файлы в директорию на новом хостинге;
6.  Импортируем базу данных (через phpmyadmin, sqldumper или непосредственно ssh mysql)
7. осталось внести настройки соединения с базой данных в файле wp-config.php и разрешить запись (если нужно) в каталог wp-uploads

Проверяем работу блога на новом хостинге

Если доменное имя блога не изменялось, проверить работу блога на новом хостинге (с других компьютеров будет открываться “старый” блог) можно дописав в файл windows\system32\drivers\host строку следующего вида:
87.250.251.11 yandex.ru
где IP должен совпадать с новым IP-адресом блога (нового хостинга), а доменное имя - с именем блога. Если всё сделано правильно, блог должен работать на новом хостинге!

После чего смело можно изменять dns-записи для доменного имени, если конечно они уже не изменены.

С новосельем!

Задача:

Используя javascript динамически формировать options у html элемента select.

Вариант решения с использованием свойства innerHTML:

html:
<select id="select1"><option value="val1">text1</option></select>

javascript:
myselect = document.getElementById('select1');
select1.innerHTML = '<option value="val2">text2</option><option value="val3">text3</option>';

Такое решение не везде работает  (mozilla firefox этот код обрабатывает. Opera и IE отказались напрочь)

http://support.microsoft.com/kb/276228 - с официального сайта Microsoft про innerHTML у Select. Там же варианты “обхода” этого бага.

Вариант 1 - использование js массива .options[] у элемента select:
select1.options[i] = new Option(i,i);

Вариант 2 - замена innerHTML у родительского элемента (т.е. HTML должен включать сам тэг select):
<div id="out1"><select ..> </select></div>
js: document.getElementById ('out1').innerHTML = '<select id="select1" name="select1"><option ...>...</option></select>';

ps. Все-таки наткнулся на решение на одном из лучших (на мой взгляд) ресурсов по web:
Javascript SELECT - динамические списки

UPD2 Вариант получения данных для формирования элемента select через ajax: Для передачи в JavaScript пар ID:значение используем responseText в формате JSON, значение которого вычисляем при помощи функции eval.


data = eval (transport.responseText);
for (i=0; i< =data.length-1; i++)
myElement.options[i]=new Option(data[i][1],data[i][0])
При этом скрипт должен отдавать массив в виде:
[
['1','название первого элемента'],
['2','название второго элемента'],
]

Prototype.js - один из популярных javascript фреймворков.
www.prototypejs.org - официальный сайт Prototype - там есть как документация, так и примеры.

http://www.prototypejs.org/learn/json -

Сразу скажу, что  “нормально” реализовать json на prototype у меня не получилось… -примеры с официального сайта “не пошли”.
prototype version 1.5.0

person = '/*-secure-\n{"name": "Violet", "occupation": "character"}\n*/'.evalJSON()
person.name;
//-> "Violet"

Такого рода конструкция работала только через eval():

var d='{ "name":"Violet","occupation":"character" }'; //json string
d = eval('(' + d + ')');
alert (d.name);

В итоге, вместо json принял решение использовать старый добрый innerHTML:

$("result").innerHTML= transport.responseText;

Возможно, дело в кривых руках (отсутствии документации, времени, мозгов ), однако, не исключено, что в “Last updated on May 1st, 2007″…

Да.. почему prototype.. Проект изначально построен с его использованием…

Потребовалось выводить несколько превьюшек разных изображений в одном изображении. Небольшой php скрипт выводит 30 уменьшенных превьюшек прямоугольником.

define ('PIC_ROWS',5); // количество рядов в изображении
define ('PIC_COLS',6); // количество колонок в изображении
define ('PIC_WIDTH',20); // ширина одного изображения в большом
define ('PIC_HEIGHT',20); // высота изображения в
define ('PIC_PATH','images/'); // каталог изображений (на сервере)
$rows = array('image1.jpg','image2.jpg'); // массив с именами файлов
$i = 0;
$img = imagecreatetruecolor ( PIC_WIDTH*PIC_COLS, PIC_HEIGHT*PIC_ROWS );
imagefill($img, 0, 0, imagecolorallocate($img, 225, 225, 225)); // заполним цветом
for ($x = 0; $x<PIC_COLS;$x++)
 for ($y=0;$y<PIC_ROWS;$y++, $i++) {
  $file = PIC_PATH.$rows[$i];
$imginfo = getimagesize ($file); //([0]-width [1]-height)
$imgtmp = imagecreatefromjpeg($file);
imagecopyresampled ( $img , $imgtmp, $x*PIC_WIDTH , $y*PIC_HEIGHT , 0 , 0 , PIC_WIDTH , PIC_HEIGHT , $imginfo[0]  , $imginfo[1]);
imagedestroy ($imgtmp);
}
header("Content-type: image/jpeg");
imagejpeg($img);

На выходе получается “матрица” изображений “всё в одном”

На некоторых конфигурациях хостинга php вместо буквы “ш” (вообще, такой недостаток есть у двух букв - «ш» маленькая и «И» большая) выдавал “ерунду” - две кракозябры (видимо, непечатаемые символы). Иногда (возможно, после применения iconv) слова, содержащие букву “ш” вообще могли “пропасть”. Сайт в кодировке utf-8, база - также в utf-8. Проблема оказалась не в php (под подозрением находился iconv - на некоторых хостингах бывали проблемы с функциями перекодировки).

После сравнительно недолгих поисков выяснилось, что  «ш» и «И», словно заколдованные буквы могут некорректно работать с базой в кодировке utf-8.

Решить все удалось очень просто - после соединения с базой нужно установить кодировку для:
SET CHARACTER SET ‘utf8′ –(этот вариант нашел в рекомендациях на нескольких форумах)
SET NAMES ‘utf8′ –(этот вариант помог)

(важно! именно utf8, а не utf-8 - вариант с дефисом как раз и выдавал результат)

Можно “подглядеть”, что творится на сервере с кодировками:

mysql> show variables like '%char%';
+--------------------------+----------------------------+
| Variable_name            | Value                      |
+--------------------------+----------------------------+
| character_set_client     | utf8                       |
| character_set_connection | utf8                       |
| character_set_database   | utf8                       |
| character_set_results    | utf8                       |
| character_set_server     | utf8                       |
| character_set_system     | utf8                       |
| character_sets_dir       | /usr/share/mysql/charsets/ |
+--------------------------+----------------------------+

В дистрибутив PHP 5  входит модуль SOAP. Однако, он не является обязательным. Для более ранних версий php (php 4) или, если модуль SOAP не подключен (и подключить его нет возможности) можно воспользоваться готовым классом.  (PEAR::SOAP, NuSOAP, eZ SOAP,Zend.soap)

http://phpclub.ru/detail/article/soap - одна из наиболее популярных статей по SOAP
http://habrahabr.ru/blogs/php/38370/
http://www.php.ru/manual/ref.soap.html - руководство по PHP SOAP (SOAP Functions)

При работе с nusoap могут возникнуть проблемы с русскими буквами (отправка запроса на сервер), если файлы сохраняются в кодировке windows 1251. Аналогичные файлы в кодировке UTF-8 работают без сбоев.

Пример написания собственного веб-сервиса:
http://php5.com.ua/blog/php-programming/53.html

Скачать:
NUSOAP - http://sourceforge.net/projects/nusoap/

Несмотря на универсальность и функционал сниппет комментариев JOT не очень удобен для администрирования комментариев. Их просто нельзя найти нигде, кроме как на страницах сайта. Естественно, перебирать весь сайт в поисках новых комментариев не очень удобно.

Неплохое дополнение к jot, которое значительно расширяет имеющиеся функции - JoCo : Jot Comment tool.

Это дополнение включает в себя модуль (позволяющий управлять комментариями в панели управления MODx) и сниппет для расширения стандартного функционала JOT.

Установка модуля JoCo проста - копируем папку JoCo в каталог /assets/modules/ , после чего создаем новый модуль JoCo, в который прописываем всего лишь одну строку кода (содержимое искать в текстовом файле, в архиве с модулем)

Скачать JoCo для управления комментариями можно здесь:
http://modxcms.com/forums/index.php/topic,30632.0.html

Функции strtolower, strtoupper, uc_first корректно преобразуют буквы английского алфавита, однако с русскими буквами не работают. Скорее всего, дело в кодировке.

1. если файлы в кодировке cp1251 пробуем установить соответствующую локаль:
setlocale(LC_ALL, ‘ru_RU.CP1251′);

Для файлов в кодировке UTF-8  следует использовать мультибайтовые функции mb_strtolower, mb_strtoupper… Однако, не каждый хостинг поддерживает mb-расширение.

2. Если установка локали не помогла, можно написать собственную функцию:

function my_strtolower ($string){
$str=strtolower($string);
if (strtolower ('Ц')!='ц') $string = strtr(
$string,
'АБВГДЕЁЖЗИЙКЛМНОРПСТУФХЦЧШЩЪЬЫЭЮЯ',
'абвгдеёжзийклмнорпстуфхцчшщъьыэюя');
return $string;
};

По аналогии, если требуется, можно написать собственные функции вместо strtoupper и uc_first

ps. На мой взгляд, все-таки лучше разобраться с настройками хостинга..