Picasaweb plugin for jQuery and Wordpress
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
- Download jquery.js
- Download jquery.picasaweb.js
- Include this files in HEAD-part of your page
- In page BODY you just put links on galleries
- At the end of page just put initialization call for plugin
So you should have something like this:
<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/gallery.name/album.name1">Album 1</a> ... <a href="http://picasaweb.google.сom/gallery.name/album.name2">Альбом 2</a> ... <script> $.picasaweb.init(); </script> </body> </html>
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> </div> ... <script> $.picasaweb.init("#myPicasa a"); </script>
Manual for WordPress’s plugin
- Download Picasaweb Wordpress Plugin
- Unpack files to Wordpress directory /wp-content/plugins/
- 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:
- Disable jQuery loading. Use it only if jQuery is already loaded by some other plugin or hardcoded to design
- 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"> </a> <div id="picasa-loader"> <!-- is visible while choosen photo is loading --> </div> </div> <ul class="picasa-photos"> <!-- List of small thumbnails --> <li> <a href="link-to-preview" title="Photo title"> <img src="small-thumbnail" /> </a> </li> ... ... </ul> </div>