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 - Content Manipulations</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 
    <!-- Prettify -->
19 
    <link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
20 
 
21 
 
22 
    <!-- Le fav and touch icons -->
23 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
24 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
25 
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
26 
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
27 
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
28 
  </head>
29 
  <body>
30 
 
31 
      <div id="top-nav" class="navbar navbar-fixed-top">
32 
        <div class="navbar-inner">
33 
          <div class="container">
34 
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
35 
            <span class="icon-bar"></span>
36 
            <span class="icon-bar"></span>
37 
            <span class="icon-bar"></span>
38 
          </button>
39 
            <div class="nav-collapse collapse">
40 
            <ul class="nav pull-right">
41 
              <li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
42 
              <li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
43 
            </ul>
44 
            <ul class="nav pull-left">
45 
 
46 
            </ul>
47 
            </div>
48 
          </div>
49 
        </div>
50 
      </div>
51 
 
52 
    <div id="title">
53 
      <div class="container">
54 
        <div class="row">
55 
          <div class="span12">
56 
            <h1>Content manipulations.</h1>
57 
          </div>
58 
        </div>
59 
      </div>
60 
    </div>
61 
 
62 
      <div id="demo">
63 
        <div class="container">
64 
          <div class="row">
65 
 
66 
            <div class="span10">
67 
              <div id="owl-demo" class="owl-carousel">
68 
                <div class="item dodgerBlue"><h1>Start</h1></div>
69 
              </div>
70 
            </div>
71 
 
72 
            <div class="span2">
73 
 
74 
              <div class="left">
75 
                <a href="" class="btn add">Add Item</a>
76 
              </div>
77 
 
78 
              <div class="left">
79 
                <a href="" class="btn remove">Remove Item</a>
80 
              </div>
81 
 
82 
              <div class="left">
83 
              <a class="btn reinit" href="">Reinit + singlItem</a>
84 
              </div>
85 
 
86 
              <div class="left">
87 
              <a class="btn destroy" href="">Destroy</a>
88 
              </div>
89 
 
90 
              <div class="left">
91 
              <a class="btn rebuild" href="">Rebuild</a>              
92 
              </div>
93 
 
94 
            </div>
95 
 
96 
          </div>
97 
        </div>
98 
 
99 
    </div>
100 
 
101 
    <div id="example-info">
102 
      <div class="container">
103 
        <div class="row">
104 
          <div class="span12">
105 
            <h1>Setup</h1>
106 
            <p>See buttons on top right? Great! Now have a play with them and you get the idea. Thats all. If you have any questions let me know on <a href="https://github.com/OwlFonk/OwlCarousel">github</a> </p>
107 
            <ul class="nav nav-tabs" id="myTab">
108 
              <li class="active"><a href="#javascript">Javascript</a></li>
109 
              <li><a href="#HTML">HTML</a></li>
110 
              <li><a href="#CSS">CSS</a></li>
111 
            </ul>
112 
 
113 
            <div class="tab-content">
114 
 
115 
              <div class="tab-pane active" id="javascript">
116 
<pre class="pre-show prettyprint linenums">
117 
$(document).ready(function() {
118 
 
119 
  var owl = $("#owl-demo"),
120 
      i = 0,
121 
      textholder,
122 
      booleanValue = false;
123 
 
124 
  //init carousel
125 
  owl.owlCarousel();
126 
 
127 
  /*
128 
  addItem() method add new slides on given position
129 
 
130 
  Syntax:
131 
  owldata.addItem(htmlString, targetPosition)
132 
 
133 
  First parameter(mandatory) "htmlString" accept string like this:
134 
  var newItem = "&lt;div&gt;new Item&lt;/div&gt;"
135 
 
136 
  Second parameter "targetPosition" is optional and accept number values.
137 
  To add item at the end of carousel you could use -1 value. Last item is default value.
138 
  */
139 
 
140 
  $('.add').on("click", function(e){
141 
    e.preventDefault();
142 
    i += 1;
143 
    var content = "&lt;div class=\"item dodgerBlue\"&gt;&lt;h1&gt;"+i+"&lt;/h1&gt;&lt;/div&gt;";
144 
    owl.data('owlCarousel').addItem(content);
145 
  });
146 
 
147 
  /*
148 
  Next new owl method is .removeItem()
149 
 
150 
  Syntax:
151 
  owldata.removeItem(targetPosition)
152 
 
153 
  Where parameter "targetPosition" is target item you will remove.
154 
  targetPosition is optional. Default value is last item (-1);
155 
  */
156 
 
157 
  $('.remove').on("click", function(e){
158 
    e.preventDefault();
159 
    i -= 1;
160 
    if(i&lt;=0)i=0;
161 
    $("#owl-demo").data('owlCarousel').removeItem();
162 
  });
163 
 
164 
  /*
165 
  destroy() method unwrap whole plugin and leave original pre carousel structure
166 
 
167 
  Syntax:
168 
  owldata.destroy();
169 
  */
170 
 
171 
  $('.destroy').click(function(e){
172 
    e.preventDefault()
173 
    $("#owl-demo").data('owlCarousel').destroy();
174 
  });
175 
 
176 
  /*
177 
  reinit() method reinitialize plugin
178 
 
179 
  Syntax:
180 
  owldata.reinit(newOptions)
181 
 
182 
  Yes! you can reinit plugin with new options. Old options
183 
  will be overwritten if exist or added if new.
184 
 
185 
  You can easly add new content by ajax or change old options with reinit method.
186 
  */
187 
 
188 
  $('.reinit').click(function(e){
189 
    e.preventDefault()
190 
    if(booleanValue === true){
191 
      booleanValue = false;
192 
    } else if(booleanValue === false){
193 
      booleanValue = true;
194 
    }
195 
 
196 
    owl.data('owlCarousel').reinit({
197 
        singleItem : booleanValue
198 
      });
199 
  })
200 
 
201 
  /*
202 
  Well, if you destroyed plugin why not resurect it?
203 
  */
204 
 
205 
  $('.rebuild').click(function(e){
206 
    e.preventDefault()
207 
    owl.owlCarousel();
208 
  });
209 
 
210 
});
211 
</pre>  
212 
 
213 
              </div>
214 
 
215 
              <div class="tab-pane" id="HTML">
216 
<pre class="pre-show prettyprint linenums">
217 
&lt;div id="owl-demo" class="owl-carousel"&gt;
218 
  &lt;div class="item dodgerBlue"&gt;&lt;h1&gt;Start&lt;/h1&gt;&lt;/div&gt;
219 
&lt;/div&gt;
220 
</pre>
221 
              </div>
222 
 
223 
              <div class="tab-pane" id="CSS">
224 
<pre class="pre-show prettyprint linenums">
225 
#owl-demo .item{
226 
  display: block;
227 
  padding: 54px 0px;
228 
  margin: 5px;
229 
  color: #FFF;
230 
  -webkit-border-radius: 3px;
231 
  -moz-border-radius: 3px;
232 
  border-radius: 3px;
233 
  text-align: center;
234 
}
235 
.left{
236 
  text-align: left;
237 
  margin-bottom: 10px;
238 
}
239 
.left .btn {
240 
  display: block;
241 
}
242 
</pre>
243 
              </div>
244 
            </div><!--End Tab Content-->
245 
 
246 
          </div>
247 
        </div>
248 
      </div>
249 
    </div>
250 
 
251 
    <div id="more">
252 
      <div class="container">
253 
 
254 
        <div class="row">
255 
          <div class="span12">
256 
            <h1>More Demos</h1>
257 
          </div>
258 
        </div>
259 
 
260 
        <div class="row demos-row">
261 
          <div class="span3">
262 
            <a href="images.html" class="demo-box">
263 
              <div class="demo-wrapper demo-images clearfix">
264 
                <div class="demo-slide"><div class="bg"></div></div>
265 
                <div class="demo-slide"><div class="bg"></div></div>
266 
                <div class="demo-slide"><div class="bg"></div></div>
267 
              </div>
268 
              <h3>Images</h3>
269 
            </a>
270 
          </div>
271 
 
272 
          <div class="span3">
273 
            <a href="custom.html" class="demo-box">
274 
              <div class="demo-wrapper demo-custom clearfix">
275 
                <div class="demo-slide"><div class="bg"></div></div>
276 
                <div class="demo-slide"><div class="bg"></div></div>
277 
                <div class="demo-slide"><div class="bg"></div></div>
278 
                <div class="demo-slide"><div class="bg"></div></div>
279 
                <div class="demo-slide"><div class="bg"></div></div>
280 
                <div class="demo-slide"><div class="bg"></div></div>
281 
                <div class="demo-slide"><div class="bg"></div></div>
282 
                <div class="demo-slide"><div class="bg"></div></div>
283 
                <div class="demo-slide"><div class="bg"></div></div>
284 
                <div class="demo-slide"><div class="bg"></div></div>
285 
              </div>
286 
              <h3>Custom</h3>
287 
            </a>
288 
          </div>
289 
 
290 
          <div class="span3">
291 
            <a href="itemsCustom.html" class="demo-box">
292 
              <div class="demo-wrapper demo-full clearfix">
293 
                <div class="demo-slide"><div class="bg"></div></div>
294 
                <div class="demo-slide"><div class="bg"></div></div>
295 
                <div class="demo-slide"><div class="bg"></div></div>
296 
                <div class="demo-slide"><div class="bg"></div></div>
297 
              </div>
298 
              <h3>Custom 2</h3>
299 
            </a>
300 
          </div>
301 
 
302 
          <div class="span3">
303 
            <a href="one.html" class="demo-box">
304 
              <div class="demo-wrapper demo-one clearfix">
305 
                <div class="demo-slide"><div class="bg"></div></div>
306 
              </div>
307 
              <h3>One Slide</h3>
308 
            </a>
309 
          </div>
310 
 
311 
        </div>
312 
        <div class="row demos-row">
313 
          <div class="span3">
314 
            <a href="json.html" class="demo-box">
315 
              <div class="demo-wrapper demo-Json clearfix">
316 
                <div class="demo-slide"><div class="bg"></div></div>
317 
                <div class="demo-slide"><div class="bg"></div></div>
318 
                <div class="demo-slide"><div class="bg"></div></div>
319 
                <div class="demo-slide"><div class="bg"></div></div>
320 
                <div class="demo-slide"><div class="bg"></div></div>
321 
              </div>
322 
              <h3>JSON</h3>
323 
            </a>
324 
          </div>
325 
 
326 
          <div class="span3">
327 
            <a href="customJson.html" class="demo-box">
328 
              <div class="demo-wrapper demo-Json-custom clearfix">
329 
                <div class="demo-slide"><div class="bg"></div></div>
330 
                <div class="demo-slide"><div class="bg"></div></div>
331 
                <div class="demo-slide"><div class="bg"></div></div>
332 
              </div>
333 
              <h3>JSON Custom</h3>
334 
            </a>
335 
          </div>
336 
 
337 
          <div class="span3">
338 
            <a href="lazyLoad.html" class="demo-box">
339 
              <div class="demo-wrapper demo-lazy clearfix">
340 
                <div class="demo-slide"><div class="bg"></div></div>
341 
                <div class="demo-slide"><div class="bg"></div></div>
342 
                <div class="demo-slide"><div class="bg"></div></div>
343 
              </div>
344 
              <h3>Lazy Load</h3>
345 
            </a>
346 
          </div>
347 
 
348 
          <div class="span3">
349 
            <a href="autoHeight.html" class="demo-box">
350 
              <div class="demo-wrapper demo-height clearfix">
351 
                <div class="demo-slide"><div class="bg"></div></div>
352 
              </div>
353 
              <h3>Auto Height</h3>
354 
            </a>
355 
          </div>
356 
 
357 
        </div>
358 
      </div>
359 
    </div>
360 
 
361 
    <div id="footer">
362 
      <div class="container">
363 
        <div class="row">
364 
          <div class="span12">
365 
            <h5>Bartosz Wojciechowski 2013 / @OwlFonk /
366 
            <a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
367 
            <a href="../changelog.html">changelog</a> /
368 
            <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
369 
            <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>
370 
            <script>
371 
            var owldomain = window.location.hostname.indexOf("owlgraphic");
372 
            if(owldomain !== -1){
373 
              !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');
374 
            }
375 
            </script>
376 
            </h5>
377 
          </div>
378 
        </div>
379 
      </div>
380 
    </div>
381 
 
382 
    <script src="../assets/js/jquery-1.9.1.min.js"></script>
383 
    <script src="../owl-carousel/owl.carousel.js"></script>
384 
 
385 
 
386 
    <!-- Demo -->
387 
 
388 
    <style>
389 
      #owl-demo .item{
390 
        display: block;
391 
        padding: 54px 0px;
392 
        margin: 5px;
393 
        color: #FFF;
394 
        -webkit-border-radius: 3px;
395 
        -moz-border-radius: 3px;
396 
        border-radius: 3px;
397 
        text-align: center;
398 
      }
399 
      .left{
400 
        text-align: left;
401 
        margin-bottom: 10px;
402 
      }
403 
      .left .btn {
404 
        display: block;
405 
      }
406 
    </style>
407 
 
408 
 
409 
    <script>
410 
    $(document).ready(function() {
411 
 
412 
      var owl = $("#owl-demo"),
413 
          i = 0,
414 
          textholder,
415 
          booleanValue = false;
416 
 
417 
      //init carousel
418 
      owl.owlCarousel();
419 
 
420 
      /*
421 
      addItem() method add new slides on given position
422 
 
423 
      Syntax:
424 
      owldata.addItem(htmlString, targetPosition)
425 
 
426 
      First parameter(mandatory) "htmlString" accept string like this:
427 
      var newItem = "<div>new Item</div>"
428 
 
429 
      Second parameter "targetPosition" is optional and accept number values.
430 
      To add item at the end of carousel you could use -1 value. Last item is default value.
431 
      */
432 
 
433 
      $('.add').on("click", function(e){
434 
        e.preventDefault();
435 
        i += 1;
436 
        var content = "<div class=\"item dodgerBlue\"><h1>"+i+"</h1></div>";
437 
        owl.data('owlCarousel').addItem(content);
438 
      });
439 
 
440 
      /*
441 
      Next new owl method is .removeItem()
442 
 
443 
      Syntax:
444 
      owldata.removeItem(targetPosition)
445 
 
446 
      Where parameter "targetPosition" is target item you will remove.
447 
      targetPosition is optional. Default value is last item (-1);
448 
      */
449 
 
450 
      $('.remove').on("click", function(e){
451 
        e.preventDefault();
452 
        i -= 1;
453 
        if(i<=0)i=0;
454 
        $("#owl-demo").data('owlCarousel').removeItem();
455 
      });
456 
 
457 
      /*
458 
      destroy() method unwrap whole plugin and leave original pre carousel structure
459 
 
460 
      Syntax:
461 
      owldata.destroy();
462 
      */
463 
 
464 
      $('.destroy').click(function(e){
465 
        e.preventDefault()
466 
        $("#owl-demo").data('owlCarousel').destroy();
467 
      });
468 
 
469 
      /*
470 
      reinit() method reinitialize plugin
471 
 
472 
      Syntax:
473 
      owldata.reinit(newOptions)
474 
 
475 
      Yes! you can reinit plugin with new options. Old options
476 
      will be overwritten if exist or added if new.
477 
 
478 
      You can easly add new content by ajax or change old options with reinit method.
479 
      */
480 
 
481 
      $('.reinit').click(function(e){
482 
        e.preventDefault()
483 
        if(booleanValue === true){
484 
          booleanValue = false;
485 
        } else if(booleanValue === false){
486 
          booleanValue = true;
487 
        }
488 
 
489 
        owl.data('owlCarousel').reinit({
490 
            singleItem : booleanValue
491 
          });
492 
      })
493 
 
494 
      /*
495 
      Well, if you destroyed plugin why not resurect it?
496 
      */
497 
 
498 
      $('.rebuild').click(function(e){
499 
        e.preventDefault()
500 
        owl.owlCarousel();
501 
      });
502 
 
503 
    });
504 
    </script>
505 
 
506 
 
507 
    <script src="../assets/js/bootstrap-collapse.js"></script>
508 
    <script src="../assets/js/bootstrap-transition.js"></script>
509 
    <script src="../assets/js/bootstrap-tab.js"></script>
510 
 
511 
    <script src="../assets/js/google-code-prettify/prettify.js"></script>
512 
    <script src="../assets/js/application.js"></script>
513 
 
514 
  </body>
515 
</html>