CODEWITHSUNDEEP
jqueryhtmlcssfullpage.js
cweitat
cweitat

Reputation: 1247

Image Comparison Slider from CodyHouse have conflict with fullPage.js

I'm using image slider from http://codyhouse.co/gem/css-jquery-image-comparison-slider/ and fullpage.js http://alvarotrigo.com/fullPage/ however, the slider does not works when I put the jquery at the header but if I put at the bottom, fullPage.js couldn't run but image comparison can. Below is the codes: 

<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<!-- alternative to futura font -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />

   <!-- Resource jQuery -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mobile.custom.min.js"></script> 
<script src="js/main.js"></script>

        <!-- https://github.com/alvarotrigo/fullPage.js#usage -->
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage', '6thpage', '7thpage', '8thpage', '9thpage', 'lastPage'],
            continuousVertical: true,
            responsiveWidth: '400',
        });
    });
</script>


<div id="fullpage">
    <div class="section " id="section0">
        <img src="img/logo.png" />
        <div class="row">
            &nbsp;
        </div>
        <div class="row">
            &nbsp;
        </div>
        <div class="row">
            &nbsp;
        </div>
        <p><a href="#secondPage">About</a></p>
        <span><a href="#3rdPage">Age</a></span>
        <span><a href="#4thpage">Cosplay</a></span>
        <span><a href="#5thpage">Privacy</a></span>
        <span><a href="#6thpage">Romance</a></span>
        <span><a href="#7thpage">School</a></span>
        <span><a href="#8thpage">Son</a></span>
        <span><a href="#9thpage">Time</a></span>
        <span><a href="#10thpage">Vocation</a></span>
    </div>
    <div class="section" id="section1">
        <div class="container">
            <div class="row">
                <img src="img/logo.png" />
            </div>
            <div class="row">&nbsp;
            </div>
            <div class="row">

                <div class="col-xs-6 col-sm-4 justify">
                    <p>lorem ipsum</p>
                </div>
            </div>
        </div>
    </div>
    <div class="section" id="section2">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section3">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Couple</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section4">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section5">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section6">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section7">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>



<div class="section" id="section8">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section9">
         <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
    </div>


</div>

Upvotes: 1

Views: 542

Answers (1)

Alvaro
Alvaro

Reputation: 41605

I suggest you to read the fullpage.js FAQs:

My other plugins don't work when using fullPage.js

Short answer: initialize them in the afterRender callback of fullPage.js.

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.

Upvotes: 1

Related Questions