jQuery Google Search Bookbar

A jQuery plugin that sets a div or span to show a Google Search Bookbar. If you find this plugin useful please vote for it on the jQuery site.

The current version is 1.0.1 and is available under the GPL and MIT licences. For more detail see the documentation reference page.

Introduction

The Google Search Bookbar functionality can easily be added to a division. It displays a set of books links based on provided search terms. The default search term is 'jquery'.

Google places some restrictions on your use of this service, including obtaining a key specific to a target URL providing the service, making the Web site freely accessible, and showing included Google branding. See the link above for more details.

You can also remove the GSBookbar widget if it is no longer required.

Default bookbar:

 

$('#defaultBookbar').gsbookbar();

$('#removeBookbar').toggle(
	function() {
		$(this).text('Re-attach');
		$('#defaultBookbar').gsbookbar('destroy');
	},
	function() {
		$(this).text('Remove');
		$('#defaultBookbar').gsbookbar();
	}
);

You can override the defaults globally as shown below:

$.gsbookbar.setDefaults({horizontal: true});

Processed fields are marked with a class of hasGSBookbar and are not re-processed if targetted a second time.

Formatting Options

You have some control over the appearance of the bookbar.

Formatting:

 

 

$('#formatBookbar').gsbookbar();

var thumbnails = [$.gsbookbar.thumbnailsSmall, $.gsbookbar.thumbnailsMedium];
		
$('#format select').change(function() {
	$('#formatBookbar').gsbookbar('change',
		{horizontal: $('#orientation').val() == 'true',
		thumbnailSize: thumbnails[$('#thumbnails').val()],
		manyResults: $('#results').val() == 'true'});
});

Cycling Searches

You can set the bookbar up to cycle automatically through a set of search terms, with control over the interval between cycles and the order. Just pass an array of search terms when attaching the bookbar.

Cycling:

 

$('#cycleBookbar').gsbookbar(
	{search: ['jquery', 'australia', 'cats', 'tennis']});
	
var times = [$.gsbookbar.cycleVShort, $.gsbookbar.cycleShort,
	$.gsbookbar.cycleMedium, $.gsbookbar.cycleLong];
var modes = [$.gsbookbar.cycleRandom, $.gsbookbar.cycleLinear];
		
$('#cycleTime,#cycleMode').change(function() {
	$('#cycleBookbar').gsbookbar('change',
		{cycleTime: times[$('#cycleTime').val()],
		cycleMode: modes[$('#cycleMode').val()]});
});

In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (kbwood{at}iinet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).gsbookbar({
	horizontal: true, // True for horizontal display, false for vertical
	thumbnailSize: this.thumbnailsMedium, // The size of the book thumbnails
	search: 'jquery', // Single or list of search terms
	manyResults: false, // True for many results, false for only a few
	cycleTime: this.cycleMedium, // Time between cycles of the search terms
	cycleMode: this.cycleRandom // Mode of cycling through the search terms
});

Usage

  1. Include the jQuery library in the head section of your page.
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  2. Set your Google Search key for use with your Web site.
    <script type="text/javascript">
    $.googleSearchKey = 'ABQIAAAA...2Z_iWfuw';
    </script>
  3. Download and include the jQuery GSBookbar CSS and JavaScript in the head section of your page.
    <style type="text/css">@import "jquery.gsbookbar.css";</style>
    <script type="text/javascript" src="jquery.gsbookbar.js"></script>
    Alternately, you can use the packed version jquery.gsbookbar.pack.js (2.7K vs 6.1K) or minified version jquery.gsbookbar.min.js (2.9K, 1.2K when zipped).
  4. Connect the GSBookbar functionality to your divs or spans.
    $(selector).gsbookbar({search: ...});

For more detail see the documentation reference page.

Comments

None as yet.

Contact Keith Wood at kbwood{at}iinet.com.au with comments or suggestions.

Change History

VersionDateChanges
1.0.126 Dec 2009
  • Corrected initialisation in Chrome
1.0.029 Nov 2008
  • Initial release