CODEWITHSUNDEEP
javascriptjqueryajaxfullpage.js
bbl
bbl

Reputation: 31

multiple instances of fullpage.js

I am trying to use fullpage.js for two different sections on one website. Basically, when a slide is clicked on, it reveals a child wrapper div underneath with its own sections to vertically scroll through before the main section continues on.

Here is my code that I am working with. I'm trying to load it in through ajax but I'm wondering if there is an easier way I am overlooking. 

$("#wrapper").fullpage({
    verticalCentered: true,
    resize : true,
    anchors: ['section1', 'section2', 'section3', 'about'],
    //menu:'#menu',
    customScroll:true,
    onLeave: function(index, nextIndex, direction){
        //console.log(index+'|'+nextIndex+'|'+direction);

        if (direction == 'down'){
            $('.section:nth-child('+index+')').animate({'top':'0%'},0)
            $('.section:nth-child('+nextIndex+')').animate({'top':'100%'},0).animate({'top':'0%'},500);
        } else {
            $('.section:nth-child('+nextIndex+')').animate({'top':'0%'},0);
            $('.section:nth-child('+index+')').animate({'top':'0%'},0).animate({'top':'100%'},500).animate({'top':'500%'},0);
        }
    }
});

and then the code that removes it and adds a new wrapper:

$(".sub_section").click(function() {
    $("#wrapper").fullpage.destroy('all');
    if (sub_section_open == false) {
        $("#left_border").animate({"borderLeftWidth" : "0px"}, 300);
        $("#right_border").animate({"borderRightWidth" : "0px"}, 300);
        $("#top_border").animate({"borderTopWidth" : "0px"}, 300, function() {
            $("#left_border").hide();
            $("#right_border").hide();
            $("#top_border").hide();    
        }); 

        $(".sub_section .letters").slideUp("slow", function(){
            $(".sub_section .content").css({'z-index': 1}); 
        });
        sub_section_open = true;
        $(".btn_sub_section_close").show();
        $( "#wrapper" ).load( "section1.html" );
        $("#section1").fullpage({
            verticalCentered: true,
            resize : true,
            anchors: ['ssection1', 'ssection2', 'ssection3', 'ssection4'],
            menu:'#menu'
        });
    }
});

Any ideas? Thanks!

Upvotes: 3

Views: 2776

Answers (2)

Jerome Braeken
Jerome Braeken

Reputation: 483

On GitHub, Fullpage.js has labeled the issue as enhancement. So there is a chance we get the multiple instances option in a future version :)

Upvotes: 1

Alvaro
Alvaro

Reputation: 41595

fullpage.js only supports one instance.

It is a fullpage plugin and it is not made to support them as it doesn't make sense. It is full page, all the page will be part of one instance of fullpage.

You can easily see evidences of it in the code, for example in this line:

$('.fp-section').each(function(index){

Any section on the page, no matter which container/wrapper it uses, will be treated inside one single instance of fullpage.

Upvotes: 1

Related Questions