Picasaweb plugin for jQuery and Wordpress

[Russian version]

Plugin PicasaWeb was created for native integration google’s web-galleries into blogs, boards and any other web pages.
Plugin works this way: after initialization it looking for all links (by searching mask) and check them are they linked to gallery. If true — link will be hidden and changed for gallery’s content. All content has a lot of DIVs with hip of classNames for comfortable layout customizing.

Manual for jQuery’s plugin

  1. Download jquery.js
  2. Download jquery.picasaweb.js
  3. Include this files in HEAD-part of your page
  4. In page BODY you just put links on galleries
  5. At the end of page just put initialization call for plugin

So you should have something like this:

	<script src="http://jquery.com/src/jquery-latest.pack.js"></script>
	<script src="http://bondariev.info/wp-content/plugins/picasaweb/jquery.picasaweb.js"></script>
	<a href="http://picasaweb.google.сom/gallery.name/album.name1">Album 1</a>
	<a href="http://picasaweb.google.сom/gallery.name/album.name2">Альбом 2</a>

The very best is to give searching mask rule as initialization param in jQuery selectors format. All links would be processed by default and searching mask will speed up process. For example you can put your links inside some DIV with ID. And in this case you should have something like this:

	<div id="myPicasa">
	<a href="http://picasaweb.google.сom/gallery.name/album.name1">Album 1</a>
	<a href="http://picasaweb.google.сom/gallery.name/album.name2">Album 2</a>
$.picasaweb.init("#myPicasa a");

Manual for WordPress’s plugin

  1. Download Picasaweb Wordpress Plugin
  2. Unpack files to Wordpress directory /wp-content/plugins/
  3. Go into the WordPress admin interface and activate the plugin Picasaweb inline gallery

There is new item named “Picasaweb Configuration” in “Options” section. So you can:

  1. Disable jQuery loading. Use it only if jQuery is already loaded by some other plugin or hardcoded to design
  2. Edit selector for links processing

There is an example of CSS file in plugin’s directory CSS. You can and should to customize it. And also you can found animated loader (ajax-loader.gif). You can also change it for own (or make a new one using www.ajaxload.info).

Short description of generated layout

Gallery’s link is changed to following HTML code:

<div class="picasa-album">
	<h2><a href="original-link">Album title</a></h2>
	<div class="picasa-descaription">Album description</div>

	<div class="picasa-preview">
	<!-- Choosen photo preview -->
		<a target="_blank" href="choosen-photo-link">
			<img src="choosen-photo-preview" border="0">
		<div id="picasa-loader">
		<!-- is visible while choosen photo is loading	-->

	<ul class="picasa-photos">
		<!-- List of small thumbnails -->
			<a href="link-to-preview" title="Photo title">
				<img src="small-thumbnail" />

Working example:

Our little Lary

RSS feed | Trackback URI

8 Комментариев »

Comment от Книга Люб
2007-05-19 22:22:55

Если я правильно понял, то Вы автор этого плага, почему б не сделать описание на русском ^(

Comment от Eugene Bond
2007-05-22 18:04:07

Как не сделать?
Как раз первое описание и есть на русском. Сразу после заголовка стоит ссылка [Russian version] которая открывает русскую версию описания..

Comment от Книга Люб
2007-05-22 18:13:50

Прошу прощеня, не заметил , а я сидел и переводил … мдя … lol

Comment от Eugene Bond
2007-05-23 18:17:49

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

Comment от Eugene Bond
2007-05-23 18:19:31

Актуальная версия в SVN на сервере Wordpress:

Comment от incredible
2007-05-25 06:58:34

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

Comment от Eugene Bond
2007-05-25 08:12:25

Ответ в приложенной ссылке. Пока, если не сложно, надо поменять домен с .co.uk на .com

Comment от incredible
2007-05-25 09:40:41

Спасибо :)

Имя (обязательно)
E-mail (required - never shown publicly)
Ваш комментарий (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.