Cacher is the code snippet organizer for pro developers

/* Element wrapper */
.sp-wrap {
    display:none;
    line-height:0;
    font-size:0;
    position:relative;
    margin:0 auto 20px auto;
    width:100%;
    /**************
      Set max-width to your thumbnail width
    ***************/
    max-width: 450px;
}

/* Thumbnails */
.sp-thumbs {
    text-align:left;
    display:inline-block;
}
.sp-thumbs a{
    width:60px;
    height:60px;
    border:1px solid @lines;
    margin:10px 10px 0 0;
    vertical-align:top;
    padding:5px;
    text-align:center;
}
.sp-thumbs img {
    max-width:100%;
    max-height:100%;
}
.sp-thumbs a:link, .sp-thumbs a:visited {
    opacity:.4;
    display:inline-block;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.sp-thumbs a:hover{
    opacity:1;
}
.sp-thumbs a:active, .sp-current {
    opacity:1!important;
    position: relative;
}
/*.sp-current:after {
    content:'';
    border:6px solid transparent;
    border-top:6px solid #F0353A;
    position: absolute;
    left:50%;
    top:0;
    margin-left:-6px;
}*/

/* Unzoomed, big thumbnail */
.sp-large {
    position:relative;
    overflow:hidden;
    top:0;
    left:0;
    text-align:center;
}
.sp-large a img {
    max-width:100%;
    height:auto;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
}
.sp-large a {
    display:inline-block;
}

/* Panning Zoomed Image */
.sp-zoom {
    position:absolute;
    left:0;
    top:0;
    cursor:zoom;
    cursor: -webkit-zoom-out;
    cursor: -moz-zoom-out;
    display:none;
}

/* Button to go full size */
.sp-full-screen {
    position: absolute;
    z-index: 1;
    display: block;
    right: 0;
    top: 0;
    font-size: 17px;
    line-height: 17px;
    font-weight:bold;
    width: 25px;
    height: 25px;
    background: url('/img/zoom.gif') no-repeat center center;

}

.sp-full-screen a:link,
.sp-full-screen a:visited {
    text-indent:-9999px;
    background: none;
    color: #fff;
    font-size: 20px;
    width: 25px;
    height: 25px;
    text-decoration: none;
    text-align: center;
    display: block;
}

/* Lightbox */
.sp-lightbox {
    position: fixed;
    top:0;
    left:0;
    height: 100%;
    width:100%;
    background:rgb(0,0,0);
    background:rgba(0,0,0,.8);
    z-index: 999;
    display: none;
}
.sp-lightbox img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
}

/*
 * Smoothproducts
 * http://kthornbloom.com/smoothproducts.php
 *
 * Copyright 2013, Kevin Thornbloom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

(function ($) {
    $.fn.extend({
        smoothproducts: function () {


            var slideTiming = 300

            // Add some markup & set some CSS
            $('.sp-wrap').append('<div class="sp-large"></div><div class="sp-thumbs sp-tb-active"></div>');

            $('.sp-wrap').each(function () {
                $('a', this).appendTo($('.sp-thumbs', this));
                $('.sp-thumbs a:first', this).addClass('sp-current').clone().removeClass('sp-current').appendTo($('.sp-large', this)).addClass('sp-current-big');
                $('.sp-wrap').css({
                    display: 'inline-block'
                });
            });

            // Prevent clicking while things are happening
            $(document.body).on('click', '.sp-thumbs', function (event) {
                event.preventDefault();
            });

            // Clicking a thumbnail
            $(document.body).on('click', '.sp-tb-active a', function (event) {
                $(this).parent().find('.sp-current').removeClass();
                $(this).parent().parent().find('.sp-thumbs').removeClass('sp-tb-active');
                $(this).parent().parent().find('.sp-zoom').remove();
                $(this).parent().parent().find('.sp-full-screen').fadeOut(function () {
                    $(this).remove();
                });

                var currentHeight = $(this).parent().parent().find('.sp-large').height(),
                    currentWidth = $(this).parent().parent().find('.sp-large').width();
                $(this).parent().parent().find('.sp-large').css({
                    overflow: 'hidden',
                    height: currentHeight + 'px',
                    width: currentWidth + 'px'
                });

                $(this).parent().parent().find('.sp-large a').remove();
                $(this).addClass('sp-current').clone().hide().removeClass('sp-current').appendTo($(this).parent().parent().find('.sp-large')).addClass('sp-current-big').fadeIn(slideTiming, function () {

                    var autoHeight = $(this).parent().parent().find('.sp-large img').height();

                    $(this).parent().parent().find('.sp-large').animate({
                        height: autoHeight
                    }, 'fast', function () {
                        $('.sp-large').css({
                            height: 'auto',
                            width: 'auto'
                        });
                    });

                    $(this).parent().parent().find('.sp-thumbs').addClass('sp-tb-active');
                });
                $(this).blur();
                event.preventDefault();
            });

            // Zoom In
            $(document.body).on('click', '.sp-large a', function (event) {
                var largeUrl = $(this).attr('href');
                $(this).parent().parent().find('.sp-large').append('<div class="sp-zoom"><img src="' + largeUrl + '"/></div>');
                $(this).parent().parent().find('.sp-zoom').fadeIn();
                $(this).parent().parent().find(".sp-zoom").draggable();
                $(this).parent().parent().prepend('<div class="sp-full-screen"><a href="#">↕</a></div>');
                event.preventDefault();
            });

            // Open in Lightbox
            $(document.body).on('click', '.sp-full-screen', function (event) {
                if(typeof $.fancybox == 'function') {
                    $.fancybox($('.sp-tb-active a'), { 'closeClick': true, 'type': 'image', 'index': $('.sp-current').index() });
                } else {
                    var currentImg = $(this).parent().find('.sp-large .sp-zoom').html();
                    $('body').append("<div class='sp-lightbox'>" + currentImg + "</div>");
                    $('.sp-lightbox').fadeIn();
                }

            });
            if (typeof $.fancybox == 'function') {
            }else{
                //Close Lightbox
                $(document.body).on('click', '.sp-lightbox', function (event) {
                    $(this).fadeOut(function () {
                        $(this).remove();
                    })
                });

                $(document).keydown(function (e) {
                    if (e.keyCode == 27) {
                        $('.sp-lightbox').fadeOut(function () {
                            $(this).remove();
                        })
                        return false;
                    }
                });
            }

            // Panning zoomed PC

            $('.sp-large').mousemove(function (e) {
                var viewWidth = $(this).width(),
                    viewHeight = $(this).height(),
                    largeWidth = $(this).find('.sp-zoom').width(),
                    largeHeight = $(this).find('.sp-zoom').height(),
                    parentOffset = $(this).parent().offset(),
                    relativeXPosition = (e.pageX - parentOffset.left),
                    relativeYPosition = (e.pageY - parentOffset.top),
                    moveX = Math.floor((relativeXPosition * (viewWidth - largeWidth) / viewWidth)),
                    moveY = Math.floor((relativeYPosition * (viewHeight - largeHeight) / viewHeight));

                $(this).find('.sp-zoom').css({
                    left: moveX,
                    top: moveY
                });

            }).mouseout(function () {
                // Pause Panning
            });

            // Panning zoomed Mobile - inspired by http://popdevelop.com/2010/08/touching-the-web/

            $.fn.draggable = function () {
                var offset = null;
                var start = function (e) {
                    var orig = e.originalEvent;
                    var pos = $(this).position();
                    offset = {
                        x: orig.changedTouches[0].pageX - pos.left,
                        y: orig.changedTouches[0].pageY - pos.top
                    };
                };
                var moveMe = function (e) {
                    e.preventDefault();
                    var orig = e.originalEvent,
                        newY = orig.changedTouches[0].pageY - offset.y,
                        newX = orig.changedTouches[0].pageX - offset.x,
                        maxY = (($('.sp-zoom').height()) - ($('.sp-large').height())) * -1,
                        maxX = (($('.sp-zoom').width()) - ($('.sp-large').width())) * -1;
                    if (newY > maxY && 0 > newY) {
                        $(this).css({
                            top: newY
                        });
                    }
                    if (newX > maxX && 0 > newX) {
                        $(this).css({
                            left: newX
                        });
                    }
                };
                this.bind("touchstart", start);
                this.bind("touchmove", moveMe);
            };

            // Zoom Out
            $(document.body).on('click', '.sp-zoom', function (event) {
                $(this).parent().parent().find('.sp-full-screen').fadeOut(function () {
                    $(this).remove();
                });
                $(this).fadeOut(function () {
                    $(this).remove();
                });
            });

        }
    });
})(jQuery);