Сначала об общих моментах, разметка по большей части на ваше усмотрение, а я использовал такую, как по мне достаточно семантично и главное ничего лишнего. Внутрь li-шек помещается контент который надо каруселить, например картинки.

<div id="slider" class="c">
	<a class="ib arrow left" href="#"></a>
	<ul class="ib">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<a class="ib arrow right" href="#"></a>
</div>

CSS на самом деле еще больше на ваше усмотрение, главные моменты тут такие

li { display:none; } /* все слайды скрыты*/
.c {} /*просто контейнер*/
.ib { display:inline-block; } /*можно еще хаки для ie*/
.arrow { background:url("") no-repeat; } /*картинка со стрелочками*/
.arrow.left { background-position: 0 0; } /*ну вы поняли*/
.arrow.right { background-position: 0 0; }
.active { display:inline-block; } /*текущий элемент карусели*/

А вот и сладенькое, первый скрипт показывает только одну li-шку за раз и при достижении крайней точки начинает с противоположного конца

$(".arrow", "#slider").click(function(){

	var self = $(this),
		direction = self.is(".left") ? -1 : 1,
		collection = self.parent().find("li"),
		index = collection.filter(".active").removeClass("active").index(),
		next = (collection.length + index + direction) % collection.length;
		
	collection.eq(next).addClass("active");

	return false;

}).eq(1).trigger("click");

А второй показывает количество определенное в переменной number и при достижении крайней точки останавливаеться.

$(".arrow", "#slider").click(function(){
	
	var self = $(this),
		direction = self.is(".left") ? -1 : 1,
		collection = self.parent().find("li"),
		index = collection.filter(".active:first").index(),
		number = 5;
		
	index = Math.max(0, Math.min(index + direction, collection.length - number));
				
	collection.removeClass("active").filter(function(){
		var self = $(this);
		return self.index() >= index && self.index() < index + number;
	}).addClass("active");
	
	return false;

}).eq(1).trigger("click");

Зачему еще что обе карусели сами инициализируються, тоесть зарание выставлять класс active не надо.

Задачка сегодня звучит так: надо загрузить на сайт два изображения (произвольного размера, разумеется) каждое изображение уменьшить до определенного размера с учетом пропорций и положить на один холст (с соотношением размеров 2:1 к размеру картинки) так чтобы обе картинки были в центре. В общем я не большой мастер объяснять на пальцах поэтому нарисовал вот такой эскиз.

Сначала я попробовал рещить эту задачу при помощи встроенной в CI (поскольку именно на CI я пишу в силу незнания других фреймворков) библиотеки которая умеет работать и с GD2 и с ImageMagic и с NetPBM. К сожалению библиотека оказалась очень громоздкой (в плане конфигурации) и не очень гибкой в плане функционала, поэтому написал три больших конфига и попытавшись отладить полученное я получил головняк на пару часов с виндовыми путями на локальной машине. Библиотека никак не хотела принимать абсолютные пути типа C:/localhost/path/to/file.jpg и относительные типа implode(DIRECTORY_SEPARATOR, array("path","to","file.jpg")) , в общем я сделал то чему меня учили в школе - положил на нее, и написал все на чистом PHP

Я не буду описывать как работает CI единственно что надо знать это что я перебираю массив $_FILES и преобразовываю его в массив фалов где каждый файл это элемент массива. итак внимание на экран, коменты по коду.

// это преобразование массива $_FILES в нечто человеко-удобное
$files = $this->getFileData('files');

// юник для базы и размер уменьшенной (квадратной) картинки
$uniqid = uniqid(); //md5(now());
$size = 450;

// проверяю наличие, тип файла и размер
$status = array();
$types = array("first","second");
foreach($types as $type){
	if (!$files[$type]['tmp_name']){
		$status[$type] = "а как же картинкa?";
	} elseif (!in_array($files[$type]['type'], array('image/gif','image/jpeg','image/png'))){
		$status[$type] = "это разве картинка?";
	} elseif ($files[$type]['size'] > 1048576){
		$status[$type] = "размер картинки больше 1M";
	}
}

// если ошибки - выходим
if ($status){
	echo json_encode($status);
	exit;
}

// создаю холст на котором будет все это потом лежать и делаю его прозрачным
$sample = imagecreatetruecolor(2*$size, $size);
imagesavealpha($sample, true);
$transparent = imagecolorallocatealpha($sample, 0, 0, 0, 127);
imagefill($sample, 0, 0, $transparent);

// для каждой картинки
foreach($types as $type){
	// переименовываю и переношу во временную папку
	$files[$type]['new_name'] = TEMP_DIR.'/'.$type.$uniqid.".".end(explode('/', $files[$type]['type']));
	move_uploaded_file($files[$type]['tmp_name'], $files[$type]['new_name']);
	
	// узнаю реальные размеры и высчитываю какими они должны быть
	$image[$type] = array();
	list($image[$type]['width'], $image[$type]['height']) = getimagesize($files[$type]['new_name']);
	$dim = $image[$type]['width'] > $image[$type]['height'] ? 'width' : 'height';
	if($image[$type][$dim] < $size){
		$image[$type]['new_width'] = $image[$type]['width'];
		$image[$type]['new_height'] = $image[$type]['height'];
	} else {
		$image[$type]['ratio'] = $size / $image[$type][$dim] * 100;
		$image[$type]['new_width'] = $image[$type]['width'] * $image[$type]['ratio'] / 100;
		$image[$type]['new_height'] = $image[$type]['height'] * $image[$type]['ratio'] / 100;
	}
	
	// получаю саму картинку
	switch ($files[$type]['type']){
		case 'image/gif':
			$image[$type]['source'] = imagecreatefromgif($files[$type]['new_name']);
			break;
		case 'image/jpeg':
			$image[$type]['source'] = imagecreatefromjpeg($files[$type]['new_name']);
			break;
		case 'image/png':
			$image[$type]['source'] = imagecreatefrompng($files[$type]['new_name']);
			break;
	}
	
	// а теперь собственно магия - я рисую картинку на холсте 
	imagecopyresampled(
		$sample,
		$image[$type]['source'],
		$type=='first'?$size-$image[$type]['new_width']:$size,
		($size-$image[$type]['new_height'])/2,
		0,
		0,
		$image[$type]['new_width'],
		$image[$type]['new_height'],
		$image[$type]['width'],
		$image[$type]['height']
	);
	
	// удаляю ненужное
	unlink($files[$type]['new_name']);
}

// и на последок сохраняю холст
imagepng($sample, implode(DIRECTORY_SEPARATOR, array('path','to',$uniqid.'.png')), 0);
imagedestroy($sample);

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

$.ajax({
	url: "...",
	success: function(){
		$("#myTemplate").tmpl(data).appendTo($("#myContainer").empty());
	}
});

можно удобно писать

$.ajax({
	url: "...",
	context: $("#myContainer").empty(),
	success: function(){
		$("#myTemplate").tmpl(data).appendTo(this);
	}
});

только это все разбивается о рифы реальности, когда аджакс надо повесить на кнопку

$("#myButton").click(function(){
	$.ajax({
		url: "...",
		context: $("#myContainer").empty(),
		success: function(){
			$("#myTemplate").tmpl(data).appendTo(this);
		}
	});
});

При трех быстрых кликах, контейнер три раза обнуляется, потом идет запрос/ответ и шаблон три раза вставляется в контейнер.

Первый пришедший в голову вариант был прост как двери

$("#dialog1","#dialog2","#dialog3","#dialog4","#dialog5").dialog("close");

но если хотя бы один диалог не был создан при старте страницы то вылетит Exception. Естественно создавать диалоги при старте бессмысленно. ни один может не понадобиться а ресурсов они отъедают нормально. Второй вариант был таким

for (var i=1,j=5;i<j;i++){
	try{
		$("#dialog"+i).dialog("close");
	}catch(e){
		// do nothing
	}
}

и несколько дней эта конструкция муляла мне глаза. Наконец я переписал это примерно так

for (var i=1,j=5,d;i<j;i++){
	d = $("#dialog"+i);
	if(d.data("dialog")){
		d.dialog("close");
	}
}

стало лучше но еще не совершенно, последним вариантом стало

$("div:data(dialog)").dialog("close");

теперь я доволен, а какие еще есть варианты?

Но шутки комикам, а я сегодня буду писать о шрифтах, а точнее об их подключении на страницу. Для начала возьмем какой-нибудь бесплатный шрифт, например Marke Eigenbau. Это реальный восьмипиксельный шрифт, не смотря на название, и дальше я буду использовать его как пример.

Еще забыл оговориться, эта статья не касается sIFR, typeFace и cufon. Так что по ссылочкам сами походите, а я пока расскажу про нативный @font-face.

Теория простая - пишем в CSS правило:

@font-face {
	font-family: 'MarkeEigenbau';
	src: url('../fonts/MarkeEigenbau/MarkeEigenbau.ttf') format('truetype');
}

Все бы хорошо, но у нас есть целый зоопарк браузеров, форматов и лицензий поэтому все-всех, а страдаем мы. После консультации у Гугла выясняется, что достаточно все 4 формата чтобы все были довольны ttf, eot, woff, svg. Правим CSS, но не забываем что сотрудники компании MS каждый день усердно работают над тем чтобы нам было тяжелее работать.

@font-face {
	font-family: 'MarkeEigenbau';
	src: url('MarkeEigenbau.eot?#iefix') format('embedded-opentype'),
		url('MarkeEigenbau.woff') format('woff'),
		url('MarkeEigenbau.ttf') format('truetype'),
		url('MarkeEigenbau.svg#MarkeEigenbau') format('svg');
}

Для пытливых: Похоже IE разбирает параметр src регуляркой c включенным квантификатором жадности и этот # обрывает паттерн.

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

Для пытливых: Раньше белка вставляла в хеш после svg какую-то ересь типа webfontiGyDMQZD, но сейчас её попустило и она правильно вставляет туда имя шрифта.

Итак, на руках 4 файла и куча радости, но мы ж хотим не просто шрифт, а хотим жир, курсив, и жирный курсив, и чтоб удобно! Для начала скачиваем все это хозяйство и конвертим. Если вы используете белку то на выходе у вас 16 файлов шрифта и 16 правил для @font-face

@font-face {
	font-family: 'MarkeEigenbauBold';
	src: url('MarkeEigenbauBold.eot?#iefix') format('embedded-opentype'),
		url('MarkeEigenbauBold.woff') format('woff'),
		url('MarkeEigenbauBold.ttf') format('truetype'),
		url('MarkeEigenbauBold.svg#MarkeEigenbauBold') format('svg');
	font-weight: normal;
	font-style: normal;
}

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

.markerEigenbauBold {
	font-family: 'MarkeEigenbauItalic' /*, [fallback]*/, sans-serif;
	font-style: italic;
}

и все только потому что так нагенерила белка, поэтому правим

@font-face {
	font-family: 'MarkeEigenbau';
	src: url('MarkeEigenbauBoldItalic.eot?#iefix') format('embedded-opentype'),
		url('MarkeEigenbauBoldItalic.woff') format('woff'),
		url('MarkeEigenbauBoldItalic.ttf') format('truetype'),
		url('MarkeEigenbauBoldItalic.svg#MarkeEigenbauBoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
}

Дышать явно стало проще потому что правил осталось 4 и они теперь не напрягают. Но что делать если вы вдруг захотели осчастливить пользователей Mac шрифтом Calibri, вам ведь не надо заставлять пользователей седьмой винды и висты качать его, поэтому добавляем еще локальное имя шрифта.

@font-face {
	font-family: 'Calibri';
	src: local('Calibri Bold Italic'),
		url('CalibriBoldItalic.eot#iefix') format('embedded-opentype'),
		url('CalibriBoldItalic.woff') format('woff'),
		url('CalibriBoldItalic.ttf') format('truetype'),
		url('CalibriBoldItalic.svg#CalibriBoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
}

Ну вот почти все, осталась маленькая деталь, а что если ваш сайт надежно защищен SSL, вы думаете это будет работать? Правильно, надо еще пошаманить с .htaccess, который достаточно положить в директорю со шрифтами.

<IfModule mod_headers.c>
	Header set Access-Control-Allow-Origin "*"
</IfModule>

А раз полезли в .htaccess то добавляем правильные mine-type

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-woff .woff
AddType image/svg+xml .svg
AddType application/octet-stream .afm

Вот вроде и все... А вывод такой: используйте Helvetica, не бодрите мозги :)

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

Основная идея примера из мануала: чтобы на одной и той же разметке можно было сделать табики и сверху и снизу. Это очень хорошая идея но мне явно не подходила. Вкратце табики выглядят так: общий контейнер, в нем сверху UL с закладками, снизу - DIV с контентом. Это верно как для разметки так и для отображения. Для табиков снизу разметка та же, но табики имеют position:absolute и bottom:0 . Казалось бы все должно работать, НО есть одно НО, и это не IE! Это как не странно WebKit. Все размерности в JQuery UI указаны в EM, что бы все одинаково хорошо смотрелось с любым размером текста, так вот при переходе из EM (да в общем и из остальных относительных величин) в PX, WebKit округляет числа в большую сторону, тогда как все остальные в меньшую, или подгоняют. Об этом еще Resig писал в далеком 2008 году. При таком подходе прижатые к низу табики налазят на текст на 1-2PX. Это совершенно не волнует пример в мануале, потому что текст там не имеет бордера и заранее короче на несколько пикселей, так что между ним и прижатыми табами есть зазор. Ради красоты пришлось пожертвовать первоначальной разметкой, перенеся табики под текст. Хотя по моему вообще это не принципиально, потому что я сделал это скриптом, да и вернуть их тоже не проблема.

Вторая проблема это !important. ежупанятна что универсальность в таком большом CSS framework требует перекрывать что-то, что было написано позже, тем что было написано раньше. Тут кроется проблема всего framework. Я свято уверен что классы типа ui-state-[default|hover|active] не должны определять толщину и тип бордера, а только цвет, потому что потом надо городить огороды. В своем маленьком примере я это поправил.

Ну и последние, надо открывать таб по урлу. Как бы самое обычное дело, но предусмотрено в документации только через куки, а если руками указывать то надо знать индекс таба а не скажем его ID. С этой маленькой гадкой проблемой я тоже очень элегантно справился двумя строками кода.

KISS

Так вот новая jquerу 1.7 вышла, все ликуют и засыроют интернет обзорами, я похоже не исключение. А теперь взглянем что же все-таки изменилось:

Вот, например, придумали новые методы on/off. Нахрена? И теперь в одном коде будет каша из on/delegate/bind/live/[shotcut] и все это вперемешку с 90x-style-code, как это, например, сейчас у неких кидал из SemanticForce, и я вам точно скажу они не одни такие, просто вам повезло.

Придумали методы done/fail, для совместимости с deferred. Ждем кучу криков по поводу того что "everything doesnt work" после релиза 1.8 и размножение каши (из прошлого абзаца) в геометрической прогрессии после того как в 1.8.1 вернут success/error для обратной совместимости.

Как обычно очень радует забота о IE6, фиксим баги, улучшаем совместимость, заботимся о html5. Даже добавляем html5shil-els, а на IEPP кладем болт. Конечно ведь где вы видели идиотов, которые буду печатать на бумаге мегадинамические страницы с jquery. Вообще если убрать пачку ифов для Feature Detection то jquery потеряет половину в весе...

Кстати о Browser detection, его отменили еще хрен знает когда а deprecated $.browser все еще живет... так что надежды на то что уберут success/error - нет.

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

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

На этот раз будет достаточно скучно :) Наконец стало тепло, заполнились почти все гостиницы, загорелые дети ссут в море, а я сижу за компом :)

На выходных выбрался в Батумский ботанический сад. Он очень большой и разделен на секции а-ля материки. Как ни странно самый красивый участок принадлежит не Грузии, а восточной Азии, в частности Японии. Там растут карликовые растения, в пруду плавают рыбки, и выстроены небольшие терраски. Быд еще Мексиканский участок на котором я тщетно искал пейот, нашел тока какой-то ядовитый вьюнок.

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

После бот сада поехали посмотреть Петри. Вход три лара (для сравнения вход в Гонио 1 лар), раскопками даже не пахнет - все поросло травой много лет назад, камни навалены в кучу, целыми сохранилась только пара стен. Попытки построить террасы (из бетона) не увенчались успехом, может бабла не было, хз, но они тоже заброшены. Музея с находками нет и не будет. Вердикт: Петра - гавно.