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:

Comments

  1. Spate1y
    Permalink to comment#

    Thanks Chris! Definitely a useful screencast.

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

  3. 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. Great Tut as usual!

    Also, I like the redesign of the comment box.

  5. Permalink to comment#

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

    BTW I like the new comment area.

    Kind regards
    Rata

  6. Permalink to comment#

    You are a brilliant man, thank you very much

  7. isn’t working in IE7 for me,

    Al

    p.s. good luck at the conference Chris

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

    • 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

      Al

  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. 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);
    	});
    };
    $("img").titleBlock();
    • 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. Permalink to comment#

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

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

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

  15. 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,
    TeMc

  18. Krinkle
    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).

    http://static.grizzdesign.nl/jquery.titleblock.js

    Minified aswell:

    http://static.grizzdesign.nl/jquery.titleblock.min.js

  19. 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 ;)

    http://plugins.jquery.com/project/titleblock

  21. Subbu
    Permalink to comment#

    Thank you so much dude..

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

    • 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

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

    • 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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".