Give Your Gallery Some Old Fashion Static Noise

As old times slowly fade away, everybody seems to forget classic markings of previous eras. How many of you still remember those old television sets where every change of channel was accompanied with that everlasting  static noise? I reckon small percentage, as modern kids are used to new technology where this stuff was polished out. So, for old times sake, lets make a small jQuery gallery plugin which will mimic that behavior with every slide change, and where slides can contain anything from images, to any other content. But, no fancy controls. Just a basic wrapper that hooks up on parent container and transforms it into a one slide at the time gallery, with optional slide interval and static noise duration.

And before I present you with the actual code, which is very simple at the moment, I need to say at this point that everything I am doing here at jQueryFun, is very much open to any type of ideas, suggestions, and criticism. So, don’t hesitate to do just that. For instance if you need more control over this plugin, just say it. Maybe you have an idea for a plugin, but you don’t know how to make it? Please, don’t hesitate to share it so I can help you make it. Don’t like the code style? Shoot arguments and make me ashamed of my own code. After all, we are all here to learn, and benefit from that new knowledge. Someone will just use the code, and someone will analyze it and make something new and better. But, lets stop here before this goes too deep.

OK, with that monologue out of the way, here is the actual code for the gallery plugin:

/*!
 * JQFTVGallery
 * http://www.jqueryfun.com/
 */
(function($) {
    // JQF TV Gallery
    $.fn.JQFTVGallery = function(options) {
        // Defaults
        var defaults = {
            staticImg: 'static.gif',
            interval: 10000,
            duration: 200
        };
        // Extend options
        var options = $.extend(defaults, options);
        // Loop each instance
        return this.each(function() {
            // Instance
            var instance = $(this);
            // Insert static object
            instance.children(':last').clone().appendTo(instance).html('<div style="display: block; background: url(' + options.staticImg + ');"></div>');
            // Hide everything below first slide
            $(this).children().not(':eq(0)').hide();
            // Set interval
            setInterval(function() {
                // Current slide
                var currentSlide = instance.children(':visible');
                // Next slide
                var nextSlide = currentSlide.next(':not(:last-child)');
                if(!nextSlide.length) nextSlide = instance.children(':first');
                // Static slide
                var staticSlide = instance.children(':last');
                // Adjust width & height of static slide
                staticSlide.children(':first').css({width: currentSlide.width() + 'px', height: currentSlide.height() + 'px'});
                // Do the switch
                currentSlide.hide();
                staticSlide.show();
                setTimeout(function() {
                    staticSlide.hide();
                    nextSlide.show();
                }, options.duration);
            }, options.interval);
        });
    }
})(jQuery);

Plugin pretty much takes the last child of parent container, clones it, and makes another hidden element with static noise as background. Actual usage is very simple and all you need to do is to hook up the plugin on parent container and optionally specify slide interval, static duration, and static image location if it was moved somewhere else.

$('selector').JQFTVGallery();
$('selector').JQFTVGallery({interval: 5000, duration: 150});

Second line would make slides stay for five seconds and static noise for less than a second.

For those of you who don’t believe until you see, here is a tailored demo page where you can see JQFTVGallery in action.

For those of you who actually need this, use the download link below to obtain your copy of the zipped archive which contains JQFTVGallery plugin file, animated static noise GIF file, and previously mentioned demo page.

Download JQFTVGallery.zip