JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="imagengrande">
		    <img src="http://mleemonkey.files.wordpress.com/2008/02/halo-wars-20061006114940683.jpg" alt=""/>
		</div>
		<div class="imagenespequnias">
		    <img src="http://mleemonkey.files.wordpress.com/2008/02/halo-wars-20061006114940683.jpg" alt=""/>
		    <img src="http://www.halothemovie.org/wallpapers/halo4.jpg" alt=""/>
		    <img src="http://www.kadana.com/kadana/img/halo/halo%20(3).jpg" alt=""/>
		    <img src="http://img1.meristation.com/files/imagenes/juegos/xbx/action/halo/halo31.jpg" alt=""/>
		</div>

CSS

.imagengrande{width:300px; height:300px; margin: 0 auto;
			    display:block; overflow:hidden; border:2px solid blue;}
.imagengrande img{width:295px; height:295px;}

.imagenespequnias img{width:50px; height:50px; border:2px solid green;
			  float:left; margin:5px;}

JavaScript

$(document).ready(function(){
    $(".imagengrande img").imageLens({ lensSize: 200 });
    $('.imagenespequnias img').click(function(){
        var valor = $(this).attr("src");
        $('.imagengrande img').fadeOut(function(){
            $(this).attr('src', valor).fadeIn();
        });
        $(".imagengrande img").imageLens({ lensSize: 200 });
    });
});

;(function($, undefined) {

    // This can be replaced by Modernizr, which is probably better :)
    $.support.borderRadius = (function(){
        var b = 'WebkitBorderRadius MozBorderRadius KhtmlBorderRadius borderRadius'.split(' '),
            body = document.body || document.documentElement,
            j = b.length;
        while (j--) {
            if (body.style[b[j]] !== undefined) {
                return true;
            }
        }
        return false;
    })();

    $.fn.imageLens = function() {
        var options = $.extend({
                lensSize : 100,
                borderSize : 4,
                borderColor : '#888'
            }, arguments[0] || {}),
            css = {
                'border-radius' : options.lensSize,
                'border' : options.borderSize + 'px solid ' + options.borderColor,
                'position' : 'absolute',
                'width' : options.lensSize,
                'height' : options.lensSize,
                'z-index' : 999,
                'background-color' : '#fff',
                'background-repeat' : 'no-repeat',
                'background-image' : 'url('+options.imageSrc+')'
            },
            parentCss = {
                'position' : 'relative',
                'display' : 'inline-block'
            },
            VMLNS = 'v',
            useVML = !$.support.borderRadius && $.browser.msie === true;
        if (useVML) { // no border radius, and this is IE, use VML for the roundness
            var e = ["shape", "shapetype", "group", "background", "path", "formulas", "handles", "fill", "stroke", "shadow", "textbox",...