Create a galleryOuterTpl chunk with the name "mgGalleryOuter" that has two divs side by side. The other one has [+maxigallery.pictures+] in it and the other one is empty and has a id "picHolder". Style that picHolder div to be the size of your images. For example:
[+maxigallery.managebutton+]
<div style="float:left;">[+maxigallery.pictures+]</div>
<div id="picHolder" style="float:left;width:500px;height:500px;"></div>
Then do galleryPictureTpl chunk with the name "mgGalleryPicture" and with following content:
<a href="#" onClick="showPic('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]');return false;">
[+maxigallery.picture.title:htmlent+]
</a>
Then do a js chunk "mgJs" (or external .js file) with following content:
<script type="text/javascript">
function showPic(url) {
var picHolder = document.getElementById('picHolder');
picHolder.style.backgroundImage="url("+url+")";
}
</script>
Then in your snippet call, use &galleryOuterTpl=`mgGalleryOuter` &galleryPictureTpl=`mgGalleryPicture` &js=`mgJs` parameters. You may need to work on that css some more. If you want to make links to some full size images, then modify that javascript to print some link that links to the full size image.. eg. add one parameter to the showPic function that is [(base_url)][+maxigallery.path_to_gal+]big_[+maxigallery.picture.filename+] and build the link from that.
To not limit the size of the images, use zero for the max size parameter(s). You can for example have the middle size scaled and have the big one be in original size.
