Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1 
<!DOCTYPE html>
2 
<html lang="en">
3 
  <head>
4 
    <meta charset="utf-8">
5 
    <title>Owl Carousel - Progress Bar</title>
6 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 
    <meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
8 
    <meta name="author" content="Bartosz Wojciechowski">
9 
 
10 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
11 
    <link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
12 
    <link href="../assets/css/custom.css" rel="stylesheet">
13 
 
14 
    <!-- Owl Carousel Assets -->
15 
    <link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
16 
    <link href="../owl-carousel/owl.theme.css" rel="stylesheet">
17 
 
18 
    <link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
19 
 
20 
    <!-- Le fav and touch icons -->
21 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
22 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
23 
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
24 
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
25 
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
26 
  </head>
27 
  <body>
28 
 
29 
      <div id="top-nav" class="navbar navbar-fixed-top">
30 
        <div class="navbar-inner">
31 
          <div class="container">
32 
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
33 
            <span class="icon-bar"></span>
34 
            <span class="icon-bar"></span>
35 
            <span class="icon-bar"></span>
36 
          </button>
37 
            <div class="nav-collapse collapse">
38 
            <ul class="nav pull-right">
39 
              <li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
40 
              <li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
41 
            </ul>
42 
            <ul class="nav pull-left">
43 
 
44 
            </ul>
45 
            </div>
46 
          </div>
47 
        </div>
48 
      </div>
49 
 
50 
    <div id="title">
51 
      <div class="container">
52 
        <div class="row">
53 
          <div class="span12">
54 
            <h1>Progress Bar</h1>
55 
          </div>
56 
        </div>
57 
      </div>
58 
    </div>
59 
 
60 
      <div id="demo">
61 
        <div class="container">
62 
          <div class="row">
63 
            <div class="span12">
64 
              <div id="owl-demo" class="owl-carousel">
65 
 
66 
                <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
67 
                <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
68 
                <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
69 
 
70 
              </div>
71 
            </div>
72 
          </div>
73 
        </div>
74 
    </div>
75 
 
76 
    <div id="example-info">
77 
      <div class="container">
78 
        <div class="row">
79 
          <div class="span12">
80 
            <h1>Setup</h1>
81 
            <p>Progress Bar made by three callbacks: <code>afterInit</code>, <code>afterMove</code> and <code>startDragging</code>.</p>
82 
            <ul class="nav nav-tabs" id="myTab">
83 
              <li class="active"><a href="#javascript">Javascript</a></li>
84 
              <li><a href="#HTML">HTML</a></li>
85 
              <li><a href="#CSS">CSS</a></li>
86 
            </ul>
87 
 
88 
            <div class="tab-content">
89 
 
90 
              <div class="tab-pane active" id="javascript">
91 
<pre class="pre-show prettyprint linenums">
92 
$(document).ready(function() {
93 
 
94 
  var time = 7; // time in seconds
95 
 
96 
  var $progressBar,
97 
      $bar,
98 
      $elem,
99 
      isPause,
100 
      tick,
101 
      percentTime;
102 
 
103 
    //Init the carousel
104 
    $("#owl-demo").owlCarousel({
105 
      slideSpeed : 500,
106 
      paginationSpeed : 500,
107 
      singleItem : true,
108 
      afterInit : progressBar,
109 
      afterMove : moved,
110 
      startDragging : pauseOnDragging
111 
    });
112 
 
113 
    //Init progressBar where elem is $("#owl-demo")
114 
    function progressBar(elem){
115 
      $elem = elem;
116 
      //build progress bar elements
117 
      buildProgressBar();
118 
      //start counting
119 
      start();
120 
    }
121 
 
122 
    //create div#progressBar and div#bar then prepend to $("#owl-demo")
123 
    function buildProgressBar(){
124 
      $progressBar = $("&lt;div&gt;",{
125 
        id:"progressBar"
126 
      });
127 
      $bar = $("&lt;div&gt;",{
128 
        id:"bar"
129 
      });
130 
      $progressBar.append($bar).prependTo($elem);
131 
    }
132 
 
133 
    function start() {
134 
      //reset timer
135 
      percentTime = 0;
136 
      isPause = false;
137 
      //run interval every 0.01 second
138 
      tick = setInterval(interval, 10);
139 
    };
140 
 
141 
    function interval() {
142 
      if(isPause === false){
143 
        percentTime += 1 / time;
144 
        $bar.css({
145 
           width: percentTime+"%"
146 
         });
147 
        //if percentTime is equal or greater than 100
148 
        if(percentTime >= 100){
149 
          //slide to next item
150 
          $elem.trigger('owl.next')
151 
        }
152 
      }
153 
    }
154 
 
155 
    //pause while dragging
156 
    function pauseOnDragging(){
157 
      isPause = true;
158 
    }
159 
 
160 
    //moved callback
161 
    function moved(){
162 
      //clear interval
163 
      clearTimeout(tick);
164 
      //start again
165 
      start();
166 
    }
167 
 
168 
    //uncomment this to make pause on mouseover
169 
    // $elem.on('mouseover',function(){
170 
    //   isPause = true;
171 
    // })
172 
    // $elem.on('mouseout',function(){
173 
    //   isPause = false;
174 
    // })
175 
 
176 
});
177 
</pre>  
178 
 
179 
              </div>
180 
 
181 
              <div class="tab-pane" id="HTML">
182 
<pre class="pre-show prettyprint linenums">
183 
&lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
184 
 
185 
  &lt;div class="item"&gt;&lt;img src="assets/fullimage1.jpg" alt="The Last of us"&gt;&lt;/div&gt;
186 
  &lt;div class="item"&gt;&lt;img src="assets/fullimage2.jpg" alt="GTA V"&gt;&lt;/div&gt;
187 
  &lt;div class="item"&gt;&lt;img src="assets/fullimage3.jpg" alt="Mirror Edge"&gt;&lt;/div&gt;
188 
 
189 
&lt;/div&gt;
190 
</pre>
191 
              </div>
192 
 
193 
              <div class="tab-pane" id="CSS">
194 
<pre class="pre-show prettyprint linenums">
195 
#owl-demo .item img{
196 
  display: block;
197 
  width: 100%;
198 
  height: auto;
199 
}
200 
#bar{
201 
  width: 0%;
202 
  max-width: 100%;
203 
  height: 4px;
204 
  background: #7fc242;
205 
}
206 
#progressBar{
207 
  width: 100%;
208 
  background: #EDEDED;
209 
}
210 
</pre>
211 
              </div>
212 
            </div><!--End Tab Content-->
213 
 
214 
          </div>
215 
        </div>
216 
      </div>
217 
    </div>
218 
 
219 
    <div id="more">
220 
      <div class="container">
221 
 
222 
        <div class="row">
223 
          <div class="span12">
224 
            <h1>More Demos</h1>
225 
          </div>
226 
        </div>
227 
 
228 
        <div class="row demos-row">
229 
          <div class="span3">
230 
            <a href="images.html" class="demo-box">
231 
              <div class="demo-wrapper demo-images clearfix">
232 
                <div class="demo-slide"><div class="bg"></div></div>
233 
                <div class="demo-slide"><div class="bg"></div></div>
234 
                <div class="demo-slide"><div class="bg"></div></div>
235 
              </div>
236 
              <h3>Images</h3>
237 
            </a>
238 
          </div>
239 
 
240 
          <div class="span3">
241 
            <a href="custom.html" class="demo-box">
242 
              <div class="demo-wrapper demo-custom clearfix">
243 
                <div class="demo-slide"><div class="bg"></div></div>
244 
                <div class="demo-slide"><div class="bg"></div></div>
245 
                <div class="demo-slide"><div class="bg"></div></div>
246 
                <div class="demo-slide"><div class="bg"></div></div>
247 
                <div class="demo-slide"><div class="bg"></div></div>
248 
                <div class="demo-slide"><div class="bg"></div></div>
249 
                <div class="demo-slide"><div class="bg"></div></div>
250 
                <div class="demo-slide"><div class="bg"></div></div>
251 
                <div class="demo-slide"><div class="bg"></div></div>
252 
                <div class="demo-slide"><div class="bg"></div></div>
253 
              </div>
254 
              <h3>Custom</h3>
255 
            </a>
256 
          </div>
257 
 
258 
          <div class="span3">
259 
            <a href="itemsCustom.html" class="demo-box">
260 
              <div class="demo-wrapper demo-full clearfix">
261 
                <div class="demo-slide"><div class="bg"></div></div>
262 
                <div class="demo-slide"><div class="bg"></div></div>
263 
                <div class="demo-slide"><div class="bg"></div></div>
264 
                <div class="demo-slide"><div class="bg"></div></div>
265 
              </div>
266 
              <h3>Custom 2</h3>
267 
            </a>
268 
          </div>
269 
 
270 
          <div class="span3">
271 
            <a href="one.html" class="demo-box">
272 
              <div class="demo-wrapper demo-one clearfix">
273 
                <div class="demo-slide"><div class="bg"></div></div>
274 
              </div>
275 
              <h3>One Slide</h3>
276 
            </a>
277 
          </div>
278 
 
279 
        </div>
280 
        <div class="row demos-row">
281 
          <div class="span3">
282 
            <a href="json.html" class="demo-box">
283 
              <div class="demo-wrapper demo-Json clearfix">
284 
                <div class="demo-slide"><div class="bg"></div></div>
285 
                <div class="demo-slide"><div class="bg"></div></div>
286 
                <div class="demo-slide"><div class="bg"></div></div>
287 
                <div class="demo-slide"><div class="bg"></div></div>
288 
                <div class="demo-slide"><div class="bg"></div></div>
289 
              </div>
290 
              <h3>JSON</h3>
291 
            </a>
292 
          </div>
293 
 
294 
          <div class="span3">
295 
            <a href="customJson.html" class="demo-box">
296 
              <div class="demo-wrapper demo-Json-custom clearfix">
297 
                <div class="demo-slide"><div class="bg"></div></div>
298 
                <div class="demo-slide"><div class="bg"></div></div>
299 
                <div class="demo-slide"><div class="bg"></div></div>
300 
              </div>
301 
              <h3>JSON Custom</h3>
302 
            </a>
303 
          </div>
304 
 
305 
          <div class="span3">
306 
            <a href="lazyLoad.html" class="demo-box">
307 
              <div class="demo-wrapper demo-lazy clearfix">
308 
                <div class="demo-slide"><div class="bg"></div></div>
309 
                <div class="demo-slide"><div class="bg"></div></div>
310 
                <div class="demo-slide"><div class="bg"></div></div>
311 
              </div>
312 
              <h3>Lazy Load</h3>
313 
            </a>
314 
          </div>
315 
 
316 
          <div class="span3">
317 
            <a href="autoHeight.html" class="demo-box">
318 
              <div class="demo-wrapper demo-height clearfix">
319 
                <div class="demo-slide"><div class="bg"></div></div>
320 
              </div>
321 
              <h3>Auto Height</h3>
322 
            </a>
323 
          </div>
324 
 
325 
        </div>
326 
      </div>
327 
    </div>
328 
 
329 
    <div id="footer">
330 
      <div class="container">
331 
        <div class="row">
332 
          <div class="span12">
333 
            <h5>Bartosz Wojciechowski 2013 / @OwlFonk /
334 
            <a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
335 
            <a href="../changelog.html">changelog</a> /
336 
            <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
337 
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>
338 
            <script>
339 
            var owldomain = window.location.hostname.indexOf("owlgraphic");
340 
            if(owldomain !== -1){
341 
              !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');
342 
            }
343 
            </script>
344 
            </h5>
345 
          </div>
346 
        </div>
347 
      </div>
348 
    </div>
349 
 
350 
 
351 
    <script src="../assets/js/jquery-1.9.1.min.js"></script>
352 
    <script src="../owl-carousel/owl.carousel.js"></script>
353 
 
354 
 
355 
    <!-- Demo -->
356 
 
357 
    <style>
358 
    #owl-demo .item img{
359 
      display: block;
360 
      width: 100%;
361 
      height: auto;
362 
    }
363 
    #bar{
364 
      width: 0%;
365 
      max-width: 100%;
366 
      height: 4px;
367 
      background: #7fc242;
368 
    }
369 
    #progressBar{
370 
      width: 100%;
371 
      background: #EDEDED;
372 
    }
373 
    </style>
374 
 
375 
 
376 
    <script>
377 
    $(document).ready(function() {
378 
 
379 
      var time = 7; // time in seconds
380 
 
381 
      var $progressBar,
382 
          $bar,
383 
          $elem,
384 
          isPause,
385 
          tick,
386 
          percentTime;
387 
 
388 
        //Init the carousel
389 
        $("#owl-demo").owlCarousel({
390 
          slideSpeed : 500,
391 
          paginationSpeed : 500,
392 
          singleItem : true,
393 
          afterInit : progressBar,
394 
          afterMove : moved,
395 
          startDragging : pauseOnDragging
396 
        });
397 
 
398 
        //Init progressBar where elem is $("#owl-demo")
399 
        function progressBar(elem){
400 
          $elem = elem;
401 
          //build progress bar elements
402 
          buildProgressBar();
403 
          //start counting
404 
          start();
405 
        }
406 
 
407 
        //create div#progressBar and div#bar then prepend to $("#owl-demo")
408 
        function buildProgressBar(){
409 
          $progressBar = $("<div>",{
410 
            id:"progressBar"
411 
          });
412 
          $bar = $("<div>",{
413 
            id:"bar"
414 
          });
415 
          $progressBar.append($bar).prependTo($elem);
416 
        }
417 
 
418 
        function start() {
419 
          //reset timer
420 
          percentTime = 0;
421 
          isPause = false;
422 
          //run interval every 0.01 second
423 
          tick = setInterval(interval, 10);
424 
        };
425 
 
426 
        function interval() {
427 
          if(isPause === false){
428 
            percentTime += 1 / time;
429 
            $bar.css({
430 
               width: percentTime+"%"
431 
             });
432 
            //if percentTime is equal or greater than 100
433 
            if(percentTime >= 100){
434 
              //slide to next item
435 
              $elem.trigger('owl.next')
436 
            }
437 
          }
438 
        }
439 
 
440 
        //pause while dragging
441 
        function pauseOnDragging(){
442 
          isPause = true;
443 
        }
444 
 
445 
        //moved callback
446 
        function moved(){
447 
          //clear interval
448 
          clearTimeout(tick);
449 
          //start again
450 
          start();
451 
        }
452 
 
453 
        //uncomment this to make pause on mouseover
454 
        // $elem.on('mouseover',function(){
455 
        //   isPause = true;
456 
        // })
457 
        // $elem.on('mouseout',function(){
458 
        //   isPause = false;
459 
        // })
460 
    });
461 
    </script>
462 
 
463 
    <script src="../assets/js/bootstrap-collapse.js"></script>
464 
    <script src="../assets/js/bootstrap-transition.js"></script>
465 
    <script src="../assets/js/bootstrap-tab.js"></script>
466 
 
467 
    <script src="../assets/js/google-code-prettify/prettify.js"></script>
468 
    <script src="../assets/js/application.js"></script>
469 
 
470 
  </body>
471 
</html>