Home // Blog // Blog Archives

Navigate

jQuote is a plugin written by myself which allows for semantic blockquotes created on the fly with just one line of jQuery code for you to write - the hard work is all done for you!

Some of the features are:

• No duplicate content. If javascript is enabled, jQuote goes ahead and creates the blockquote.
• If javascript is not enabled, then obviously jQuote does not run. if jQuote does not run, nothing gets created. Meaning those with javascript disabled don't see duplicated text - which is what would happen if you did the usual method of copying + pasting text to create quotes.
• You can add extras as well - currently jQuote provides an easy option to add a person's name to the quote - for example if quoting a famous person it is always good to credit them - jQuote lets you do this easy peasy!
• Customise ALL of the look. Some plugins limit what you can change in the look. All jQuote does is create the <blockquote> and give it a class - you then can change whatever you want via CSS
• You can even change the actual class itself if you want to!
• If you do add a source that is also wrapped in it's own class - which you can change - so you can style that differently

I want it!

Here it is - jQuote V1 Download

Enough already, show me an example!

You're the boss - here it is:

The code behind it:

Make sure you have included jQuery 1.2.6 or higher AND jquery.jquote.js

Firstly, the quote itself is wrapped in a span tag like so:

<p>some text here...<span class="quote" title="Mr I P Sum">quote here</span>some more text here...</p>

Then you run the jQuery code like so, switching "p" for your chosen element.

 $("p").jquote();

And finally I've used some CSS and a small quotation mark image for the final effect:

body {
    font-family: Trebuchet Ms;
}
.source {
    display: block;
    font-weight: bold;
    
}
.jquote {
    float: left;
    font-style: italic;
    font-size: 30px;
    font-family: Georgia;
    background-image: url(speechmark_big.gif);
    background-repeat: no-repeat;
    padding: 0 0 0 55px;   
    
}

.jquote is the entire blockquote, and .source is the text "Mr I P Sum".

Okay, so just so I get this better, what does the code that jQuote produces look like?

Like this: (remember though you can change the classes).

<blockquote class="jquote">Your Quote Here<span class="source">Source Here<span><blockquote>

What options do I have?

  $("p").jquote({
                    bquoteclass: "jquote", //The class of the blockquote element.
                    srcclass: "source" //The class of the span element containing the source.
                });

Usage

Please link people to this page (www.jackfranklin.co.uk/jquote/index.html) and not to the download itself - that way people have to read this so should avoid running into problems trying to use it. If you use it a link back to me is nice but not required at all. Any problems please email me - jack [at] jackfranklin.co.uk.

Suggestions?

jQuote is in it's 1st full iteration (The first release had nasty code and sucked - this is the first proper) and I want to make it as good as it can be and also add anything you peeps think is needed! Any ideas, please email jack [at] jackfranklin.co.uk or follow @Jack_Franklin on Twitter! Any big updates on jQuote can be found by following @jQuote on Twitter.