lupe.php

Quell Code

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

<!------ Include the above in your HEAD tag ---------->

<!-- Submitted to feature snippets Feb 28, 2014 @ 11:00pm -->

<!--
Code:
https://github.com/marcaube/bootstrap-magnify

Images: Creative Commons License
http://www.flickr.com/photos/jingleslenobel/7191333770/sizes/l/
http://www.flickr.com/photos/adamtheo/5471091312/sizes/l/
http://www.flickr.com/photos/josh-rokman/9550963282/sizes/l/
-->
<style>
/*
Credits:
https://github.com/marcaube/bootstrap-magnify
*/

/* for validator */
a:link {
text-decoration:none;
}

.green, .green a {
color: #339900;
}


body{
background-color:#111;
color:white;
}
    
    
.col-md-12{
padding: 120px;    
}
    
.mag {
    width:450px;
    margin: 0 auto;
    float: none;
}
    
.mag img {
    max-width: 100%;
}


.mag1 {
    width:120px;
    margin: 0 auto;
    float: none;
}
    
.mag1 img {
    max-width: 100%;
}
 
.mag2 {
    width:900px;
    margin: 0 auto;
    float: none;
}
    
.mag2 img {
    max-width: 100%;
} 

.magnify {
    position: relative;
    cursor: none
}

.magnify-large {
    position: absolute;
    display: none;
    width: 500px;
    height: 500px;

    -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.55), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
       -moz-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.55), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
            box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.55), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
             border-radius: 100%
}

</style>
<script>

/*
Credits:
https://github.com/marcaube/bootstrap-magnify
*/


!function ($) {

    "use strict"; // jshint ;_;


    /* MAGNIFY PUBLIC CLASS DEFINITION
     * =============================== */

    var Magnify = function (element, options) {
        this.init('magnify', element, options)
    }

    Magnify.prototype = {

        constructor: Magnify

        , init: function (type, element, options) {
            var event = 'mousemove'
                , eventOut = 'mouseleave';

            this.type = type
            this.$element = $(element)
            this.options = this.getOptions(options)
            this.nativeWidth = 0
            this.nativeHeight = 0

            this.$element.wrap('<div class="magnify" \>');
            this.$element.parent('.magnify').append('<div class="magnify-large" \>');
            this.$element.siblings(".magnify-large").css("background","url('" + this.$element.attr("src") + "') no-repeat");

            this.$element.parent('.magnify').on(event + '.' + this.type, $.proxy(this.check, this));
            this.$element.parent('.magnify').on(eventOut + '.' + this.type, $.proxy(this.check, this));
        }

        , getOptions: function (options) {
            options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())

            if (options.delay && typeof options.delay == 'number') {
                options.delay = {
                    show: options.delay
                    , hide: options.delay
                }
            }

            return options
        }

        , check: function (e) {
            var container = $(e.currentTarget);
            var self = container.children('img');
            var mag = container.children(".magnify-large");

            // Get the native dimensions of the image
            if(!this.nativeWidth && !this.nativeHeight) {
                var image = new Image();
                image.src = self.attr("src");

                this.nativeWidth = image.width;
                this.nativeHeight = image.height;

            } else {

                var magnifyOffset = container.offset();
                var mx = e.pageX - magnifyOffset.left;
                var my = e.pageY - magnifyOffset.top;

                if (mx < container.width() && my < container.height() && mx > 0 && my > 0) {
                    mag.fadeIn(100);
                } else {
                    mag.fadeOut(100);
                }

                if(mag.is(":visible"))
                {
                    var rx = Math.round(mx/container.width()*this.nativeWidth - mag.width()/2)*-1;
                    var ry = Math.round(my/container.height()*this.nativeHeight - mag.height()/2)*-1;
                    var bgp = rx + "px " + ry + "px";

                    var px = mx - mag.width()/2;
                    var py = my - mag.height()/2;

                    mag.css({left: px, top: py, backgroundPosition: bgp});
                }
            }

        }
    }


    /* MAGNIFY PLUGIN DEFINITION
     * ========================= */

    $.fn.magnify = function ( option ) {
        return this.each(function () {
            var $this = $(this)
                , data = $this.data('magnify')
                , options = typeof option == 'object' && option
            if (!data) $this.data('tooltip', (data = new Magnify(this, options)))
            if (typeof option == 'string') data[option]()
        })
    }

    $.fn.magnify.Constructor = Magnify

    $.fn.magnify.defaults = {
        delay: 0
    }


    /* MAGNIFY DATA-API
     * ================ */

    $(window).on('load', function () {
        $('[data-toggle="magnify"]').each(function () {
            var $mag = $(this);
            $mag.magnify()
        })
    })

} ( window.jQuery );

</script>
<div class="container">
    <div class="row">
        <h3>Mr. M.'s Microscope</h3>
        <p>
         Different size images and magnification.
        <br>
        <a href="https://bootsnipp.com/iframe/dd1M" target="_blank">View Full Screen</a>
        
    </div> <!--/.row-->

    <div class="row">
        <div class="col-md-12">
            <div class="mag1">
                <img data-toggle="magnify" src="https://farm8.staticflickr.com/7291/9550963282_872a6feb2f_o.jpg" class="img-responsive img-rounded center-block" alt="">
            </div>
        </div> <!--/.cool-md-12-->
 
         <div class="col-md-12">
            <div class="mag1">
                <img data-toggle="magnify" src="https://farm9.staticflickr.com/8158/7191333770_9815024f89_k.jpg" class="img-responsive img-rounded center-block" alt="">
            </div>
        </div> <!--/.cool-md-12-->
        
         <div class="col-md-12">
            <div class="mag">
                <img data-toggle="magnify" src="https://currencyguide.eu/cad-en/polymer%2050%20canadian%20dollar%20note%20reverse.jpg" class="img-responsive center-block" alt="">
            </div>
        </div> <!--/.cool-md-12-->
        
        <div class="col-md-12">
            <div class="mag2">
            <img data-toggle="magnify" src="https://farm6.staticflickr.com/5140/5471091312_aa48134c4f_o.jpg" class="img-responsive center-block" alt="">
        </div> <!-- /mag -->

        </div> <!--/.cool-md-12-->
 
    </div><!--/.row-->

    <hr>
    <p>
    <a href="https://validator.w3.org/check?uri=http://bootsnipp.com/iframe/dd1M&ss=1"> <span class="glyphicon glyphicon-check green"></span> HTML<sup>5</sup></a>
    </p>
 </div> <!-- / .container -->