Статьи

Доступ к Flickr посредством W3C-чистого Flickr badge

Опубликовано 03/08/08 // Тэги: // Комментарии: 0

Перевод статьи Вирл Питерс (Veerle Pieters)

Оригинал доступен на сайте Veerle.duoh.com

Некоторым из вас, возможно, интересно, как осуществляется трансляция фотографий с сервиса Flickr на мой блог. Я использую HTML-версию Flickr-пропуска (“Flickr badge”: http://www.flickr.com/badge_new.gne). После завершения пяти непродолжительных этапов вы получите код, который нужно будет внедрить в ваш сайт. Так как мы хотим оставить сайт семантически “чистым” (придерживаясь стандартов W3C), то должны сделать “ уборку” – причем в первую очередь. Стили Flickr, которые этот фотосервис предлагает использовать, можно проигнорировать: мы будем оформлять все с помощью наших, внешних стилей…

По сути, единственное, что мне нужно из кода Flickr — это скрипт: 

<script type=“text/javascript” 
src=“http://www.flickr.com/badge_code_v2.gne?
count=3&display=latest&size=s&layout=x&
source=user&user=76746199%40N00”>
</script>

Даже эту строку кода необходимо обновить. Амперсанды должны быть изменены на &amp, чтобы убедиться, что это действительно XHTML-код. Далее мне надо изменить “count=3” на “ count=4”, так как мне нужны 4-х фотографии для отображения. Впрочем, вы можете самостоятельно выбрать это количество.

Код скрипта

Это сценарий, который использую я: 

<script type=“text/javascript” src=
“http://www.flickr.com/badge_code_v2.gne?count=4&display=latest&size=
s&layout=x&source=user&user=76746199%40N00”>
</script>

XHTML-код

Следующий шаг — добавление сценария в XHTML-код страницы:

<div id="flickr">
<h2>Flickrness</h2>
<script type="text/javascript" 
src="http://www.flickr.com/badge_code_v2.gne?count=4&amp;...">
</script>
</div>

CSS-код

Далее мы оформим этот код посредством CSS-стилей. Я начала с контейнера # flickr div: 

#flickr {
background:url(./graphics/flickerness.gif) no-repeat;
width:214px;
height:154px;
padding:14px 0 0 50px;
margin-top:40px;
}
</pre>

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

#flickr h2 {
position:absolute;
left:-300px;
top:-300px;
}

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

#flickr img {
float:left;
margin:0 0px 8px 8px;
background:#3f4e4e;
padding:4px;
width:62px;
height:62px;
}

Размеры изображения также определяются в CSS. Граница вокруг картинки – это четыре пикселя + заданный цвет фона. Пространство между изображениями создается с помощью левого и нижнего краев из восьми пикселей. Я использую float:left, для размещения картинки с левой стороны.

Вот лишь малая часть того, что я реализовала на своем блоге. Обещаю, что вскоре расскажу об этом более подробно. Так что следите за обновлениями ;).

Оставить комментарий