0

I need to implement dynamic zoom or a "Magnifying Glass" on an image on Lightning Component(Community). Example: https://sularome.github.io/Zoomple/

I have searched many sites and tried to implement it with Zoomple plugin for JQuery but it doesn't work for some reason.

Is there any way to do this? Do you know some JS libraries or something that can help me with it?

0

Zoomple can be integrated as other JS libraries. There is some issue in image referencing in libraries otherwise it is working as expected.

Steps to integrate:

  • Add all js file and images as zip in static resource.
  • Create lighting component using this static resource

Code: ZoomComponent.cmp

<aura:component >
      <ltng:require 
     styles="{!join(',', 
        $Resource.zoomple + '/styles.css', 
        $Resource.zoomple + '/zoomple.css')}"
       scripts="{!join(',', 
        $Resource.zoomple + '/jquery-3.3.1.min.js', $Resource.zoomple + '/jquery-migrate-1.4.1.min.js', 
        $Resource.zoomple + '/zoomple.js')}"
    afterScriptsLoaded="{!c.scriptsLoaded}" />
    <div id="wrapper">

    <div class="section section5">
        <h2>Sniper zoom (with cross) </h2> 
        <div class="section">
        <h2>Default settings</h2>
        <a href="{!$Resource.zoomple + '/DSC_8488.jpg'}" class="zoomple"><img src="{!$Resource.zoomple + '/DSC_8488.jpg'}" alt="" style="height:100px;width;100px" /> </a>
        </div>

        <a href="{!$Resource.zoomple + '/DSC_8488.jpg'}" class="zoomplecross"><img src="{!$Resource.zoomple + '/DSC_8488.jpg'}" style="height:100px;width;100px" /></a>
    </div>
</div>
</aura:component>

ZoomComponent.js controller

({
    scriptsLoaded : function(component, event, helper) {
        var blank = window.location.protocol +'//'+ window.location.host + $A.get('$Resource.zoomple') + '/blank.gif';
        var loader = window.location.protocol +'//'+ window.location.host + $A.get('$Resource.zoomple') + '/loader.gif';
        var cursor = window.location.protocol +'//'+ window.location.host + $A.get('$Resource.zoomple') + '/cursor.png';
        $(document).ready(function() {  

            var url={ 
                bgColor : '#90D5D9',
                offset : {x:-150,y:-150},
                zoomWidth : 300,  
                zoomHeight : 300,
                roundedCorners : true
            };
            url.blankURL=blank;
            url.loaderURL=loader;
            url.cursorURL=cursor;
            $('.zoomple').zoomple(url);

             var url1={ 
                bgColor : '#90D5D9',
                offset : {x:-10,y:-10},
                zoomWidth : 300,  
                zoomHeight : 300,
                roundedCorners : true
            };
            url1.blankURL=blank;
            url1.loaderURL=loader;
            url1.cursorURL=cursor;
            $('.zoomplecross').zoomple(url1); 
         }); 
    }
})
  • Thanks. In fact, it is all good with libraries, but it starts working only when I put code into a console in developer tools of browser. Also, I have tried your variant and some error throws up: "Uncaught ReferenceError: thumbPosition is not defined throws at surewerx--qa.lightning.force.com/resource/1562150272000/Zoomple/…" – Galina Rudich Jul 9 at 10:34
  • Please use files from github.com/dhaniksahni/Zommable. I have changed js files to resolve issue – Dhanik Lal Sahni Jul 9 at 11:34
  • Thanks a lot, it works! – Galina Rudich Jul 11 at 8:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.