<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script type="text/javascript" src="https://mark-rolich.github.io/Magnifier.js/Event.js"></script> <script type="text/javascript" src="https://mark-rolich.github.io/Magnifier.js/Magnifier.js"></script> <link rel="stylesheet" type="text/css" href="https://mark-rolich.github.io/Magnifier.js/magnifier.css"> <h1>Magnifier</h1> <div class="container"> <div class="magnifier-thumb-wrapper"> <img id="thumb" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/111_Pileated_Woodpecker.jpg/250px-111_Pileated_Woodpecker.jpg"> </div> <div class="magnifier-preview" id="preview" style="width: 268px; height: 359px">Starry Night Over The Rhone<br>by Vincent van Gogh</div> </div> <div class="col-12 copy-right text-center">© Friday, March 1, 2024 quanth</div>

h1 { text-align: center; margin: 30px 0; } .container { display: flex; justify-content: center; margin-bottom: 50px; } img, .magnifier-preview { border: 1px solid #3333; }

var evt = new Event(), m = new Magnifier(evt); m.attach({ thumb: '#thumb', large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/111_Pileated_Woodpecker.jpg/1000px-111_Pileated_Woodpecker.jpg', zoom: 3, largeWrapper: 'preview' });