Menu icon Foundation
How to add custom jquery plugin?

I am building my project using to zurb stack and i'm having difficulty trying to implement the RoyalSlider jquery plugin.

I tried to add it as a regular script in my default.html page but i get the error "JQuery is not defined", i don't want to add jquery as an external script as it's already included with foundation so i need to implement it into my app.js.

What is the best way to do this? Here is what i have tried so far but no luck yet.

 

App.js

import $ from 'jquery';
import whatInput from 'what-input';

window.$ = $;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';

require('./vendors/royalslider/jquery.royalslider.min');

//import modules
import {Navigation} from '../js/modules/navigation';
import {RoyalSlider} from '../js/pages/full-details';

$(document).foundation().ready(function() {

    Navigation.init();
    RoyalSlider.init();
    
});

 

module.

import $ from 'jquery';

var f,
RoyalSlider = {
    variables: {

    },

    init: function() {
        f = this.variables;
        this.royalSlider();
    },
    
    royalSlider: function() {
        $(".royalSlider").royalSlider({
            // options go here
            // as an example, enable keyboard arrows nav
            keyboardNavEnabled: true,
            autoScaleSliderWidth: 800,
            autoScaleSliderHeight: 400
        });  
    }
}

export {RoyalSlider};

 

Foundationjavascriptpluginjqueryapp.js

I am building my project using to zurb stack and i'm having difficulty trying to implement the RoyalSlider jquery plugin.

I tried to add it as a regular script in my default.html page but i get the error "JQuery is not defined", i don't want to add jquery as an external script as it's already included with foundation so i need to implement it into my app.js.

What is the best way to do this? Here is what i have tried so far but no luck yet.

 

App.js

import $ from 'jquery';
import whatInput from 'what-input';

window.$ = $;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';

require('./vendors/royalslider/jquery.royalslider.min');

//import modules
import {Navigation} from '../js/modules/navigation';
import {RoyalSlider} from '../js/pages/full-details';

$(document).foundation().ready(function() {

    Navigation.init();
    RoyalSlider.init();
    
});

 

module.

import $ from 'jquery';

var f,
RoyalSlider = {
    variables: {

    },

    init: function() {
        f = this.variables;
        this.royalSlider();
    },
    
    royalSlider: function() {
        $(".royalSlider").royalSlider({
            // options go here
            // as an example, enable keyboard arrows nav
            keyboardNavEnabled: true,
            autoScaleSliderWidth: 800,
            autoScaleSliderHeight: 400
        });  
    }
}

export {RoyalSlider};

 

Makenzie Camden about 1 year ago

I was finding this code Thanks for shearing this code with us. I usually use JQuery codes and When I compile this code with my other code the output will be unbelievable. I am not a professional but I am trying my level best. basically I provide database development services to other service provides or software houses. 

sophia white 11 months ago

This is when Twitter Video Downloader comes to the scene. Using this service, you will be able to download any video from Twitter. It doesn’t matter whether you’re searching for a video from CNN or NDTV or a funny Twitter user. To do all these, all you need is the URL of the Twitter video or the post that contains the video. Simply pasting the URL will download the Twitter video into the device you are using, with complete quality — including HD. The best part is that you can use Twitter Video Downloader from both PC and Mobiles.

Mark Phill 2 months ago

Thank you so much for very very simple tutorial. I am using woocommerce plugin and i need some customization your tutorial really helped. Thank you.