e-magine(pretty && functional)

jQuery BBQ: A blockquote (AKA pullquote) script, that will unobtrusively grab content from your webpage and display it similarly to the way newspapers do it (see Wikipedia's definition of a pull quote).

It can either be dropped directly into the webpage, with no configuration, or can take a number of customization parameters if you want to get creative with it. It is very lightweight - only 2.2 Kb (to which you will need to add the size of your jQuery distro).

Demo

I've set up a demo page for jBBQ, where you will find usage examples.

Download

Version 1.0 (initial release) is currently available for download.
Choose your download type below:

Requirements

jQuery BBQ requires jQuery 1.6.2 or newer. You can either use the one provided in the archive, or download your own customized version from the jQuery download page.

Setup and basic usage

For a basic setup, you will only need the jbbq.js file included in your webpage (right next to the jQuery framework (jquery.js): <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jbbq.js"></script> You will need to define a .jBBQ class in your CSS statements that sets the style to be used for the pullquotes. Then simply add class="pullquote" to any of the blocks of text you want displayed as block quotes.

Advanced Usage

Inside the area that you wish to scan (document.body by default), surround the text you wish to use as a pullquote with a span element, that will be identified by the 'pullquote' CSS class (you can specify an alternate CSS class to scan for in the options, see below).
Should you wish to force the side where the generated blockquote element will be placed, you will add an additional 'left' or 'right' CSS class. Otherwise, the default initial side will be used (see options below).
Similarly to the way you would declare a side, you may force a location for the pullquote to be inserted at, such as 'before', 'inline-prepend', 'inline', 'inline-append', 'after'.
If you would like to use additional classes on the pullquote, you can also specify them in the CSS class attribute of the span element, by prefixing them with a '>' sign (e.g. class="pullquote left >fancy-styling >fun-colours"). There is no restriction on the number of classes you can pass. An example usage for this option is when you may want to stick a pullquote on one side and using a negative margin, pull it out of the main block of text some more.
If you wish to scan inside one element only, you may use the default jQuery selectors, e.g.: $('div#article').jBBQ();
Leave the defaults untouched, instead call the function using options, such as: $(document.body).jBBQ({'location': 'before', 'escape_html': false});
The defaults are: var jBBQDefaultSettings = { 'default_side' : 'right', // 'left' or 'right' will be overridden if element has 'left' or 'right' CSS class 'alternate_side' : true, // if true, successive pullquotes will alternate left / right placement 'location' : 'inline', // where to place the blockquote - can be either 'before', 'after' or 'inline' 'css_class_to_scan' : 'pullquote', // span CSS class to scan for 'css_pullquote_class' : Array('jBBQ'), // feed it an array of CSS classes for the blockquote, to have it randomly go through it 'escape_html' : true // if true, HTML markup will be stripped from inside the span (i.e. text only will be displayed) };

Customization

If you have a look at the CSS file, you will find a few cool examples of pullquotes.

License:

MIT style, meaning you can do anything with the above code, but I won't be held responsible if it eats your broccoli or steals your cat.