+ Start a Discussion

Hi Eveyone, Can anybody help me with imageNotes plugin in Lightning component. I am not able to add a note on clicking the image.

AnudeepAnudeep (Salesforce Developers) 
I believe you are referring to imgNotes jquery plugin 


To use jQuery in Salesforce Lightning Aura Component, you need to follow the below steps  

Step 1: Upload the jQuery library as a static resource in your Org.

Step 2: Use ltng:require to load static resource JavaScript libraries on your component.
    <ltng:require scripts="{!$Resource.YourStaticResourceName + '/jQueryFileName.js'}" />

Step 3: To utilize the library include the afterScriptsLoaded event and add the method in your aura component JS controller.

Aura Component :
    <ltng:require scripts="{!$Resource.YourStaticResourceName + '/jQueryFileName.js'}" afterScriptsLoaded="{!c.handleAfterScriptsLoaded}" />

JS Controller:
    handleAfterScriptsLoaded : function(component, event, helper) {
            console.log('jQuery Loaded');

Let me know if this helps, if it does, please close the query by marking it as solved. It may help others in the community. Thank You!
Hi Anudeep
I have already done all this but for some reason i cannot add the note on clicking the image. So I wanted to know why is this happening because i seem to have done everything correct and i can even use the methods of the plugin.
I just cannot add the note to image or perform any responsive action.
<ltng:require styles="{!join(',', 
                          $Resource.JqueryF + '/jquery-ui/jquery-ui.css',
                          $Resource.JQuery_Image_Notes_Plugin + '/imgNotes-master/css/marker.css',
                          $Resource.ImageNotes2 + '/imgNotes-master/docs/lib/imgNotes.css')}" 
                           $Resource.JqueryF + '/jquery.min.js',                              
                           $Resource.JqueryF + '/jquery-ui/jquery-ui.min.js', 
                           $Resource.ImageNotes2 + '/imgNotes-master/docs/lib/hammer.min.js',
                           $Resource.JqueryHammer + '/jquery.hammer.js-master/jquery.hammer.js',
                           $Resource.JqueryMouseWheel + '/jquery-mousewheel-master/jquery.mousewheel.min.js',
                           $Resource.ImageNotes2 + '/imgNotes-master/docs/lib/imgViewer.js',
                           $Resource.ImageNotes2 + '/imgNotes-master/docs/lib/imgNotes.js')}"/>