Bootstrap Snippet Image Magnifier using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    
    <div class="row mrgntop">
    
        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="mag">
                
                <img data-toggle="magnify" class="img-responsive" 
                src="http://lorempixel.com/1000/1000/food/1/" alt="">
            </div>
        </div><!--/span-->
        
        
        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="mag">
               
                <img data-toggle="magnify" class="img-responsive"
                 src="http://lorempixel.com/1000/1000/food/2/" alt="">
            </div>
        </div><!--/span-->
        
        <div class="col-md-3 col-sm-4 col-xs-6">
            <div class="mag">
                
                <img data-toggle="magnify" class="img-responsive"
                src="http://lorempixel.com/1000/1000/food/3/" alt="">
            </div>
        </div><!--/span-->
        
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
Image Magnifier
by: http://hkmbhutto.wix.com/abdulrasheed
*/
.mrgntop{
            margin-top:20px;
        }
.mag {
    //width:200px;
    margin: 0 auto;
    float: none;
}
    
.mag img {
    max-width: 100%;
}
        
  
.magnify {
    position: relative;
    cursor: none
}
.magnify-large {
    position: absolute;
    display: none;
    width: 300px;
    height: 300px;
    z-index:999999;
   
    
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
!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) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Image Magnifier"
Bootstrap 3.3.0 Snippet by rasheedbhutto

Related: See More

Questions / Comments:

"Image Magnifier" Bootstrap 3.3.0 Snippet by rasheedbhutto

Related: See More

Questions / Comments:

"Image Magnifier"
Bootstrap 3.3.0 Snippet by rasheedbhutto