AnythingZoomer 2.0 playground

Add, remove, adjust any or all options so you can see how it works.

by mamounothman

HTML

<link rel="stylesheet" href="https://css-tricks.github.io/AnythingZoomer/css/anythingzoomer.css">
<script src="https://css-tricks.github.io/AnythingZoomer/js/jquery.anythingzoomer.js"></script>
<p><strong>Text Demo</strong></p>

<br>

<div id="zoom2">

  <div class="small">
    <canvas class="myCanvas"></canvas>
  </div>

  <div class="large">
  <canvas class="myCanvas"></canvas>
    
  </div>

</div>

CSS

/* Text Demo */
.large p {
  width: 600px;
  font-size: 16px;
}

.small p {
  width: 300px;
  font-size: 8px;
}

/* Image Demo */
.large img {
  width: 500px;
  height: 333px;
}

.small img {
  width: 225px;
  height: 150px;
}

/* Dark overlay - set overlay option
 to true to see this style */
.az-overlay {
  background-color: #000;
  opacity: 0.3;
  filter: alpha(opacity=30);
  z-index: 10;
}
/* make zoom window round 
  default zoom window size is 110px,
  set the border-radius to half */
.az-zoom {
  border-radius: 5px; /* 55px; */
}

/* fade out small content when hovering
.az-hovered > * {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
*/

.large {
  background: #fff;
}

.zoom {
  display: block;
  margin: 0 auto;
  background: red;
}

body {
  margin: 100px;
}

JavaScript

/* 
 Demo for jQuery AnythingZoomer Plugin
 https://github.com/CSS-Tricks/AnythingZoomer
 */
$(function() {


  var canvas = document.getElementsByClassName('myCanvas')[0];
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;


  var background = new Image();
  background.src = "https://www.yourpurebredpuppy.com/dogbreeds/photos2-G/german-shepherd-05.jpg";

  // Make sure the image is loaded first otherwise nothing will draw.
  background.onload = function(){
    context.drawImage(background,0,0);
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'green';
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = '#003300';
    context.stroke();
  }
  
  
  var canvas2 = document.getElementsByClassName('myCanvas')[1];
  var background2 = new Image();
  background2.src = "https://www.yourpurebredpuppy.com/dogbreeds/photos2-G/german-shepherd-05.jpg";
  var context2 = canvas2.getContext('2d');
  var centerX2 = canvas2.width / 2;
  var centerY2 = canvas2.height / 2;
  var radius2 = 70;
  
  
  background2.onload = function(){
    context2.drawImage(background2,0,0);
    context2.beginPath();
    context2.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false);
    context2.fillStyle = 'green';
    context2.fill();
    context2.lineWidth = 5;
    context2.strokeStyle = '#003300';
    context2.stroke();
  }


  $("#zoom1").anythingZoomer({

    // ***************** content areas *****************
    // class of small content area; the element with this class
    // name must be inside of the wrapper
    smallArea: 'small',

    // class of large content area; this class must exist inside
    // of the wrapper. When the clone option is true, it will add
    // this automatically
    largeArea: 'large',

    // Make a clone of the small content area, use css to modify
    // the style; default is false;
    // set to...