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

В чем проблема с передачей методом GET в MODx?

Сразу оговорюсь — проблема касается админки. Потому что она построена на фреймах (я говорю о MODX Evolution). Вы не видите адрес фрейма, поэтому не знаете что адрес любого модуля выглядит примерно так:

/manager/index.php?a=112&id=1

Где id — это id модуля.

Предположим, мы сделали в своем модуле ссылку вида:

<a 
					href="http://dayte2.com?action=purpurpur&tits=gtfo">Клик</a>

Если на нее нажать она вызовет скрипт index.php с потерянными параметрами a и id:

/manager/index.php?action=purpurpur&tits=gtfo

И, следовательно, параметры модулю переданы не будут, а пользователь получит перезагрузку админки модэкса. Такая вот проблема.

Как передавать данные методом GET?

Ну первое что приходит в голову — просто дописывать каждой ссылке параметры id и a. Но это надо не забывать об этом и забыть о портабельности. Ведь если у вас это модуль номер 2, то на соседнем сайте — номер 6. Для портабельности нужно парсить номер модуля и подставлять его как переменную шаблона и оооо, столько геморроя! Я отказался от этого метода.

Я подумал что слишком много возни с тасканием параметров GET с собой. И вспомнил о том, что параметры GET сохраняются при передаче данных методом POST!

В большинстве случаев нам не важно как именно были переданы данные. Тем более что нет ничего такого в GET, чего бы не мог POST. Так что я решил передавать все данные методом POST.

Но как? Это ведь надо все делать формами и ссылками! Еще больший геморрой? А вот и нет. Я нашел способ делать обычные ссылки, которые отправляют данные методом POST. Военная хитрость!

Волшебные ссылки, отправляющие данные методом POST

Конечно, сама по себе ссылка не может отправлять данные постом. Но событие нажатия на ссылку можно легко отследить яваскриптом! Яваскриптом же можно определить куда должен быть соверешен переход и какие параметры должны передаться. Яваскриптом же можно сконструировать форму для передачи тех же самых данных методом пост. И одной командой ее отправить!

Итак, ловим значение, делаем форму, наполняем полями с такими же парами имя-значение, отправляем форму.

Это я делал при помощи jQuery и вот что у меня получилось.

$(function()	{
	$('.link').live('click',function()	{	//для всех ссылок.Даже для генерируемых скриптом или появившихся позже
		var href = $(this).attr('href');	//куда хотим идти?
		href = href.replace(/^[.\/?]+/,'');	//удаляем ненужные символы в начале
		var arr = href.split(/&/);	//разбиваем на пары ключ=значение
		var data=new Object();		//здесь будут данные
		//формируем объект данных
		$(arr).each(function()	{
			var d = this.toString().split('=');
			data[d[0]] = d[1];
		});
		//id форме нужен чтобы можно было ее отправить
		var form_id = 'get-post-form';
		var form = '<form method="post" id="'+form_id+'">';
		//создаем скрытые поля формы
		for(name in data)	{
			var v = data[name];
			form += '<input type="hidden" name="'+name+'" value="'+v+'"/>';
		}
		form += '</form>';
		//вставляем форму в конец страницы
		$('body').append(form);
		//отправляем
		$('#'+form_id).submit();
		//предотвращаем переход по ссылке
		return false;
	});
});

Это решение подразумевает что в href ссылок вы не будете использовать абсолютные пути, а будете использовать только пути таких видов:

?action=show_tits
.?action=show_tits
./?action=show_tits

Это решение я опробовал у себя и уже использую в одном своем модуле. Буду использовать и в последующих, ибо удобно. Велкам!

Казалось бы, это парадоксальное требование — облако тегов, но без использования тегов на сайте. Но все оказалось просто и красиво.

Я подумал, что теги в данном случае — это просто "темы". Когда пользователь тыкает на тег на главной странице — он хочет увидеть страницы на заданную тему. А это мало чем отличается от поиска.

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

У такого решения есть плюсы и минусы. Плюсы в том, что пользователю не надо вести систему тегов, запоминать какие теги у него в системе, решать задачу релевантности текста тегу и так далее. Он просто пишет текст. Если в тексте встрчеается ключевое слово — он уже получает тег. Какбы автоматически. Это очень удобно и расширяемо для администратора сайта. И совсем не пыльно для разработчика. А пользователю, в конечном итоге, все равно как оно реализовано — он получает нужные результаты.

Недостаток у этого решения тоже есть. Например, если слово встречается в статье один раз и вскользь — статья уже попадет под этот тег. То есть, достаточно употребить ключевое словосочетание, пусть даже речь вообще не о нем, чтобы эта статья находилась. Это, конечно, может испортить удобство работы. Но при правильно заданных ключевых словах этот минус нивелируется.

К тому же, никто не запрещает сделать, например, ключевые слова одни, а поиск — по другим.

Допустим, у нас сайт про пластиковые окна. Разумеется там чуть не в каждой статье будет упоминаться ПВХ. В облаке тегов целесообразно показывать именно ПВХ. Но если искать по этому слову, то будет находиться слишком много мусорных статей, не про это. Эту проблему можно решить задав поиск более жестко. То есть, в облаке отображается "ПВХ", а поиск идет по "окно ПВХ особенность" или типа того. Более конкретный запрос, отдающий более точную выдачу.

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

Если есть сайт, где 100 статей и администратору вздумается придумать новый тег, то ему придется пробежаться по 100 статьям и добавить этот тег ко всем, где он будет к месту. В случае с тегами-поисковыми запросами этого делать не надо. Просто добавил в список тегов и все — уже работает.

Привет. Давно я не появлялся, соскучились?:) Сегодня дам всем желающим скачать скрипт для скачивания музыки из вконтакте бесплатно. Идея скрипта родилась совершенно внезапно.

Мы сидели с девушкой и слушали музыку на вконтакте. Интернет работал нестабильно, поэтому мы захотели скачивать музыку на комп и слушать с него. Вспомнили что раньше был такой скрипт, который дорисовывал кнопочки "Save" ко всем трекам. Но потом он перестал работать, потому что изменился дизайн и вообще много чего изменилось на вконтакте.

Не долго думая, я наваял первую версию greasemonkey скрипта, который выполнял ту же задачу.

Скрипт скачивания музыки с вконтакте

Выглядит это дело после причесываний и применения моих дизайнерских талантов так:

Видим две составляющие. Во-первых, ссылки "DL" у каждой мелодии на странице. Если кликнуть по этой ссылке — браузер либо откроет музыкальный плеер и начнет играть мелодию, либо начнет скачивать файл. Если ваш браузер открывает медиа-плеер, а вам надо скачать — просто нажмите на эту ссылку правой кнопкой и нажмите "Сохранить объект как...".

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

Второй элемент — это иконка ноты, появившаяся в шапке сайта. Если нажать на нее — появляются ссылки "DL" если их раньше не было. Это все ее функции, собственно.

Скачать скрипт для скачивания музыки вконтакте

Как установить скрипт

Установка простая, но скрипт требует наличия плагина Greasemonkey. Если он у вас уже есть — все отлично. Просто перетащите скрипт на окно браузера и подтвердите установку. Если грисманки у вас нет — установите. Это полезная штука.

После установки он сразу начнет работать.

Как работает скрипт

Для любознательных я опишу как скрипт устроен и работает. Ведь у меня тут блог про веб-разработку;) Кстати, я уже писал про greasemonkey-скрипты на этом блоге и давал один, которым пользуюсь до сих пор весьма успешно. Это скрипт выделения nofollow и noindex ссылок.

А сейчас поговорим про этот. Для начала, вот код.

// ==UserScript==
// @name           vk-get
// @namespace      http://vkontakte.ru
// @description    4>102;O5B AAK;:C "A:0G0BL" 25745 345 5ABL 0C48>70?8AL
// @include        http://vkontakte.ru/*
// @require        http://yandex.st/jquery/1.6.1/jquery.min.js
// ==/UserScript==
if(unsafeWindow.console){
   var GMlog = unsafeWindow.console.log;
}

unsafeWindow.detect_audio = detect_audio;


function detect_audio()	{
	$('.ifman_dl_link').remove();
	$('input[id*=audio_info]').each(function()	{
		var val = $(this).attr('value');
		var arr = val.split(',');
		var mp3 = arr[0];
		var html = '<a href="'+mp3+'" class="ifman_dl_link">DL</a>';
		$(this).after(html);
	});
}
function true_load()	{
	if($('ifman_tone').attr('rel')!='loaded')	{
		var btn = '<div id="ifman_tone" rel="loaded" style="background-image:url(http://vkontakte.ru/images/icons/audio_iconset.gif);
                height:11px;width:11px;background-position:bottom;position:absolute; top:15px; left:50%;cursor:pointer;"
                title="Показать ссылки для скачивания аудио" onclick="detect_audio()"></div>';
		$('#top_links').before(btn);	
	}
}
true_load();

Расскажу сначала идею. Ссылки для прослушивания файлов вконтакте доступны каждому залогиненому пользователю. Беда в том, что они зависят от сессий. То есть, пока сессия есть — ссылка работает и может быть открыта даже другим пользователем. Как сессия разрушается (пользователь выходит) — ссылка перестает работать. В этом одна из трудностей использования вконтакта в качестве медиа-сервера на своем сайте. А что, удобно было бы — музыка лежит там, ссылки получаешь, встраиваешь в свой сайт и играешь на нем. Ан нет.

Но мы-то выполняем JS будучи залогинеными! Так что ссылки у нас всегда есть. Осталось только найти их в коде и нарисовать ссылки на них в явном виде.

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

Теперь по коду. Главная строчка в шапке greasemonkey — require. Она подключает jquery из репозитория Яндекса.

Дальше идет создание функции отладки GMlog. Если доступен объект console — его функция log становится доступна внутри GM-скрипта под именем GMlog. Эта функция просто выводит в консоль файрбага какие-то данные.

Дальше мы регистрируем функцию определения ссылок и рисования их в объекте окна, а не в локальном пространстве имен GM-скрипта.

А дальше мы определяем две функции. Одна — собственно нахождение музыки и отображение ссылок на скачивание. Вторая — рисование иконки в виде ноты.

Функция detect_audio делает следующее:

1. Находит и удаляет ссылки на скачивание музыки, если уже такие есть. Это нужно чтобы ссылки не плодились при повторном нажатии на кнопку.
2. Ищет все input, где id начинается с "audio_info" и перебирает их.
3. Для каждого такого элемента ищется значение атрибута value. Оно содержит ссылку на файл и какое-то число через запятую.
4. Поэтому мы разбиваем эту строку по запятой
5. И берем только первую часть.
6. Дальше формируем html-код ссылки, которую будем отображать.
7. И вставляем ее сразу после найденного input.

В общем, ничего сложного. Самый инетересный момент — это нахождение input с id, начинающимися с сaudio_info.

Функция true_load вообще не обязательна и сделана для красоты. Она делает вообще простую вещь. Если иконка еще не отображается — генерируется html-код этой иконки и вставляется в код страницы.

Два тонких момента. Первое — отображается ссылка или нет я определяю пытаясь найти значение ее атрибута. Естественно, этот атрибут включен в генерируемый код самой кнопки.

Второй момент — сама иконка. Я решил использовать иконку самого вконтакта. Но оказалось, что она является частью спрайта из двух иконок — знака плюс и ноты. Это был мой первый опыт работы со спрайтами) Ничего сложного на самом деле. Берем иконку, ставим ее в фон div-а и при помощи background-position добиваемся ее отображения.

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

Буду благодарен, если вы будете использовать этот скрипт и оставите свои отзывы и пожелания ниже. На вопросы тоже постараюсь ответить как можно оперативней. Еще, конечно, буду благодарен если поделитесь ссылкой на этот пост с друзьями вконтакте. Ну и подписывайтесь, не стесняйтесь, мне нравится писать GM-скрипты и я намерен раздавать их бесплатно. Не пропустите!

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

Расскажу о проведении, моих ошибках и результатах.

Вводные данные

Конкурс проходил с 8 по 24 июля. Суть конкурса проста — нужно придумать надпись для футболки и получить за нее максимум голосов. Призы денежные в размере 700, 350 и 150 рублей за первые три места. Варианты предлагаются в комментариях к странице конкурса и переносятся в голосование вручную.

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

Тонкости реализации и подготовительная работа описаны в моем предыдущем посте на эту тему.

Проведение конкурса

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

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

Модуль голосований для MODx EasyPoll оказался глючным и неудобным. Пару раз он вообще отказывался отображать варианты голосований и результаты в тихоря, то есть, не выводя абсолютно никаких сообщений об ошибках. Предполагаю, что это связано с его заточкой под мультиязычность. Один раз я его починил, но когда он слетел уже в конце конкурса — плюнул. Не буду с ним связываться больше. Кажется, гораздо проще и правильней было делать голосование на движке вконтакте.

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

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

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

Внимание, рекламная пауза и слово спонсору. На сайте xtouch.ru вы можете скачать игры на телефон бесплатно samsung gt-s5230 и не только на него. Можно скачать, например, на пацанскую нокию или другую модель самсунга. Нет, честно!:)

Результаты

Результаты неоднозначны. Для начала, покажу статистику посещений.

Как видно, она просто-таки взорвалась. С посещаемости в 10 человек в день я резко перепрыгнул в категорию посещаемости 100 — 200 человек в день. Впечатляет. Ну лично меня — да, потому что, повторюсь, рекламы практически не было.

Теперь немного интересней — структура этих посещений.

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

Посмотрим теперь откуда трафик.

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

Важным источником трафика оказался сайт с обзорами конкурсов — ikonact.ru. Я, если честно, скептически отнесся к такого рода сайтам, но, видимо, зря. Потому что много посетителей было с него и подобных. Например, с prizolov.name, о котором я вообще узнал только во время проведения конкурса. Оказывается, есть специальные сайты, мониторящие твиттер и блогосферу на тему конкурсов. И с них идет неплохой траф.

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

Видно что со многих источников толстые и тонкие потоки трафика идут на одну страницу — страницу конкурса. А с нее выходит поток только в одном направлении, на еще одну страницу. Этот переход и дает низкий показатель отказов. Что же это за страница, кто-то уже догадался? Правильно, это страница с результатами голосования.

Это печалька, конечно. То есть, трафик на блоге на момент проведения конкурса был, но ни во что не конвертировался. Люди практически не смотрели сам блог и не кликали по ссылкам, они смотрели только на голосовалку и ни на что больше.

Конкурс, не смотря на приток трафика, не дал мне конверсии почти полностью. Была совершена всего пара продаж и они не окупили и половины расходов на проведение. Я был к этому готов, но все же, немного обидно:) К тому же, вполне возможно, что продажи были совершены не участникам конкурса, а посетителям, пришедшим с поисковых систем. Кстати, проведение конкурса никак не повлияло на набор ключевиков, по которым заходили юзеры.

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

Заметки на будущее

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

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

Такие дела.

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

И вот наконец — нашел!

Представляю вашему вниманию программу PDFCreator. Вот такое вот оригинальное название, да. Это, по сути, простой pdf принтер. Но у него есть особая приблуда — он умеет, хоть и окольным путем, конвертировать много файлов.

Вообще, пакетные конвертаторы мне попадались. Они обычно платные и предлагают триальную версию. Ага, пробовал. Не зря же триал. Некоторые из них распечатывали мне полную хрень, убивали бордеры на таблицах, смещали элементы и не распечатывали почему-то некоторые картинки. Другие печатали нормально, но в низ каждой страницы впихивали свою рекламу. Ее, конечно, можно убрать, купив программу, но от этого останавливает одно (кроме трудности оплаты) — один файл из двух страниц у меня конвертился около 10 минут! Реально! Я чуть было не подумал что программа зависла. Но нет, файлы-таки родились.

В общем, PDFCreator лишен этих недостатков. Печать документа происходит довольно быстро. Качественно. Бордеры не пропадают, картинки тоже. Ничего не шевелится никуда. Все классно. Рекламы нет. И еще бонус — эта программа абсолютно бесплатна! Да еще и с открытым кодом. Это просто праздник какой-то!

Как конвертировать много документов в pdf в пакетном режиме

Итак, как пользоваться программой? Сначала ее нужно установить, разумеется. Потом запускаем PDFCreator.

Это не что иное, как очередь печати принтера pdf. Прежде всего, нам надо сделать так, чтобы при добавлении в очередь файлов, он пока не пытался их печатать, пока мы не настроим все. Поэтому лезем в меню "Принтер" и жмем "Остановить". Должна появиться галочка нпротив этого пункта.

Теперь добавим файлы. Можно воспользоваться кнопкой "Добавить" в панели, но я просто выделил все нужные файлы и перетащил их на окно PDFCreator.

Дальше происходит магия. PDFCreator спрашивает можно ли назначить себя принтером по-умолчанию. Нужно ответить "да". Не бойтесь, это временно и нужно как раз для автоматизации. Затем он начинает открывать файлы один за одним и нажимать "Печать" для каждого. Так как он является принтером по-умолчанию, все эти файлы появляются в очереди на печать. Конечно, выглядит это не очень. В моем случае мелькали окошки Word. Но оно того стоит. В общем, ждем.

Когда все документы появятся в очереди на печать — самое время настроить экспорт в pdf. Для этого заходим в меню "Настройки" и настраиваем. Важно залезть во вкладку "Автосохранение" и настроить ее. В этом случае, PDFCreator не будет спрашивать у вас куда сохранять и как обозвать каждый новый конвертированный файл. Чтобы файлы на выходе назывались так же, как оригиналы, но с другим расширением — нужно указать в поле "Имя файла" шаблон <Title>.

Все! Теперь все готово. Отпускаем нашу лошадку. Идем в "Принтер" и снова нажимаем "Остановить". Пааааехало! Наши файлы один за одним поступают на печать этому pdf-принтеру и он выплевывает их в заданное место уже в нужном формате. Файлы на выходе хорошего качества, нормального размера и без рекламы.

У меня было 296 файлов в формате .doc. PDFCreator пакетно конвертировал эти doc в pdf примерно за три часа, отъедая 50% ЦП. По-моему, это вполне приемлемый результат.

Для того чтобы не потерять эту замечательную программу, я залил текущую версию к себе. Вы можете скачать версию, актуальную на момент написания поста здесь, либо пройти на сайт программы и скачать последнюю версию.

Если я этим постом сэкономил вам несколько миллионов часов монотонной работы — можете отблагодарить меня всякими приятностями вроде твитов, плюсиков или хотя бы в комментариях:)

Здесь должен быть JavaScript.

Чтобы посмотреть JavaScript в действии - перейдите пожалуйста к этой статье на сайте.

Здесь должен быть JavaScript.

Чтобы посмотреть JavaScript в действии - перейдите пожалуйста к этой статье на сайте.

Что нам понадобится

• jQuery
• jcarousel lite
• Изображения

И все. Где взять jQuery я думаю, все знают. А jcarousel Lite я нагуглил за вас. Я долго искал плагин, который позволит мне быстро и без проблем, без гигантских объемов кода и хитрых премудростей сделать такой простой эффект. И я нашел его и очень рад этому. Фактически, этот пост я пишу еще и для себя, как закладку, чтобы заглянуть сюда когда в следующий раз потребуется сделать галерею изображений с автоскроллом.

Пишем html для ленты изображений

Тут классика. Используем список ul и оборачиваем его в div. На этот див мы будем натравливать плагин, так что ему нужен идентификатор. В моем случае это класс.

<div class="mycarousel">
	<ul>
		<li><img src="http://dayte2.com/img/sample/palm-s.png" alt="пальма"/></li>
		<li><img src="http://dayte2.com/img/sample/malinka-s.png" alt="малина"/></li>
		<li><img src="http://dayte2.com/img/sample/blue-sea-s.png" alt="Морько"/></li>
		<li><img src="http://dayte2.com/img/sample/4cherries-s.png" alt="Вишенки"/></li>
		<li><img src="http://dayte2.com/img/sample/palm-s.png" alt="пальма"/></li>
		<li><img src="http://dayte2.com/img/sample/malinka-s.png" alt="малина"/></li>
		<li><img src="http://dayte2.com/img/sample/blue-sea-s.png" alt="Морько"/></li>
		<li><img src="http://dayte2.com/img/sample/4cherries-s.png" alt="Вишенки"/></li>
	</ul>
</div>

Важно чтобы изображения были одного размера. Иначе будет смотреться не так эффектно. Поэтому придется напрячься и обработать их.

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

Нужно подключить jQuery. Как это сделать, думаю, все знают. А еще нужно подключить библиотеку jcarousel Lite. Она все и делает.

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

<script type='text/javascript' >
$(function()    {
    $(".mycarousel").jCarouselLite({
		auto: 2000,
		speed: 1000,
		circular: true,
		visible: 4
    });
});
</script>

Это все! Реально. Больше ничего не нужно. Не нужно подключать и настраивать темы. Не нужно делать какие-то контролы и писать дополнительный код. У вас есть стандартный код списка изображений и единственный вызов плагина с параметрами. Это так, как должно быть. Я в восторге, если честно.

О возможных параметрах и их значениях можно прочитать в оригинале на страничке плагина. Ну а я вкратце переведу вам что зачем.

Возможные параметры галереи

btnPrev - идентификатор, определяющий кнопку "Назад". Это нужно если вы делаете управление прокруткой с помощью кнопок.

btnNext - идентификатор для кнопки "Вперед".

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

mouseWheel - true/false значение, определяющее будет ли карусель прокручиваться от скролла мышки. Требует плагин mousewheel.

auto - true/false значение, определяющее будет ли лента крутиться сама.

speed - скорость прокрутки в милисекундах.

easing - эффект прокрутки. Можно сделать эффект подпрыгивания. Требует плагина easing.

vertical - может нужно, чтобы картинки крутились вертикально?

circular - будет ли лента останавливаться по достижении последней картинки или будет крутиться по кругу?

visible - сколько элементов видно

start - с какого элемента начинать

scroll - по сколько элементов прокручивается

beforeStart - callBack функция, вызывающаяся до начала анимации

afterEnd - callBack функция, вызывающаяся в конце анимации

Такие дела. Пользуйтесь!

А я закончил конкурс на блоге фаната футболок и скоро напишу о нем отчет.

Столкнулся сегодня с ошибкой в MODx, которая вызывала у меня удивление. Я просто нажал "удалить все, помеченное на удаление" в мэнеджере сайта и получил ошибку.

A possible CSRF attempt was detected. No referer was provided by the server.

Как исправить ее и другие неизвестные ошибки — расскажу в этом посте. Надо сказать, что предложенные методы частично переносимы и на другие CMS и скрипты.

Все оказалось ровно также просто, как и странно. Непонятно почему, но MODx решил изменить свои настройки выполняя это простое действие, которое раньше происходило без сбоев.

Итак, что нужно делать.

• Зайти в phpMyAdmin в базу данных, где хранятся данные вашего сайта.
• Найти таблицу "modx_system_settings". Если вы выбирали другой префикс, то она будет выглядеть так: "ПРЕФИКС_system_settings".
• Нажимаем кнопку "Обзор"
• Листаем примерно на третью страницу
• Находим поле "validate_referer". Если оно установлено в 1 — меняем на 0.
• Сохраняем, проверяем.

Должно получиться.

Как включить отображение ошибок в MODx

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

Если вы разрабатываете свой сниппет, вам достаточно включить две строки в любом месте (лучше в начале) сниппета.

error_reporting(E_ALL | E_STRICT);
ini_set('display_errors', 1);

Эти две строки с большой долей вероятности включат отображение всех ошибок и предупреждений, которые найдет php.

Если вы просто пользователь сайта — создайте новый сниппет. Назовите его, например, 'Debug', заполните его вышеописанными строками кода и включите в шаблон страницы или любой чанк, участвующий в ее формировании:

[[Debug]]

Таким образом вы включите отображение ошибок там, где вызывается этот сниппет.

Зачастую включение этих строк в скрипт выводит сообщение:

Parse error: syntax error, unexpected ')' in /path2site/assets/plugins/phx/phx.parser.class.inc.php(220) : eval()'d code on line 1
Parse error: syntax error, unexpected ')' in path2site/assets/plugins/phx/phx.parser.class.inc.php(226) : eval()'d code on line 1

Не пугайтесь. Эта ошибка phx. Она, кажется, никак не влияет на работу сайта и самого phx, так что можно не обращать на нее внимания.

Но вот если вы увидели другие ошибки — это уже тревожный знак. Для начала попробуйте загуглить точный текст ошибки (поиск в кавычках). Разумеется, не надо включать в поисковую фразу то, что уникально для вашего сайта. Например, путь к файлу на сервере. Включайте только значимый текст. Например "Parse error: syntax error, unexpected ')' in". Этого будет достаточно чтобы найти много материалов для изучения.

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

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

Поэтому когда у вас что-то не работает — не бойтесь, ищите, узнавайте, разбирайтесь. Конечно, стоит поостеречься вслепую вносить какие-то изменения в вашу систему, если не понимаете что эти изменения делают. Так можно не только починить сайт, но и доломать его окончательно так, что проще будет новый сделать. Вдруг вам какой-нибудь шутник подскажет скрипт для удаления всех данных? Или, хуже, для отправки логина-пароля администратора ему на e-mail? Так что будьте внимательны и не доверяйте всему, что пишут на заборе в интернете.

Самостоятельное решение проблем или использование знаний специалистов?

Когда вы сталкиваетесь с проблемой, у вас есть два выхода — взять на себя ответственность по исправлению ошибки, либо попросить кого-то, кто опытней (предполагается), сделать все за вас. В менеджменте это называется "делегировать". Люблю это слово:)

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

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

При выборе метода я бы ориентировался на срочность. Если у вас интернет магазин и вы теряете прибыль — исправлять ошибку нужно срочно. Не жалко заплатить эксперту, чтобы тот быстро все поправил. Потом можно доплатить чтобы объяснил что именно он сделал и где была проблема. Так вы сэкономите время и получите часть плюшек от варианта "сделай сам".

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

Вообще, самостоятельная деятельность — это хорошо. Я больше предпочитаю так. Хотя, конечно не во всех областях. Например чтобы создать 3D-модель нужного качества мне потребуется, скажем, месяц, а спецу — день. Разница?:) Хотя, например, узнать как самостоятельно продвигать сайт ничего не стоит. Материалов в сети много и они в последнее время, приемлемого качества. Достаточного для того, чтобы сделать не так уж плохо. А до специалиста, при желании, докачаться можно за несколько месяцев. Не такая уж мудреная область.

Хватит разглагольствовать, пора закругляться. Планирую написать в ближайшее время пост про vCard и как его сделать на своем сайте на MODx — не пропустите. Кроме того, если у вас ошибка и вам нужен эксперт чтобы ее исправить - смело обращайтесь ко мне. Могу помочь советом или делом. Деньги возьму не всегда, зависит от количества работы:)