Picasaweb для jQuery и Wordpress
Плагин PicasaWeb создан для нативной интеграции web-галлерей от Гугла в блоги, форумы и любые другие страницы. Это, можно сказать, то самое место, которым Web 2.0 вдыхает жизнь в сервисы типа Народ.Ру
Суть плагина в следующем: после инициализации, он ищет на странице все ссылки (удовлетворяющие поисковому запросу) и проверяет их на предмет того, не ссылается ли эта ссылка на галлерею. Если это таки ссылка на галлерею — ссылка прячется, и заменяется на содержимое галлереи. Все это оборачивается в целую кучу DIV-ов с толпой классов для удобства кастомизации визуализации.
Инструкция по эксплуатации плагина к jQuery
- Скачайте jquery.js
- Скачайте jquery.picasaweb.js
- Включите эти файлы в секцию HEAD страницы
- В теле страницы разместите необходимое число ссылок на галлереи
- В самом конце страницы поместите инициализирующий плагин код.
Примерный вид страницы будет следующим:
<html>
<head>
...
<script src="http://jquery.com/src/jquery-latest.pack.js"></script>
<script src="http://bondariev.info/wp-content/plugins/picasaweb/jquery.picasaweb.js"></script>
</head>
<body>
...
...
...
<a href="http://picasaweb.google.сom/название.галлереи/название.альбома1">Альбом 1</a>
...
<a href="http://picasaweb.google.сom/название.галлереи/название.альбома2">Альбом 2</a>
...
<script>
$.picasaweb.init();
</script>
</body>
</html>
В качестве параметра желательно передать селектор ссылок в формате jQuery. По умолчанию обрабатываются все ссылки и указание селектора ускорит процесс. Например рекомендуется вложить ссылки в некий DIV с определенным ID. В таком случае получится что-то типа этого:
...
<div id="myPicasa">
<a href="http://picasaweb.google.сom/название.галлереи/название.альбома1">Альбом 1</a>
...
<a href="http://picasaweb.google.сom/название.галлереи/название.альбома2">Альбом 2</a>
</div>
...
<script>
$.picasaweb.init("#myPicasa a");
</script>
Инструкция по эксплуатации плагина к WordPress
- Скачайте Picasaweb Wordpress Plugin
- Распакуйте содержимое архива в Wordpress директорию /wp-content/plugins/
- В панели управления блогом зайдите в раздел Плагины
- В списке плагинов найдите Picasaweb inline gallery
- Активируйте плагин
В разделе “Опции” панели управления блогом появится подраздел “Picasaweb Configuration”. В нем пока немудренные настройки:
- Отключить загрузку плагином библиотеки jQuery. Используйте только если jQuery уже подключается одним из плагинов или руками
- Редактирование селектора для ссылок на галлереи.
Так же в директории плагина лежит пример CSS файла для того, чтобы галлерея выглядела приличнее. Его можно и нужно менять под свои нужды. Там же лежит анимированный лоадер (ajax-loader.gif), который тоже можно поменять (например, сгенерировать тебе более подходящий на сайте www.ajaxload.info.
Краткая справка по генерируемым объектам
Ссылка на галлерею заменяется на конструкцию следующего вида:
<div class="picasa-album">
<h2><a href="ссылка на альбом">Название альбома</a></h2>
<div class="picasa-descaription">Описание альбома</div>
<div class="picasa-preview">
<!-- предпросмотр выбранной фотографии -->
<a target="_blank" href="ссылка на оригинал фотографии">
<img src="увеличенное превью фотографии" border="0">
</a>
<div id="picasa-loader">
<!-- показывается во время загрузки выбранной фотографии для предпросмотра. автоматически получает размеры последней фотографии -->
</div>
</div>
<ul class="picasa-photos">
<!-- Список маааленьких превьюшек -->
<li>
<a href="ссылка на увеличенное превью" title="Заголовок фотографии">
<img src="маленькая превьюшка" />
</a>
</li>
...
...
</ul>
</div>
Пример использования по-прежнему тут
Вот, собственно говоря, пока и все..
Если кому пригодится — буду рад.
Комментариев нет.