jQuery film

by mmarcon

HTML

<ul class="gallery">
    <li>
        <img src="http://farm7.static.flickr.com/6001/5940188328_80bc342a2b_d.jpg"/>
    </li>
    <li>
        <img src="http://farm7.static.flickr.com/6136/5940195260_8ce5674c74_d.jpg"/>
    </li>
    <li>
        <img src="http://farm7.static.flickr.com/6030/5939637131_ef19ee60be_d.jpg"/>
    </li>
     <li>
        <img src="http://farm7.static.flickr.com/6021/5940191232_576b56cc0a_d.jpg"/>
    </li>
     <li>
        <img src="http://farm7.static.flickr.com/6026/5939635653_9fb4fd6ba3_d.jpg"/>
    </li>
</ul>

CSS

body {
    background-color: #4badde;
    font-family: helvetica, arial, sans-serif;
    font-weight: 100;
}



.film-target {
    width: 200px;
    height: 150px;
    overflow: hidden;
    position: relative;
    margin: 3px 0;
    display: block;
    border: 1px solid #000;
    border-radius: 6px;
}

.film-content {
    position: absolute;
    top: -20px;
    left: -25px;
    display: block;
}

.film-wrapper {
    background-color: #000;
    padding: 4px 20px;
    width: 200px;
    position: relative;
    margin: auto;
}

.h-left, .h-right {
    background-color: #4badde;
    position: absolute;
    z-index: 5000;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.h-left {
    left: 4px;
}

.h-right {
    right: 4px;
}

JavaScript

(function($) {
    var settings = {
        colored: true,
        color: '#f4a460'
    },
        methods = {
            init: function(options) {
                if (options) {
                    $.extend(settings, options);
                }
                return this.each(function() {
                    var obj = $(this),
                        n, i;
                    obj.addClass('film-wrapper');
                    obj.children().addClass('film-target');
                    obj.children().children().width(250).addClass('film-content');
                    n = Math.floor((obj.height() - 10) / 13);
                    for (i = 0; i <= n + 1; i++) {
                        $('<span/>').addClass('h-left').css('top', i * 13 + 4 + 'px').appendTo(obj);
                        $('<span/>').addClass('h-right').css('top', i * 13 + 4 + 'px').appendTo(obj);
                    }
                    if (settings.colored) {
                        $('<span/>').addClass('sepia').css({
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            display: 'block',
                            background: settings.color
                        }).fadeTo(0, 0.3).appendTo(obj);
                    }
                });
            }
        };

    $.fn.film = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.film');
        }
    };
})(jQuery);

$('.gallery').film({
    colored: true,
    color: '#111'
});