function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Shubham_KumarShubham_Kumar 

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 

https://github.com/waynegm/imgNotes

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.
  
<aura:component>
    <ltng:require scripts="{!$Resource.YourStaticResourceName + '/jQueryFileName.js'}" />
</aura:component>

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

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

JS Controller: 
({
    handleAfterScriptsLoaded : function(component, event, helper) {
        jQuery("document").ready(function(){
            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!
Shubham_KumarShubham_Kumar
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')}" 
                  scripts="{!join(',',
                           $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')}"/>