Skip to content

Commit

Permalink
- Updated examples to work with v.2 structure.
Browse files Browse the repository at this point in the history 
- Images linked to the relative folder.
  • Loading branch information
@alvarotrigo
alvarotrigo committed Apr 9, 2014
1 parent 010d6dd commit 7120fc7
Show file tree
Hide file tree
Showing 17 changed files with 394 additions and 452 deletions.
121 changes: 48 additions & 73 deletions examples/apple.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,19 +282,7 @@
margin: 10% 0 0 0;
}



/* Menu
* --------------------------------------- */
#infoMenu.whiteLinks li:nth-child(1) a,
#infoMenu.whiteLinks li:nth-child(2) a,
#infoMenu.whiteLinks li:nth-child(3) a{
color: #fff;
}
#infoMenu{
font-family: arial, helvetica;
}



/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
Expand Down Expand Up @@ -324,21 +312,18 @@

<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
$('#fullpage').fullpage({
'verticalCentered': false,
'css3': true,
'slidesColor': ['#F0F2F4', '#fff', '#fff', '#fff'],
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
'fixedElements': '#demosMenu',


'afterLoad': function(anchorLink, index){
if(index == 2){
$('#iphone3, #iphone2, #iphone4').addClass('active');
}
$('#infoMenu').toggleClass('whiteLinks', index ==4);

}
},

'onLeave': function(index, direction){
Expand All @@ -351,18 +336,7 @@

$('#staticImg').toggleClass('active', (index == 2 && direction == 'down' ) || (index == 4 && direction == 'up'));
$('#staticImg').toggleClass('moveDown', index == 3 && direction == 'down');
},

/*
Needed to maintain the fixed position of the element
due to problems using translate3d and fixed elements.
*/
afterRender: function(){
$('#infoMenu').appendTo('body');

$('#githubLink, .twitter-share-button').appendTo('body');
}

});
});
</script>
Expand Down Expand Up @@ -390,59 +364,60 @@
<option id="apple">Apple iPhone demo (animations)</option>
</select>

<div id="staticImg">
<div class="imgsContainer">
<img src="http://wallpapers-for-ipad.com/fullpage/imgs/iphone-green.png" alt="iphone" id="iphone-green" />
</div>
</div>

<div class="section " id="section0">
<h1>Apple fullPage.js Demo</h1>
<img src="http://wallpapers-for-ipad.com/fullpage/imgs/iphone1.jpg" alt="iphone" />
</div>
<div class="section" id="section1">
<div class="wrap">
<div id="fullpage">
<div id="staticImg">
<div class="imgsContainer">
<img src="http://wallpapers-for-ipad.com/fullpage/imgs/iphone2.png" alt="iphone" id="iphone2" />
<img src="http://wallpapers-for-ipad.com/fullpage/imgs/iphone3.png" alt="iphone" id="iphone3" />
<img src="http://wallpapers-for-ipad.com/fullpage/imgs/iphone4.png" alt="iphone" id="iphone4" />
</div>

<div class="box">
<h2>A powerful plugin</h2>
<strong>fullPage.js</strong> callbacks allow you to create amazing dynamic sites with a bit of imagination. This example tries to reproduce the Apple iPhone-5c website animations as an example of what fullPage.js is capable of.
<img src="imgs/iphone-green.png" alt="iphone" id="iphone-green" />
</div>
</div>
</div>

<div class="section moveDown" id="section2">
<div class="wrap">
<div class="imgsContainer">
<img src="http://wallpapers-for-ipad.com/fullpage/imgs/iphone-yellow.png" alt="iphone" id="iphone-yellow" />
<img src="http://wallpapers-for-ipad.com/fullpage/imgs/iphone-red.png" alt="iphone" id="iphone-red" />
<img src="http://wallpapers-for-ipad.com/fullpage/imgs/iphone-blue.png" alt="iphone" id="iphone-blue" />
</div>

<div class="box">
<h2>Amazing stuff</h2>
Combining <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable.
<div class="section " id="section0">
<h1>Apple fullPage.js Demo</h1>
<img src="imgs/iphone1.jpg" alt="iphone" />
</div>
<div class="section" id="section1">
<div class="wrap">
<div class="imgsContainer">
<img src="imgs/iphone2.png" alt="iphone" id="iphone2" />
<img src="imgs/iphone3.png" alt="iphone" id="iphone3" />
<img src="imgs/iphone4.png" alt="iphone" id="iphone4" />
</div>

<div class="box">
<h2>A powerful plugin</h2>
<strong>fullPage.js</strong> callbacks allow you to create amazing dynamic sites with a bit of imagination. This example tries to reproduce the Apple iPhone-5c website animations as an example of what fullPage.js is capable of.
</div>
</div>
</div>
</div>
<div class="section moveDown" id="section3">
<div class="wrap">
<div class="box">
<h2>Just a demo</h2>
This is, of course, just a demo. I didn't want to spend much time on it.
Don't expect it to work perfectly in all kind of screens.
It has been designed to work on 1180px width or over on modern browsers with CSS3.

<div class="section moveDown" id="section2">
<div class="wrap">
<div class="imgsContainer">
<img src="imgs/iphone-yellow.png" alt="iphone" id="iphone-yellow" />
<img src="imgs/iphone-red.png" alt="iphone" id="iphone-red" />
<img src="imgs/iphone-blue.png" alt="iphone" id="iphone-blue" />
</div>

<div class="box">
<h2>Amazing stuff</h2>
Combining <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable.
</div>
</div>
</div>
<div class="imgsContainer">
<img src="http://wallpapers-for-ipad.com/fullpage/imgs/iphone-two.png" alt="iphone" id="iphone-two" />
<div class="section moveDown" id="section3">
<div class="wrap">
<div class="box">
<h2>Just a demo</h2>
This is, of course, just a demo. I didn't want to spend much time on it.
Don't expect it to work perfectly in all kind of screens.
It has been designed to work on 1180px width or over on modern browsers with CSS3.
</div>
</div>
<div class="imgsContainer">
<img src="imgs/iphone-two.png" alt="iphone" id="iphone-two" />
</div>
</div>
</div>


</body>
</html>
27 changes: 14 additions & 13 deletions examples/backgrounds.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,15 @@
/* Defining each sectino background and styles
* --------------------------------------- */
#section0{
background-image: url(http://wallpapers-for-ipad.com/fullpage/imgs/bg1.jpg);
background-image: url(imgs/bg1.jpg);
padding: 30% 0 0 0;
}
#section2{
background-image: url(http://wallpapers-for-ipad.com/fullpage/imgs/bg3.jpg);
background-image: url(imgs/bg3.jpg);
padding: 6% 0 0 0;
}
#section3{
background-image: url(http://wallpapers-for-ipad.com/fullpage/imgs/bg4.jpg);
background-image: url(imgs/bg4.jpg);
padding: 6% 0 0 0;
}
#section3 h1{
Expand All @@ -62,11 +62,11 @@
/*Adding background for the slides
* --------------------------------------- */
#slide1{
background-image: url(http://wallpapers-for-ipad.com/fullpage/imgs/bg2.jpg);
background-image: url(imgs/bg2.jpg);
padding: 6% 0 0 0;
}
#slide2{
background-image: url(http://wallpapers-for-ipad.com/fullpage/imgs/bg5.jpg);
background-image: url(imgs/bg5.jpg);
padding: 6% 0 0 0;
}

Expand All @@ -92,7 +92,7 @@

<script type="text/javascript">
$(document).ready(function() {
$.fn.fullpage({
$('#fullpage').fullpage({
verticalCentered: false,
});
});
Expand Down Expand Up @@ -127,14 +127,15 @@
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>


<div class="section " id="section0"><h1>fullPage.js</h1></div>
<div class="section" id="section1">
<div class="slide" id="slide1"><h1>Slide Backgrounds</h1></div>
<div class="slide" id="slide2"><h1>Totally customizable</h1></div>
<div id="fullpage">
<div class="section " id="section0"><h1>fullPage.js</h1></div>
<div class="section" id="section1">
<div class="slide" id="slide1"><h1>Slide Backgrounds</h1></div>
<div class="slide" id="slide2"><h1>Totally customizable</h1></div>
</div>
<div class="section" id="section2"><h1>Lovely images <br />for a lovely page</h1></div>
<div class="section" id="section3"><h1>One Image = One thousand words</h1></div>
</div>
<div class="section" id="section2"><h1>Lovely images <br />for a lovely page</h1></div>
<div class="section" id="section3"><h1>One Image = One thousand words</h1></div>


</body>
</html>
37 changes: 19 additions & 18 deletions examples/callback.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var pepe = $.fn.fullpage({
$('#fullpage').fullpage({
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
Expand Down Expand Up @@ -103,27 +103,28 @@
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
</ul>

<div class="section " id="section0">
<h1>fullPage.js</h1>
<p>Configure the easing jQuery UI effect!</p>
<img src="imgs/fullPage.png" alt="fullPage" />
</div>
<div class="section" id="section1">
<div class="intro">
<img src="imgs/1.png" alt="Cool" />
<h1>easeOutExpo</h1>
<p>This example is working with `easeOutExpo` effect instead of the default `easeOutExpo`</p>
<p>You can see more about them <a href="http://jqueryui.com/resources/demos/effect/easing.html" target="_blank">here</a></p>
<div id="fullpage">
<div class="section " id="section0">
<h1>fullPage.js</h1>
<p>Configure the easing jQuery UI effect!</p>
<img src="imgs/fullPage.png" alt="fullPage" />
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Cool uh?</h1>
<p>Choose the best easing effect for your site!</p>
<div class="section" id="section1">
<div class="intro">
<img src="imgs/1.png" alt="Cool" />
<h1>easeOutExpo</h1>
<p>This example is working with `easeOutExpo` effect instead of the default `easeOutExpo`</p>
<p>You can see more about them <a href="http://jqueryui.com/resources/demos/effect/easing.html" target="_blank">here</a></p>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Cool uh?</h1>
<p>Choose the best easing effect for your site!</p>
</div>
</div>
</div>



</body>
</html>
34 changes: 17 additions & 17 deletions examples/continuous.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var pepe = $.fn.fullpage({
$('#fullpage').fullpage({
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu',
Expand Down Expand Up @@ -66,25 +66,25 @@
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
</ul>


<div class="section " id="section0">
<h1>fullPage.js</h1>
<p>Continuous Scrolling Enabled</p>
<img src="imgs/fullPage.png" alt="fullPage" />
</div>
<div class="section" id="section1">
<div class="intro">
<h1>Around the world scrolling</h1>
<p>Go to the first section and scroll up or to the last one and scroll down to see how it works.</p>
<div id="fullpage">
<div class="section " id="section0">
<h1>fullPage.js</h1>
<p>Continuous Scrolling Enabled</p>
<img src="imgs/fullPage.png" alt="fullPage" />
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Scroll Down</h1>
<p>And it will animate down to the first section</p>
<div class="section" id="section1">
<div class="intro">
<h1>Around the world scrolling</h1>
<p>Go to the first section and scroll up or to the last one and scroll down to see how it works.</p>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Scroll Down</h1>
<p>And it will animate down to the first section</p>
</div>
</div>
</div>


</body>
</html>
Loading

0 comments on commit 7120fc7

Please sign in to comment.