Open In App

jQuery Page Piling Plugin

Last Updated : 26 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

jQuery pagePiling.js plug-in is a rich feature available for programmers for piling more than one layout section, one over the other, and accessing each page by URL or mouse scrolling or side bullets navigation. This feature provides all type of smooth vertical, horizontal, and side navigations to the destination anchor links. It also manages callback functions, video backgrounds, and scrolling speeds. We will only cover few of them in the following examples. 

Note: Please download the following library files from pagePiling.js plugin and save it in your working folder to include in your codes. Please download the “example.css” file from this link.

Links for jQuery pagePiling.js Plugin: 


<link href=”jquery.pagepiling.css” rel=”stylesheet” type=”text/css”/> 
<link href=”examples.css” rel=”stylesheet” type=”text/css”/> 
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=”jquery.pagepiling.min.js”></script>

Example 1: The following example demonstrates the basic working of the pagePiling plugin as written in the jQuery code. It supports interactive scrolling of different web layout pages with background images. The pages can also be navigated through side bullets on the right-hand side.

HTML 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery pagePiling plugin </title>
    <meta name="Resource-type" content="Document" />
    <link rel="stylesheet" 
          type="text/css" 
          href=
"http://fonts.googleapis.com/css?family=Lato:300, 400, 700" />
    <link rel="stylesheet" 
          type="text/css" 
          href="jquery.pagepiling.css" />
    <link rel="stylesheet" 
          type="text/css" 
          href="examples.css" />

    <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>

    <script type="text/javascript" 
            src="jquery.pagepiling.min.js">
    </script>
    <script type="text/javascript">
        let deleteLog = false;

        $(document).ready(function () {
            $('#pagepiling').pagepiling({
                menu: '#menu',
                anchors: ['page1', 'page2', 'page3'],
                navigation: {
                    'textColor': '#f0f2f0',
                    'bulletsColor': '#ccc000',
                    'position': 'right',
                    'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4']
                }
            });
        });
    </script>

    <style>
        h1 {
            font-size: 5em;
            font-family: arial, helvetica;
            color: #fff;
            margin: 0;
            padding: 0;
        }

        .section {
            text-align: center;
        }

        #section1,
        #section2,
        #section3 {
            background-size: cover;
        }

        #section1 {
            background-image: url(images/background1.jpg);
        }

        #section2 {
            background-image: url(images/background2.jpg);
            padding: 6% 0 0 0;
        }

        #section3 {
            background-image: url(images/background3.jpg);
            padding: 6% 0 0 0;
        }

        #section3 h1 {
            color: #000;
        }

        #section1 h1 {
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 30px;
            color: #fff;
        }

        #section2 .intro {
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 30px;
        }

        #section2 h1,
        #section2 p {
            text-shadow: 1px 5px 20px #000;
        }

        #section3 h1,
        #section3 p {
            text-shadow: 1px 5px 20px #000;
            color: #fff;
        }
    </style>

</head>

<body>

    <ul id="menu">
        <li data-menuanchor="page1" class="active">
            <a href="#page1">Home</a>
        </li>
        <li data-menuanchor="page2">
            <a href="#page2">About</a>
        </li>
        <li data-menuanchor="page3">
            <a href="#page3">jQuery</a>
        </li>
    </ul>

    <div id="pagepiling">
        <div class="section" id="section1">
            <h1>GeeksForGeeks</h1>
        </div>
        <div class="section" id="section2">
            <div class="intro">
                <h1>GFG Backgrounds </h1>

                <p>All pages with layouts!</p>

            </div>
        </div>
        <div class="section" id="section3">
            <div class="intro">
                <h1>Learn Jquery </h1>

                <p>Its fun learning plugins.</p>

            </div>
        </div>
              
    </div>
</body>

</html>

Output: 

Example 2: In the following example, the top and bottom looping features are enabled. For this, the loopTop and loopBottom properties are set to “true” as shown in the jQuery code. 

HTML 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" 
          content="text/html; charset=utf-8" />
    <title>jQuery pagePiling plugin for Looping</title>
    <meta name="Resource-type" 
          content="Document" />

    <link rel="stylesheet" 
          type="text/css" 
          href="jquery.pagepiling.css" />
    <link rel="stylesheet" 
          type="text/css" 
          href="examples.css" />

    <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script type="text/javascript" 
            src="jquery.pagepiling.min.js">
    </script>

    <script type="text/javascript">
        let deleteLog = false;

        $(document).ready(function () {
            $('#pagepilingDivID').pagepiling({
                menu: '#menu',
                anchors: ['page1', 'page2', 'page3'],
                sectionsColor: [
                    'green', 'lime', 'forestgreen', 'darkgreen'],
                loopTop: true,
                loopBottom: true
            });
        });
    </script>
</head>

<body>
    <ul id="menu">
        <li data-menuanchor="page1" class="active">
            <a href="#page1">Home</a>
        </li>
        <li data-menuanchor="page2">
            <a href="#page2">About</a>
        </li>
        <li data-menuanchor="page3">
            <a href="#page3">Contact</a>
        </li>
    </ul>

    <div id="pagepilingDivID">
        <div class="section" id="section1">
            <h1>GeeksForGeeks</h1>

            <p>
                Looping through top and bottom is working.
            </p>

        </div>
        <div class="section" id="section2">
            <div class="intro">
                <h1>Page Piling in a Looping style</h1>

                <p>To see the looping page piling feature,
                    just use the PgUp and PgDn scroll keys .                
                </p>

            </div>
        </div>
        <div class="section" id="section4">
            <div class="intro">
                <h1>
                    Back to the first page after scrolling down.
                </h1>

                <p>And it shows a looping feature, scrolling
                    down till the end gets back the first section.
                </p>

            </div>
        </div>
    </div>
</body>

</html>

Output: 

Example 3: In the following example, horizontal scrolling is enabled for pages by setting option direction: ‘horizontal’ as shown in the jQuery code. 

HTML 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" 
          content="text/html; charset=utf-8" />

    <title>
        jQuery pagePiling plugin for
        Horizontal scroll
    </title>

    <link rel="stylesheet" 
          type="text/css" 
          href="jquery.pagepiling.css" />

    <link rel="stylesheet" 
          type="text/css" 
          href="examples.css" />

    <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>

    <script type="text/javascript" 
            src="jquery.pagepiling.min.js">
    </script>

    <script type="text/javascript">
        $(document).ready(function () {

            $('#pagepilingDivID').pagepiling({
                direction: 'horizontal',
                menu: '#menu',
                anchors: ['page1', 'page2', 'page3', 'page4'],
                sectionsColor: [
                    'green', 'forestgreen', 'lime', 'white'],
                navigation: {
                    'position': 'right',
                    'tooltips': [
                        'Page 1', 'Page 2', 'Page 3', 'Page 4']
                },

            });
        });
    </script>

    <style>
        #section1 img {
            margin: 20px 0;
            opacity: 0.7;
        }

        #colors2,
        #colors3 {
            position: absolute;
            height: 150px;
            width: 370px;
            z-index: 1;
            background-repeat: no-repeat;
            left: 0;
            margin: 0 auto;
            right: 0;
        }

        #colors2 {
            background-image: url(images/colors2.png);
            top: 0;
        }

        #colors3 {
            background-image: url(images/colors3.png);
            bottom: 0;
        }
    </style>

</head>

<body>
    <ul id="menu">
        <li data-menuanchor="page1" 
            class="active">
            <a href="#page1">Home</a>
        </li>
        <li data-menuanchor="page2">
            <a href="#page2">About</a>
        </li>
        <li data-menuanchor="page3">
            <a href="#page3">Tutorials</a>
        </li>
    </ul>

    <div id="pagepilingDivID">
        <div class="section" id="section1">
            <img src="images/background1.jpg" 
                 alt="pagePiling" />
            <br />

            <h1>GFG Horizontal Scroll</h1>

            <p>
                pagePiling also provides
                horizontal scrolling
            </p>


        </div>
        <div class="section">
            <div class="intro">
                <h1>
                    Highly flexible and configurable
                </h1>
                <p>
                    Do the horizontal way of
                    scrolling and check!
                </p>

            </div>
        </div>
        <div class="section" id="section3">
            <div class="intro">
                <h1>
                    Very interactive for users
                </h1>

                <p>
                    Great idea to include in websites
                </p>

            </div>
        </div>
    </div>
</body>

</html>

Output: 



Next Article
jQuery | Flickerplate Plugin

G
geetanjali16
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox