Embedly jQuery

Display, Resize, Crop, Fill

Easily use Embedly Display to proxy, resize, crop, fill any photo on your site to meet your screen size or design needs.

Example 1: Display/Proxy Image

Lets take a look at the original image proxied through our Display endpoint. This is the simplest endpoint, also available with SSL support.

Throw on your cap and gown its graduation time!

I really should have shaved before. 

<p>
  Throw on your cap and gown its graduation time!!</p>
<p>
  <img data-src="http://images.ak.instagram.com/media/2011/06/05/1fdb445e224d459f97ff128b663045f9_7.jpg"/>
</p>
<p>
  I really should have shaved before.
</p>
<script type="text/javascript">
  $.embedly.defaults.key = 'Your Embedly Key';
  $('.example-1 .example-inline img').display();
</script>

Example 2: Crop

Lets crop the image to 100x100 on load. Cropping this image will maintain the aspect ratio and center it.

Throw on your cap and gown its graduation time!

I really should have shaved before. 

<p>
  Throw on your cap and gown its graduation time!!</p>
<p>
  <img data-src="http://images.ak.instagram.com/media/2011/06/05/1fdb445e224d459f97ff128b663045f9_7.jpg"/>
</p>
<p>
  I really should have shaved before.
</p>
<script type="text/javascript">
  $.embedly.defaults.key = 'Your Embedly Key';
  $('.example-2 .example-inline img').display('crop', {
    query: {
     width:100,
     height:100,
     grow:true
    }
  });
</script>

Example 3: Click to Resize

Lets show the original photo and click to resize to a width of 300px. This endpoint will automatically scale the image to maintain quality.

Throw on your cap and gown its graduation time!

I really should have shaved before. 

$.embedly.defaults.key = 'Your Embedly Key';
$('.example-3 button').on('click', function(){
  var $button = $(this);
  $('.example-2 .example-inline img').display('resize', {
    query: {
     width:300,
     grow:true }
  });
});
a

Example 4: Click to Fill

Lets show the original photo and click resize image and center on a blue canvas.

Throw on your cap and gown its graduation time!

I really should have shaved before. 

$.embedly.defaults.key 'Your Embedly Key';
$('.example-4 button').on('click', function(){
  var $button = $(this);
  $('.example-3 .example-inline img').display('fill', {
    query: {
     width:400,
     height:300,
     color: '2BA6CB',
     grow:true }
  });
});