CODEWITHSUNDEEP
wordpressjquery-scrollify
Jean-Marc Durrer
Jean-Marc Durrer

Reputation: 26

Properly use Scrollify on my Wordpress Template

I'm not good with programming PHP and JS. But I'm trying to install and use Scrollify on my own theme for Wordpress. jQuery should also be loaded properly. Unfortunately I cannot figure out how to make scrollify work, mostly out of lack of understanding how things react to each other or are properly loaded.

As it seems, I can load scrollify with this code in my functions.php: 

function scrollify() {
    wp_register_script( 'jquery-scrollify', get_template_directory_uri() . '/js/scrollify/jquery.scrollify.js', array('jquery'));
    wp_enqueue_script( 'jquery-scrollify' );

    wp_register_script( 'jquery-scrollifymin', get_template_directory_uri() . '/js/scrollify/jquery.scrollify.min.js', array('jquery'));
    wp_enqueue_script( 'jquery-scrollifymin' );

    wp_register_script( 'Gruntfile', get_template_directory_uri() . '/js/scrollify/Gruntfile.js', array('jquery'));
    wp_enqueue_script( 'Grundtfile' ); } 

add_action( 'wp_enqueue_scripts', 'scrollify' );

My HTML structure is like this: 

<section id="portfolio" class="fullscreen" data-section-name="portfolio"></section>
<section id="about" class="fullscreen" data-section-name="about"></section>

Configuration in jquery.scrollify.js: 

    //section should be an identifier that is the same for each section
    section: "fullscreen",
    sectionName: "section-name",
    interstitialSection: "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset: 0,
    scrollbars: true,
    target:"html,body",
    standardScrollElements: false,
    setHeights: true,
    overflowScroll:true,
    updateHash: true,
    touchScroll:true,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {}
};

And the script in the Header: 

$(function() {
  $.scrollify({
    section : ".fullscreen",
    sectionName : "section-name"
  });
});

If you want to have a look at the page, the link is: http://kraftsy2017.ch.176-10-116-204.artemis.hostingmanager.ch

I would really appreciate your help, I'm feeling hopeless. Thanks.

Upvotes: 0

Views: 1653

Answers (1)

Luke Haas
Luke Haas

Reputation: 692

Looks like the $ isn't referencing jQuery on your page. Try this instead: jQuery(function() { jQuery.scrollify({ section : ".fullscreen", sectionName : "section-name" }); });

Upvotes: 1

Related Questions