how to run external js plugin function in AEM

Question

how to run a java script function which belongs to an external plugin after the DOM gets loaded in adobe Experience Manager ? currently it run in console but not on local file.

Answer 1

Please have a look at this Adobe Helpx Articles:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html

//Creating Custom Carousel components for Adobe Experience Manager It covers, how to use third party Javascript/JQuery plugins in AEM components.

[From Article] Add the JQuery Carousel API to a CQ:ClientLibraryFolder node

You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.

In addition to the JQuery framework file, add the JQuery Carousel API library. This library enables you to create a CQ widget that retrieves images from the CQ DAM and displays the images within a carousel.

You can download the Carousel API library from the following URL:

http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/

You need to retrieve the following JS file from the downloaded file: jquery.infinitecarousel.js. To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.

To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.

Name Type Value dependencies String[] cq.jquery
categories String[] jquerysamples
The dependencies property informs CQ to include the CSS files and JQuery libraries in the page. The categories property informs CQ which clientlibs must be included.

After you create the Clientlibs folder, add the stlye.css file, the JQuery library files, and two map text files.

Text files You have to add a text file to the clientlibs folder that maps to the JS files. The name of the text file is: js.txt. The js.txt file contains the JS file names: jquery-1.6.3.min.js and jquery.infinitecarousel.js.

Add the files to the ClientLibs folder Right-click /apps/carousel/components then select New, Node. Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs. Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node. On your file system, navigate to the folder where the JQuery JS files are located. Drag and drop the JS files to the clientlibs node by using CRXDE. On your file system, navigate where you placed the CSS files. Drag and drop the CSS files to the clientlibs folder by using CRXDE. Add a TXT file to the clientlibs folder named js.txt. Add the content specified in this section.

Some More Reference links are:-

Link:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__3vab-is_there_anytoolre.html

Link:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__rwhk-i_have_a_requirement.html

Link:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__6l3s-i_would_liketocrea.html

I hope this will help you.

Thanks and Regards Kautuk Sahni