Сайт Трипільське Коло

Больше текста — под катом.

Этот проект был довольно крупным и длинным для меня (по количеству часов), так как я работал с большим количеством людей и старался, чтобы все были довольны. Больше людей = больше требований.
Работа была начата в мае и официально закончилась в последний день фестиваля — 3 июля.

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

Важной частью работы было создание flash-баннеров для сайта. Самый большой был запущен на ex.ua. Посмотреть все можно на отдельной странице с баннерами. Моя часть — анимация.

Полезные ссылки:

• «Красивый просмотровщик фото как Вконтакте» — http://www.no-margin-for-errors.com/
• Простой jQuery-слайдер http://jonraasch.com/blog/a-simple-jquery-slideshow
• Объемное облако тэгов «как в Вордпрессе» wp-cumulus
• Маленький скрипт для динамической подстройки ширины Facebook Like Box

Работа была горячей и беспрерывной — не было в июне дня, что бы я не занимался этим сайтом Основной состав участников главной сцены утвердился всего за две недели до фестиваля, а письмо с файлом «Окончательная программа Малой сцены» пришло мне ночью после первого дня феста. Это намекает на динамику изменения контента, которого у меня на компьютере на 250 мб (Word + картинки). Один из главных спонсоров тоже внезапно объявился в последнюю неделю, и для него был сделан отдельный баннер. Было весело.

P.S. Из-за плохой погоды фестиваль посетило относительно немного людей. Я сожалею по этому поводу и желаю организаторам вскорости решить свои финансовые проблемы, и рассчитаться со всеми участниками фестиваля

Интро

Во время работы над сайтом Трипільське коло (скоро отчет), появилась потребность сделать Facebook Like Box (такой большой, с лицами тех, кто залайкал страницу).

И «чтобы было красиво», по ширине блок должен полностью заполнять боковую колонку с динамической шириной (30%).

Проблема в том, что этот блок генерируется в iframe, в котором сам текст заключен в div с фиксированной шириной, которую можно задать при создании виджета. То есть, даже если прописать для iframe style="width: 100%", это не исправит ситуацию.

Решение внутри

Вникаем в код

Чтобы показать фейсы iframe обращается к файлу плагина с такими параметрами:

http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftkfest&width=300…,
где width - ширина в пикселях.

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

var iwidth = jQuery('#right').outerWidth();
var iparams = "http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftkfest&width="+iwidth+"&colorscheme=light&show_faces=true&stream=false&header=false&height=282";

При первой загрузке скрипт находит ширину #right и подставляет ее, потом генерируется html-код.
Готовый вариант: (вместо #parent подставить свой родительский элемент, а вместо tkfest — имя своей страницы)

<script type="text/javascript">
jQuery(document).ready(function(){
var iwidth = jQuery('#parent').outerWidth();
var iparams = "http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftkfest&amp;width="+iwidth+"&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=false&amp;height=282";
jQuery('#fb_like').html('<iframe id="fb_i" src="'+iparams+'" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height: 285px" allowTransparency="true"></iframe>');
})
</script>
<div id="fb_like"></div>

Работающий пример.

Вроде работает Я не специалист JS/jQuery, и предполагаю, что этот код не совсем корректен.
Пожалуйста, поправьте меня, где неправильно.