Get a free trial // Grow your CSS skills // Land your dream job

#67: jQuery Part 3 – Image Title Plugin

This video focuses on taking an already existing idea and code and turning it into a jQuery plugin. In this case it helps keep our code as semantic as it can be, and with JavaScript off, degrades nicely. We cover the syntax of creating a plugin, show off the cool chain-ability of jQuery, and show how to make the plugin versatile and expandable.

Links from Video:


  1. Spate1y
    Permalink to comment#

    Thanks Chris! Definitely a useful screencast.

  2. nanochrome
    Permalink to comment#

    Great i’ve been waiting for part 3 for ages!

  3. Patternhead
    Permalink to comment#

    Nice job Chris.

    Just watched the tutorial. Clearly explained and easy to understand as usual.

    Just to let you know, when the options weren’t working, you had the removeTitle in all lowercase.

  4. DigitalValdosta
    Permalink to comment#

    Great Tut as usual!

    Also, I like the redesign of the comment box.

  5. Rata
    Permalink to comment#

    I was waiting :) …
    Thank you, you made my day.

    BTW I like the new comment area.

    Kind regards

  6. Luke
    Permalink to comment#

    You are a brilliant man, thank you very much

  7. Al McRorie
    Permalink to comment#

    isn’t working in IE7 for me,


    p.s. good luck at the conference Chris

    • Chris Coyier
      Permalink to comment#

      Aw shucks. I swear I did my IE 6/7/8 testing but something buggered up. I think I have it fixed now.

    • Al
      Permalink to comment#

      I downloaded the file and executed it from there, I do note that the online demo is working in IE7. not sure what needs to be done to the d/l version for it to work in ie7

      thanks Chris


  8. vbox_
    Permalink to comment#

    Really interesting jQuery plugin dev screencast!

    Imo, a <br /> in an image title attribute is wrong semantically speaking. I’m sure there are easy workarounds for this, maybe something like exploding the title in 2 parts. You seem to use “ : ” in every title so perhaps use this as a separator and add the <br /> outside the real content with some jQuery magic ;)

  9. Shibi Kannan
    Permalink to comment#

    Amazing stuff you can do with JQuery. Although I am not a java person I find it easier to learn especiially after watching you make a few typos and get firebug errors and very good at troubleshooting the error – like that typo for plugin defaults “removetitle” versus “removeTitle”
    Great series – I hope more to follow

  10. TheDoc
    Permalink to comment#

    Awesome stuff. I never realized how easy jquery was. One more thing I’ll have to dig my teeth into.

  11. Patrik
    Permalink to comment#

    Thanks for the great screencasts.
    Isn’t this way easier to write jQuery plugins?

    $.fn.titleBlock = function(config) {	
    	var defaults = {
    		removeTitle: false, // config.removeTitle
    		fontSize: "20px"
    	var config = $.extend(defaults, config);
    	var removeTitle = config.removeTitle;
    	return this.each(function() {
    		var theImage = $(this);
    • Ryan
      Permalink to comment#

      Yeah, thanks. I thought there was an easier way!

      I’m gonna start making my own plugins, I’ll use this as the base. Chris’s code seems a little bloated

  12. Dor
    Permalink to comment#

    Awesome I was waiting for that :D
    Very cool, thanks.

  13. Casildo
    Permalink to comment#

    The “div”, the “JQ” understandable, but the plugin… mmm

  14. Steve
    Permalink to comment#

    This was Definitely a very useful post.
    Thank You, I’ll be keeping an eye out for these!

  15. Graphic Gorilla
    Permalink to comment#

    Hey Chris,

    the bug got fixed at 29’06”. But it wasn’t useless. It just shows that the annoying things I encounter as a programmer happens to the more experienced too.
    We both share the somewhat annoyed and tension rising singing with a double check is it really not working now to end of with a boo or similar sound.

    Anyhow I found myself yelling “You forgot your capital T man, that’s all”, “Come on, you can’t miss it”. Only to calm myself down and realize I’ve had worse events.

    I’m gonna write a totally useless query-plugin only to show myself I can do this.

    Love you man!

  16. Adam DiCarlo
    Permalink to comment#

    Cool tutorial, Chris!

    One thing: I don’t understand why you’re declaring a variable called “config” when apparently the function is already being passed a variable with the same name:

    var config = $.extend({}, $.titleBlock.defaults, config);

    That works, but I can’t see any reason to declare a new config to scope-out the old one. It confused me at first. How about this?

    config = $.extend({}, $.titleBlock.defaults, config);

    That’s a typical coding pattern:

    a = foo(..., a);

    P.S., I noticed for the first time the spinning asterisk in the intro animation. That’s a nice touch.

  17. TeMc
    Permalink to comment#

    Hi Chris,

    Great screencast, I never thought making a plugin was that easy !

    Is there going to be an official minified version of this aswell ?

    PS: When troubleshooting the removeTitle, the difference between the copypaste and the one typed from scratch is the lowercase “T” in removeTitle. It didn’t recognize the default cause of case sensitivity, and a non-existing variable always returns false ;)

    Thanks again,

  18. Krinkle
    Permalink to comment#


    Here’s a slightly modified version of it (tabs instead of spaces, fewer empty lines, credit to Chris and more pluginish filename).

    Minified aswell:

  19. Tom Rogers
    Permalink to comment#

    Are you planning to release this as a plugin in the JQuery repository? I think that could be really useful to some folks!

    Awesome Screencast

  20. Krinkle
    Permalink to comment#

    @Tom Rogers:

    Consider it done ;)

  21. Subbu
    Permalink to comment#

    Thank you so much dude..

  22. David Chambers
    Permalink to comment#

    Great screencast, Chris!

    I’m not convinced that JavaScript is required, however, so I’ve responded in the form of a blog post titled Captions over images. You may be enjoying the jQuery so much that you overlooked the CSS solution. ;)

    Those with only a second to spare can check out the captions over images demo for a comparison.

    • Chris Coyier
      Permalink to comment#

      Cool, thanks for sharing David. Remember this whole idea started as a CSS only idea. The point of using jQuery was to:

      1) Use the images title text instead of duplicating that value.

      2) Reduce the amount of markup needed (an image remains just an image in the markup)

      3) Demonstrate the theory of building a plugin

    • David Chambers
      Permalink to comment#

      I’m not advocating duplicating the value, just putting it in a different place.

      The two methods use different markup for image descriptions: one uses the img element’s title attribute, the other places captions in their own elements. Both approaches are valid, and it’s always nice to have options. :)

      You did a great job of demonstrating the steps involved in building a jQuery plugin. For me, the process was more important than the finished product in this screencast.

    • David B
      Permalink to comment#

      I really dig this CSS only version. 2 awesome ways to get something done.

      Thanks to both Chris and David C. for sharing these tutorials.

  23. Mikkel
    Permalink to comment#

    NICE!! It like having Seth Rogan teach you javascript!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed