JSFiddle - React, Tailwind, and code Playground

by Tjacke

HTML

<div id='imgDiv'><img class='re_img' src="" alt='' /></div>

<div id="magDiv"><div id="smallMagDiv" class='myClass'></div></div>   

<div class="clear">&nbsp;</div>

<div>
    <img class='thumb' src="http://www.student.bth.se/~haas13/javascript/img/apple-jack_bgr.jpg" alt='' />
    <img class='thumb' src="http://www.student.bth.se/~haas13/javascript/img/us_again.png" alt='' />
 <img class='thumb' src="http://www.student.bth.se/~haas13/javascript/img/heroes.png" alt='' />   
</div> <!-- End Flash -->

CSS

#imgDiv{
    float: left;
    position: relative;
    background: pink;
    margin: 20px;
    height: 400px
   
}
#magDiv{
    float: left;
    position: relative;
    border: 1px solid black;
    width:  400px;
    height: 400px;
    margin: 20px;
}

#smallMagDiv{
    background-repeat:no-repeat;
    position: relative;
    width:  400px;
    height: 400px;
}

.myClass
{
    background-size: 100% ;
}

.re_img{
    float: left;
    width: 400px;
}

#magnifier{
    position:absolute;
    width: 100px;
    height: 100px; 
    border: 1px solid black;
    cursor: crosshair;
}
.thumb{
    border: 1px solid black;
    background: darkgrey;
    width: 100px;
    padding: 10px;
    margin: 20px;
}
.thumb:hover{
    cursor: pointer;
}
.clear{
    clear:both;
}

JavaScript

// $(document).ready(function() {
//    'use strict';

   
    //
    // cssMagW /
    // cssMagH    - Size of DIV that contain magnified image
    // x          - is for change magnifier box
    // magFactor  - will change if you click button
    //
    //
    var x = 1, magFactor = 100, cssMagW = 400, cssMagH = 400;


    //
    // Get heigth and width from image and 
    // make its parent DIV same size.
    // $('#imgDiv') contain full image you 
    // hover the magnifier box on.
    //
    //
    
    $('#imgDiv').css('width', $(".re_img").width());
    $('#imgDiv').css('height', $(".re_img").height());


    //
    // Image shall show as magnified when hover mouse over image.
    // This will set the image as a background in the DIV, 
    // not as an object in the DIV cause the image will be pushed 
    // around in this DIV when you move the mouse. The image will 
    // be magnified and much bigger.
    //
    //
    
    $('#smallMagDiv').css('background-image', ('url(' + $('.re_img').attr('src') + ')'));


 
    //
    // Get image from thumb Gallery
    //
    //
    
    $('.thumb').bind('click', function(){
       $('.re_img').attr('src', $(this).attr('src')); 
        $('#smallMagDiv').css('background-image', ('url(' + $('.re_img').attr('src') + ')'));  
    });
 
 
    //
    // Change the magnification factor when click button.
    // You can change to more steps if you like just set
    // x = 0 on last statement.
    //
    //
    
    $('#imgDiv').bind('click', function() {
        ++x;
        if      (x === 1)   {  magFactor = 100; }
        else if (x === 2)   {  magFactor = 80;  }
        else if (x === 3)   {  magFactor = 60;  }
        else if (x === 4)   {  magFactor = 40;  x = 0; }

    // Give magnifier DIV new size
        $('#magnifier').css('width', magFactor).css('height', magFactor);   
        
    // Change size on the magnified image
        $('.myClass').css('backgroundSize', (($(".re_img").width() / magFactor) * 100) +...