jQuery tiny 'imageViewer'

Author: Md. Golam Kibria

HTML

<div class="imageUtilCnt">
    <div class='imageToolbar'>
        <div class='imageTool' id='fitContainer'>
            <img src="" alt='F' title='Resize image to fit container.' />
        </div>
        <div class='imageTool' id='originalSize'>
            <img src="" alt='O' title='Resize image to original.' />
        </div>
        <div class='imageTool' id='decreaseZoom'>
            <img src="" alt='-' title='Zoom Out.' />
        </div>
        <div class='imageTool' id='imcreaseZoom'>
            <img src="" alt='+' title='Zoom In.' />
        </div>      
    </div>
    
    <div id="ImagePnl" class="imagePnl">
        <img src="http://boulangerieyong.10p90n1.ovh/wp-content/uploads/2018/05/map-indication-boulangerie-yong-2000x1495.jpg"  alt="img"
        class='workItemImage' />
    </div>
    
</div>

CSS

.imageUtilCnt
{
    width: 90%;
    margin: 5px auto;    
}
div.imagePnl 
{
    border: solid 1px #dcdcdc;
    padding: 5px;
    margin: auto;
    position: relative;
    overflow: auto;  
    }
    
 div.ImagePnl .workItemImage
 {     
    position: relative;
    border: dashed 1px #dcdcdc;
    margin: 3px;
     }
div.imageToolbar
{
    position: relative;
    overflow: hidden;
    margin-bottom: 7px;
    padding: 3px 10px;
    border: dashed 1px #dfdfdf;
    }
div.imageToolbar div.imageTool
 {
     position: relative;
     float: left;    
     cursor: pointer;
     margin-right: 5px;     
     }
     
div.imageToolbar div.imageTool img
{
    position: relative;
     width: 22px;
     height: 22px;
     border: solid 1px #dfdfdf;
     padding: 1px;
   }
div.imageToolbar div.imageTool img:hover
{
    border-color: Orange;
    }
div.imageToolbar div.divider
{
    width: 1px;
    background-color: Gray;
    height: 100%;
    margin: 2px 3px;
    }

JavaScript

/*
Author: Md. Golam Kibria
*/
(function ($) {

    var containerRatio = 0.98;
    if ($.browser.mozilla)
        containerRatio = 0.95;
        
    var zoomChangeStepSize = 10;//percent

    var $imageUtil = {
        imageToolInit: function ($imageUtilCnt) {

            var $imgPnl = $imageUtilCnt.find('.imagePnl');

            if ($imgPnl.size() == 0) {
                var html = $imageUtilCnt.html();
                alert('imageToolInit(size):' + $imageUtilCnt.attr('count') + html);
                return;
            }

            var isInit = $imgPnl.attr('imgPnlInit');

            if (isInit == undefined || isInit == null)
                $imgPnl.attr('imgPnlInit', 1);
            else if (parseInt(isInit, 10) >= 1)
                return;

            var $workItemImage = $imgPnl.find('img.workItemImage');

            $imgPnl.css('overflow', 'hidden');
            $workItemImage.fadeOut(0);

            //            $imgPnl.imagesLoaded(function () {
            //                $imageUtil.imageToolInitInner($imageUtilCnt);
            //            });

            $workItemImage.one('load', function () {
                $imageUtil.imageToolInitInner($imageUtilCnt);
            });

//            $imageUtil.imageToolInitInner($imageUtilCnt);

            $workItemImage.each(function () {
                if (this.complete)
                    $(this).trigger('load');
            });
        }, //imageToolInit

        imageToolInitInner: function ($imageUtilCnt) {//After Image Loaded

            var $imgPnl = $imageUtilCnt.find('.imagePnl');            

            if (parseInt($imgPnl.attr('toolInit'), 10) >= 1)
                return;
            else
                $imgPnl.attr('toolInit', 1);
                
            $imgPnl.css('overflow', 'auto');

            var $workItemImage = $imgPnl.find('img.workItemImage');

            var imageOrgSize = { W: 0, H: 0 };
            imageOrgSize.W = $workItemImage.width();
           ...