jquery.flash v1.3.1 – Squashing IE-related bugs.

If you downloaded v1.3 of jquery.flash I would recommend switching to this one. There has been no functionality changes, so it should just be drop-in. It fixes a minor bug I added when I switched to using indexOf() for iterating through attributes and parameters…apparently IE doesn’t support it. >.>

That’s fixed now and I did a few minor structural changes to reduce the character count a little and make things ever so slightly speedier. I also created a fancy tutorial page type thing for it, which you can check out here.

Example

Downloads:
Minified – 2.03 KB
Non-Minified – 4.35 KB

jquery.flash v1.3 is ready!

There’s nothing major to change in such a minimal library, but such a difference the little things can make! New in version 1.3 is;

  • Class inheritance
  • Src inheritance from href for easy conversion of links
  • Built-in support for allowfullscreen parameter
  • Minor fix to dimensions inheritance
  • Added availattrs and availparams to settings object allowing anyone to add support for any extra attributes or parameters they might need!
  • Moved lots of code around to use as little characters as possible, allowing optimal minification. All this new functionality and it got even smaller! It’s now down to 1.91 KB.

Available options and their defaults:

$(this).flash({
    // As always; all settings are entirely optional.
    id			: $(this).attr('id'), // ID
    class		: $(this).attr('class'), // class
    width		: $(this).attr('width'), // Width
    height		: $(this).attr('height'), // Height
    src			: $(this).attr('href'), // Path to swf
    flashvars		: null, // JSON structured flashvars data
    bgcolor		: null, // Background color
    quality		: null, // Quality
    wmode		: null, // Window mode
    allowscriptaccess	: null, // Set to "always" to allow script access across domains
    allowfullscreen	: null, // Allow fullscreen viewing.
    classid		: 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000', // For IE support.
    codebase		: 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=', // Ditto.
    pluginspace		: 'http://get.adobe.com/flashplayer', // Download Firefox plugin if missing.

    // Custom attributes and parameters are added like this;
    // ['someattributename','someotherattributename']
    //
    // Then add it to the settings just like the ones above were added.
    availattrs		: [], // These are the attributes we should attempt to add.
    availparams		: [], // These are the parameters we should attempt to add.

    // Version is used for flash version detection in conjunction with the express install swf value below.
    version		: '9.0.24', // Minimum Flash version
    express		: null // Path to express install swf
});

jquery.flash.js – Uncompressed
jquery.flash.min.js – Minified

jquery.flash – Who needs swfobject when you have this?

I’ve used swfobject many times before in the past, but I just don’t like it. It works well enough, but in the modern web of high-traffic web apps and Javascript frameworks that give you elegant access to DOM elements it just feels clunky having to go back to the ‘old’ way of doing things…so I decided to make jquery.flash!

Why use it? Well for starters it minifies to just over 2 KB, rather than the 10 KB of swfobject! How about automatic plugin and version detection? How about complete cross-browser compatibility? If jquery.flash isn’t a perfect fit for your flash embedding needs then you are just asking for too much. ;)

How do you use it? Just like this;

<script type="text/javascript">
$(document).ready(function(){
    $('.flash').flash({
        "src":"your_flash.swf",
        "width":100,
        "height":100,
        "vars":{"name":"value"},
        "color":"#fff",
        "quality":"high",
        "wmode":"transparent",
        "access":"domain",
        "express":"express_install.swf",
        "classid":"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
        "codebase":"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=",
        "plugin":"http://get.adobe.com/flashplayer",
        "mime":"application/x-shockwave-flash",
        "version":"9.0.24",
    });
});
</script>

All arguments are optional and will just be left out if you don’t use them unless they have a default. Everything from classid down has a default. Width and Height, when not declared, will use the current dimensions of the element that is being replaced. Flashvars are passed as a json object to ‘vars’ and are automatically serialized into a query string. If there is demand for it I may add a check to allow already made query strings to be used instead of a json object, but it wasn’t really of any importance to me.

If you have any questions feel free to ask. :)

jquery.flash.js
jquery.flash.min.js