--- layout: modules title: Mobify.js Zoomable 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>
<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>
<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>
<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>