Show a smaller image (logo) on top of the preview image?

[ItsDanielHarris]

How would you show a smaller image on top of the preview image after zooming in? Would I need to programmatically combine them first into a single image before showing it?

[jackmoore]

It depends if you want the logo in a static location, or if you want it to get zoomed / panned. If it's just a static location, you should be able to use regular CSS and control the behavior with :hover and z-index. Any z-index above 0 should work, because Zoom just relies on DOM order for stacking (no z-index).

In the demo (demo.html in the repo, or at http://www.jacklmoore.com/zoom/), the magnifying glass icon in the top-right corner is handled as described above. Here's the CSS:

/* magnifying glass icon */
.zoom:after {
	content:'';
	display:block; 
	width:33px; 
	height:33px; 
	position:absolute; 
	top:0;
	right:0;
	background:url(icon.png);
}

If you are zooming using hover, then you'd just add the :hover to the style:

.zoom:hover:after {
	content:'';
	display:block; 
	width:33px; 
	height:33px; 
	position:absolute; 
	top:0;
	right:0;
	background:url(icon.png);
}

If you were using Zoom with mouse events, then you'd have to use JavaScript to listen for this events. Here is an example:

<style>
.grab:after {
	content:'';
	display:block; 
	width:33px; 
	height:33px; 
	position:absolute; 
	top:0;
	right:0;
	background:url(icon.png);
}
</style>
<script>
$('.zoom').on('mousedown', function(){
	$(this).addClass('grab')
}).on('mouseup', function(){
	$(this).removeClass('grab')
})
</script>

If you wanted the logo to be zoomed and able to follow the image around, then they would have to be combined due to the limitations of Zoom. The plugin isn't sophisticated enough to handle an additional layer or multiple backgrounds.