stackoverflow.com/q/20250512/1055987

Answer to http://stackoverflow.com/q/20250512/1055987 by http://stackoverflow.com/users/1055987/jfk

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div class="slide-out-div">
    <div class="handle" style="background: url('http://www.3d-flightcases.co.uk/assets/images/buttons/construction.png') no-repeat scroll 0% 0% transparent; width: 40px; height: 500px; display: block; text-indent: -99999px; outline: medium none; position: absolute; top: 0px; right: -40px;"></div>
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

</div>

CSS

.handle, .handleIndex {
    cursor: pointer;
    margin-top: 20px;
    z-index: 500;
}

JavaScript

/*
tabSlideOUt v1.3
By William Paoli: http://wpaoli.building58.com
 */
(function ($) {
    $.fn.tabSlideOut = function (callerSettings) {
        var settings = $.extend({
                tabHandle : '.handle',
                speed : 300,
                action : 'click',
                tabLocation : 'left',
                topPos : '200px',
                leftPos : '20px',
                fixedPosition : false,
                positioning : 'absolute',
                pathToTabImage : null,
                imageHeight : null,
                imageWidth : null,
                onLoadSlideOut : false,
                fancyCallback : function () {}
                // new setting: custom fancybox callback by picssel
            }, callerSettings || {});
        settings.tabHandle = $(settings.tabHandle);
        var obj = this;
        if (settings.fixedPosition === true) {
            settings.positioning = 'fixed';
        } else {
            settings.positioning = 'absolute';
        }
        //ie6 doesn't do well with the fixed option
        if (document.all && !window.opera && !window.XMLHttpRequest) {
            settings.positioning = 'absolute';
        }
        //set initial tabHandle css
        if (settings.pathToTabImage != null) {
            settings.tabHandle.css({
                'background' : 'url(' + settings.pathToTabImage + ') no-repeat',
                'width' : settings.imageWidth,
                'height' : settings.imageHeight
            });
        }
        settings.tabHandle.css({
            'display' : 'block',
            'textIndent' : '-99999px',
            'outline' : 'none',
            'position' : 'absolute'
        });
        obj.css({
            'line-height' : '1',
            'position' : settings.positioning
        });
        var properties = {
            containerWidth : parseInt(obj.outerWidth(), 10) + 'px',
            containerHeight : parseInt(obj.outerHeight(), 10) + 'px',
            tabWidth :...