Skip to content

Commit 55702d7

Browse files
alvarotrigoalvarotrigo
committed
- Adding lazy load example
1 parent 8483a87 commit 55702d7

File tree

1 file changed

+163
-0
lines changed

1 file changed

+163
-0
lines changed

‎examples/lazyLoad.html

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>Lazy load - fullPage.js</title>
7+
<meta name="author" content="Alvaro Trigo Lopez" />
8+
<meta name="description" content="fullPage full-screen normal scrolling with autoScrolling." />
9+
<meta name="keywords" content="fullpage,jquery,demo,screen,fullscreen,lazyload,lazy,passive,load,src,data-src,media" />
10+
<meta name="Resource-type" content="Document" />
11+
12+
13+
<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
14+
<link rel="stylesheet" type="text/css" href="examples.css" />
15+
<style>
16+
17+
/* Style for our header texts
18+
* --------------------------------------- */
19+
h1{
20+
font-size: 5em;
21+
font-family: arial,helvetica;
22+
color: #fff;
23+
margin:0;
24+
}
25+
.intro p{
26+
color: #fff;
27+
}
28+
29+
/* Centered texts in each section
30+
* --------------------------------------- */
31+
.section{
32+
text-align:center;
33+
}
34+
35+
36+
/* Bottom menu
37+
* --------------------------------------- */
38+
#infoMenu li a {
39+
color: #fff;
40+
}
41+
42+
/* Lazy loading background
43+
* --------------------------------------- */
44+
#section2.load-background{
45+
background-image: url(imgs/bg2.jpg);
46+
}
47+
48+
</style>
49+
50+
<!--[if IE]>
51+
<script type="text/javascript">
52+
var console = { log: function() {} };
53+
</script>
54+
<![endif]-->
55+
56+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
57+
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
58+
59+
<script type="text/javascript" src="../vendors/scrolloverflow.js"></script>
60+
61+
<script type="text/javascript" src="../jquery.fullPage.js"></script>
62+
<script type="text/javascript" src="examples.js"></script>
63+
64+
<script type="text/javascript">
65+
$(document).ready(function() {
66+
$('#fullpage').fullpage({
67+
menu: '#menu',
68+
anchors: ['firstPage', 'secondPage', '3rdPage'],
69+
sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
70+
onLeave: function(index, nextIndex, direction){
71+
if(nextIndex === 3){
72+
var destinationSection = $('.section').eq(nextIndex-1);
73+
destinationSection.addClass('load-background');
74+
}
75+
}
76+
});
77+
});
78+
</script>
79+
80+
</head>
81+
<body>
82+
83+
<select id="demosMenu">
84+
<option selected>Choose Demo</option>
85+
<option id="activeSlide">Active section and slide</option>
86+
<option id="apple">Apple iPhone demo (animations)</option>
87+
<option id="autoHeight">Auto height</option>
88+
<option id="autoplayVideoAndAudio">Autoplay Video and Audio</option>
89+
<option id="backgrounds">Background images</option>
90+
<option id="backgroundsFixed">Fixed fullscreen backgrounds</option>
91+
<option id="backgroundVideo">Background video</option>
92+
<option id="callbacks">Callbacks</option>
93+
<option id="continuousHorizontal">Continuous horizontal</option>
94+
<option id="continuousVertical">Continuous vertical</option>
95+
<option id="css3">CSS3</option>
96+
<option id="dragAndMove">Drag And Move</option>
97+
<option id="easing">Easing</option>
98+
<option id="fadingEffect">Fading Effect</option>
99+
<option id="fixedHeaders">Fixed headers</option>
100+
<option id="gradientBackgrounds">Gradient backgrounds</option>
101+
<option id="interlockedSlides">Interlocked Slides</option>
102+
<option id="looping">Looping</option>
103+
<option id="methods">Methods</option>
104+
<option id="navigationV">Vertical navigation dots</option>
105+
<option id="navigationH">Horizontal navigation dots</option>
106+
<option id="noAnchor">No anchor links</option>
107+
<option id="normalScroll">Normal scrolling</option>
108+
<option id="normalScrollElements">Normal scroll elements</option>
109+
<option id="offsetSections">Offset sections</option>
110+
<option id="oneSection">One single section</option>
111+
<option id="resetSliders">Reset sliders</option>
112+
<option id="responsiveAutoHeight">Responsive Auto Height</option>
113+
<option id="responsiveHeight">Responsive Height</option>
114+
<option id="responsiveWidth">Responsive Width</option>
115+
<option id="responsiveSlides">Responsive Slides</option>
116+
<option id="scrollBar">Scroll bar enabled</option>
117+
<option id="scrollHorizontally">Scroll horizontally</option>
118+
<option id="scrollOverflow">Scroll inside sections and slides</option>
119+
<option id="scrollOverflowReset">ScrollOverflow Reset</option>
120+
<option id="scrollingSpeed">Scrolling speed</option>
121+
</select>
122+
123+
<ul id="menu">
124+
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First slide</a></li>
125+
<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
126+
<li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
127+
</ul>
128+
129+
<div id="fullpage">
130+
<div class="section " id="section0">
131+
<div class="intro">
132+
<img data-srcset="imgs/1.png, imgs/2.png" alt="1"/>
133+
<h1>Lazy load</h1>
134+
<p>Just use `data-src` or `data-srcset` for any media elements.</p>
135+
</div>
136+
</div>
137+
<div class="section" id="section1">
138+
<div class="slide" id="slide1">
139+
<div class="intro">
140+
<h1>Lazy load image</h1>
141+
<img data-src="imgs/iphone-blue.png" alt="iphone" id="iphone-two" />
142+
</div>
143+
</div>
144+
145+
<div class="slide" id="slide2">
146+
<h1>Lazy load video</h1>
147+
<video loop muted controls="false" data-autoplay>
148+
<source data-src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
149+
<source data-src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
150+
</video>
151+
</div>
152+
153+
</div>
154+
<div class="section" id="section2">
155+
<div class="intro">
156+
<h1>Lazy load background </h1>
157+
<p>Make use of the `onLeave` callback. See the source code here!</p>
158+
</div>
159+
</div>
160+
</div>
161+
162+
</body>
163+
</html>

0 commit comments

Comments
 (0)