#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. User Avatar
    Permalink to comment#

    Thanks Chris! Definitely a useful screencast.

  2. User Avatar
    Permalink to comment#

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

  3. User Avatar
    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. User Avatar
    Permalink to comment#

    Great Tut as usual!

    Also, I like the redesign of the comment box.

  5. User Avatar
    Permalink to comment#

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

    BTW I like the new comment area.

    Kind regards

  6. User Avatar
    Permalink to comment#

    You are a brilliant man, thank you very much

  7. User Avatar
    Al McRorie
    Permalink to comment#

    isn’t working in IE7 for me,


    p.s. good luck at the conference Chris

    • User Avatar
      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.

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

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

  11. User Avatar
    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);
    • User Avatar
      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. User Avatar
    Permalink to comment#

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

  13. User Avatar
    Permalink to comment#

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

  14. User Avatar
    Permalink to comment#

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

  15. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Permalink to comment#

    Hey CSS-Tricks.com,

    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. User Avatar
    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. User Avatar
    Permalink to comment#

    @Tom Rogers:

    Consider it done ;)


  21. User Avatar
    Permalink to comment#

    Thank you so much dude..

  22. User Avatar
    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.

    • User Avatar
      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

    • User Avatar
      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.

    • User Avatar
      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. User Avatar
    Permalink to comment#

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

  24. User Avatar
    Johan Nilsson
    Permalink to comment#

    Wow! For as long as I have known about jQuery, I have wondered how to create plugins and where the strange key/value pair syntax for config comes from. Now I know, and of course I have to create a bunch of jQuery plugins now. :) Thanks for opening my eyes!

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.