--- layout: modules title: Mobify.js Zoomable Example ---

Basic zoomable

Code for this example:

<a class="z1" href="{{ site.baseurl }}/static/img/modules/zoom_big.jpg"><img src="{{ site.baseurl }}/static/img/modules/zoom_thumb.jpg"></a>
<script>$('a.z1').zoomable();</script>

With a textual 'zoom in' link and closing only via Close button

Zoom in

Code for this example:

<a class="z2" href="{{ site.baseurl }}/static/img/modules/zoom_big.jpg"><img src="{{ site.baseurl }}/static/img/modules/zoom_thumb.jpg">Zoom in</a>
<script>
$('a.z2').zoomable({
	clickCloses: false,
	stageHTML: function() {
		return Mobify.UI.Zoomable.defaults.stageHTML.call(this) + '<div class="m-close corner">Close</div>';
	}
});
</script>

Messaging upon opening

Code for this example:

<a class="z3" href="{{ site.baseurl }}/static/img/modules/zoom_big.jpg"><img src="{{ site.baseurl }}/static/img/modules/zoom_thumb.jpg"></a>
<script>
$('a.z3').zoomable({
	stageHTML: function() {
	  return Mobify.UI.Zoomable.defaults.stageHTML.call(this)
	      + '<div class="zoomable-notice m-close">Tap anywhere to close. On touchscreen device, drag to navigate</div>';
	}
}).bind('afterOpen.zoomable', function() {
  $('.zoomable-notice').addClass('zoomable-notice-fade');
}).bind('beforeClose.zoomable', function() {
  $('.zoomable-notice').removeClass('zoomable-notice-fade');
});
</script>

Limiting zoomable to a container

Code for this example:

<a class="z4" href="{{ site.baseurl }}/static/img/modules/zoom_big.jpg"><img src="{{ site.baseurl }}/static/img/modules/zoom_thumb.jpg"></a>
<div class="z4-wrap"></div>
<script>
	$('a.z4').zoomable({stage: '.z4-wrap'});
</script>