Initial commit

This commit is contained in:
Khanh Ngo
2015-12-13 16:34:12 +07:00
commit 2dac8205f6
3113 changed files with 514935 additions and 0 deletions

View File

@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2013
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,72 @@
## OwlCarousel ##
>v.1.3.2
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
[Visit Owl Carousel landing page](http://owlgraphic.com/owlcarousel)
###Features:
* Responsive
* Touch Events
* Mouse Slide Events
* Fully Customizable
* Choose the number of items to be displayed
* Multiple Sliders
* CSS3 3d Transitions
* Custimizable controls
* JSON
* Custom events
* Helpful callbacks
> Tested on IE7, IE8, IE9, IE10, Chrome, Safari, Firefox, Opera, iPhone, iPad, Chrom on Google Nexus.
### More Demos
See what Owl can do:
* [With auto scaling images](http://owlgraphic.com/owlcarousel/demos/images.html)
* [Full Width](http://owlgraphic.com/owlcarousel/demos/full.html)
* [Custom Widths](http://owlgraphic.com/owlcarousel/demos/custom.html)
* [One Item](http://owlgraphic.com/owlcarousel/demos/one.html)
* [More demos](http://owlgraphic.com/owlcarousel/#more-demos)
### 1.Getting Started
Load jQuery(1.7+) and include Owl Carousel plugin files
```html
<!-- Basic stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<!-- Include js plugin -->
<script src="owl-carousel/owl.carousel.js"></script>
```
### 2.Set up your HTML
You don't need any special markup. All you need is to wrap your divs inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.
```html
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
...
</div>
```
### 3.Call the plugin
Now call the Owl initializer function and your carousel is ready.
```html
$(".owl-carousel").owlCarousel();
```
### 4. For more details visit [OwlCarousel landing page](http://owlgraphic.com/owlcarousel)
##### Changelog available [here](http://owlgraphic.com/owlcarousel/changelog.html)
License
------------
The MIT License (MIT)

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,421 @@
/* Owl Carousel Bootstrap Custom CSS */
/* Header Navigation */
#top-nav{
border-bottom: 1px solid #e1e6dd;
background: #FFF;
-webkit-transform: translateZ(0)
}
#top-nav.navbar{
margin-bottom: 0px;
}
#top-nav.navbar .nav{
margin: 8px 0px;
}
#top-nav.navbar .nav > li > a {
padding: 6px 12px;
margin: 0px;
text-transform: uppercase;
font-weight: 400;
-webkit-transition: background-color 200ms ease;
-moz-transition: background-color 200ms ease;
-o-transition: background-color 200ms ease;
transition: background-color 200ms ease;
}
#top-nav.navbar .nav > li > a.download{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#top-nav.navbar .nav > li > a.download-on{
background-color: #ff8a3c;
color: #ffffff;
}
#top-nav.navbar .nav > li > a.download-on:hover{
color: #ffffff;
background-color: #ff7920;
}
.btn-navbar span.icon-bar{
margin-top: 0px;
}
/* Header */
#header{
background: #f1f1f1;
padding: 100px 0 100px;
}
#header h1{
color: #7fc242;
margin-bottom: 10px;
margin-top: 40px;
}
#header h3{
margin-bottom: 30px;
width: 400px;
}
#header .btn-success {
padding: 15px 30px;
margin-bottom: 5px;
}
#header .logo{
display: block;
margin-top:60px;
float: right
}
img.arrow-down{
margin: 0 auto;
display: block;
}
h1{
margin-top: 80px;
}
pre.pre-show{
margin: 40px 0px;
}
.tab-content pre.pre-show{
margin: 0px 0px 0px 0px;
}
.nav-tabs{
margin-top: 20px;
margin-bottom: 0px;
}
.tab-content{
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
}
/* Content */
.table th, .table td {
padding: 8px 12px;
}
/* Footer */
#footer{
padding: 20px 0px;
background: #f3f3f3;
text-align: center
}
.twitter-share-button{
top: 4px;
position: relative;
}
/* Demo Slides */
#owl-example .item{
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
#owl-example .item img{
width: auto;
margin: 0 auto;
display: block;
}
#owl-example .item h3{
font-size: 28px;
font-weight: 300;
margin: 25px 0 0;
}
#owl-example .item h4{
margin: 5px 0 0;
font-size: 18px;
}
.item h1{
margin: inherit;
}
.orange{
background: #ff8a3c;
}
.darkCyan{
background: #42bdc2;
}
.forestGreen{
background: #7fc242;
}
.yellow {
background: #ffd800;
}
.dodgerBlue {
background: #388bd1;
}
.skyBlue {
background: #a1def8;
}
.zombieGreen {
background: #3fbf79;
}
.violet {
background: #db6ac5;
}
.yellowLight {
background: #fee664;
}
.steelGray {
background: #cad3d0;
}
/* More Demo Box */
#example-info h1,
#more h1{
margin-top: 40px;
}
.demos-row{
margin-top: 30px;
margin-bottom: 30px;
}
.demo-page{
margin-top: 0px;
margin-bottom: 100px;
}
.demo-box{
display: block;
background: #f3f3f3;
text-align: center;
font-size: 18px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.demo-box h3{
padding-bottom:20px;
margin: 0px;
color: #869690;
}
.demo-box:hover{
text-decoration: none;
}
.demo-wrapper{
padding: 30px 0px 20px 0px;
padding-left: 30px;
padding-right: 30px;
}
.demo-slide {
float: left;
}
.demo-slide .bg{
background: #aebab6;
margin-right: 1px;
height: 100%;
}
.demo-box:hover .demo-slide .bg{
background: #7fc242;
}
/* Images */
.demo-images .demo-slide{
height: 40px;
width: 33.3333333%;
}
/* Full */
.demo-full {
padding-left: 0px;
padding-right: 0px;
}
.demo-full .demo-slide{
height: 40px;
width: 25%;
}
/* Custom */
.demo-custom .demo-slide{
height: 40px;
width: 10%;
}
/* One */
.demo-one .demo-slide{
height: 40px;
width: 100%;
}
/* json */
.demo-Json .demo-slide {
height: 40px;
width: 20%;
}
.demo-Json-custom .demo-slide{
height: 40px;
width: 33.3333333%;
}
/* loading icon */
.demo-lazy .demo-slide{
height: 40px;
width: 33.3333333%;
}
.demo-lazy .demo-slide .bg{
background: url('../img/AjaxLoader.gif') no-repeat center center #aebab6;
}
/* Auto Height */
.demo-height .demo-slide{
height: 40px;
width: 100%;
}
/* Changelog */
#changelog{
margin-bottom: 40px;
}
#changelog .label{
margin-bottom:10px;
}
#changelog .log{
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #e1e6dd;
}
/* Faq */
#faq dt {
line-height: 26px;
}
#faq dd{
line-height: 22px;
margin-bottom: 20px;
}
/* Responsive Stuff */
@media (max-width: 979px) {
.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
padding: 0px;
}
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
}
}
@media (max-width: 768px) {
.navbar.navbar-fixed-top{
position: static;
}
.btn.btn-navbar{
margin: 9px 20px 9px 8px;
padding: 10px 10px;
}
.nav-collapse .nav > li{
border-top: 1px solid #e1e6dd;
text-align: center
}
#header .logo{
margin-top:40px;
margin: 20px auto 0px;
float: none;
height: 150px;
}
#header {
text-align: center;
padding: 60px 0px 30px;
}
#header h1{
margin: 10px 0;
}
#header h3{
margin-bottom: 10px;
width: auto;
padding: 0px 20px;
}
h1 {
font-size: 38px;
margin: 20px 0;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 13px;
}
h6 {
font-size: 12px;
}
}
@media (max-width: 480px) {
.navbar-fixed-top, .navbar-fixed-bottom {
position: static;
}
#header {
text-align: center;
padding: 20px 0px 20px;
}
#header .logo{
margin-top:0px;
}
}
/*
NO MORE TABLES!! ;)
*/
@media (max-width: 767px) {
.hp-table table, .hp-table thead, .hp-table .hp-table tbody, .hp-table th, .hp-table td, .hp-table tr {
display: block;
}
.hp-table thead tr {
display: none;
}
.hp-table tr { border: 0px solid #ccc; margin-bottom: 10px; }
.hp-table td:before {
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
.hp-table td:nth-of-type(2):before {
content: "Default:";
font-weight: bold;
}
.hp-table td:nth-of-type(3):before {
content: "Type:";
font-weight: bold;
}
.hp-table td:nth-of-type(4):before {
content: "Description:";
font-weight: bold;
}
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 755 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

View File

@ -0,0 +1,26 @@
$(function(){
window.prettyPrint && prettyPrint();
}(window.jQuery));
jQuery(document).ready(function($) {
//Download Link Highlight
if($("body").data("page")==="frontpage"){
$(window).scroll(function(){
var scrolled = $(window).scrollTop();
var downloadLink = $("#top-nav").find(".download")
if(scrolled >= 420){
downloadLink.addClass("download-on");
} else if (scrolled < 420){
downloadLink.removeClass("download-on");
}
})
}
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
});

View File

@ -0,0 +1,167 @@
/* =============================================================
* bootstrap-collapse.js v2.3.2
* http://twitter.github.com/bootstrap/javascript.html#collapse
* =============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
!function ($) {
"use strict"; // jshint ;_;
/* COLLAPSE PUBLIC CLASS DEFINITION
* ================================ */
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.collapse.defaults, options)
if (this.options.parent) {
this.$parent = $(this.options.parent)
}
this.options.toggle && this.toggle()
}
Collapse.prototype = {
constructor: Collapse
, dimension: function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
, show: function () {
var dimension
, scroll
, actives
, hasData
if (this.transitioning || this.$element.hasClass('in')) return
dimension = this.dimension()
scroll = $.camelCase(['scroll', dimension].join('-'))
actives = this.$parent && this.$parent.find('> .accordion-group > .in')
if (actives && actives.length) {
hasData = actives.data('collapse')
if (hasData && hasData.transitioning) return
actives.collapse('hide')
hasData || actives.data('collapse', null)
}
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])
}
, hide: function () {
var dimension
if (this.transitioning || !this.$element.hasClass('in')) return
dimension = this.dimension()
this.reset(this.$element[dimension]())
this.transition('removeClass', $.Event('hide'), 'hidden')
this.$element[dimension](0)
}
, reset: function (size) {
var dimension = this.dimension()
this.$element
.removeClass('collapse')
[dimension](size || 'auto')
[0].offsetWidth
this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')
return this
}
, transition: function (method, startEvent, completeEvent) {
var that = this
, complete = function () {
if (startEvent.type == 'show') that.reset()
that.transitioning = 0
that.$element.trigger(completeEvent)
}
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
this.transitioning = 1
this.$element[method]('in')
$.support.transition && this.$element.hasClass('collapse') ?
this.$element.one($.support.transition.end, complete) :
complete()
}
, toggle: function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
}
/* COLLAPSE PLUGIN DEFINITION
* ========================== */
var old = $.fn.collapse
$.fn.collapse = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('collapse')
, options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.collapse.defaults = {
toggle: true
}
$.fn.collapse.Constructor = Collapse
/* COLLAPSE NO CONFLICT
* ==================== */
$.fn.collapse.noConflict = function () {
$.fn.collapse = old
return this
}
/* COLLAPSE DATA-API
* ================= */
$(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
var $this = $(this), href
, target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
, option = $(target).data('collapse') ? 'toggle' : $this.data()
$this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
$(target).collapse(option)
})
}(window.jQuery);

View File

@ -0,0 +1,144 @@
/* ========================================================
* bootstrap-tab.js v2.3.2
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ======================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* TAB CLASS DEFINITION
* ==================== */
var Tab = function (element) {
this.element = $(element)
}
Tab.prototype = {
constructor: Tab
, show: function () {
var $this = this.element
, $ul = $this.closest('ul:not(.dropdown-menu)')
, selector = $this.attr('data-target')
, previous
, $target
, e
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
if ( $this.parent('li').hasClass('active') ) return
previous = $ul.find('.active:last a')[0]
e = $.Event('show', {
relatedTarget: previous
})
$this.trigger(e)
if (e.isDefaultPrevented()) return
$target = $(selector)
this.activate($this.parent('li'), $ul)
this.activate($target, $target.parent(), function () {
$this.trigger({
type: 'shown'
, relatedTarget: previous
})
})
}
, activate: function ( element, container, callback) {
var $active = container.find('> .active')
, transition = callback
&& $.support.transition
&& $active.hasClass('fade')
function next() {
$active
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
element.addClass('active')
if (transition) {
element[0].offsetWidth // reflow for transition
element.addClass('in')
} else {
element.removeClass('fade')
}
if ( element.parent('.dropdown-menu') ) {
element.closest('li.dropdown').addClass('active')
}
callback && callback()
}
transition ?
$active.one($.support.transition.end, next) :
next()
$active.removeClass('in')
}
}
/* TAB PLUGIN DEFINITION
* ===================== */
var old = $.fn.tab
$.fn.tab = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('tab')
if (!data) $this.data('tab', (data = new Tab(this)))
if (typeof option == 'string') data[option]()
})
}
$.fn.tab.Constructor = Tab
/* TAB NO CONFLICT
* =============== */
$.fn.tab.noConflict = function () {
$.fn.tab = old
return this
}
/* TAB DATA-API
* ============ */
$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
}(window.jQuery);

View File

@ -0,0 +1,60 @@
/* ===================================================
* bootstrap-transition.js v2.3.2
* http://twitter.github.com/bootstrap/javascript.html#transitions
* ===================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
* ======================================================= */
$(function () {
$.support.transition = (function () {
var transitionEnd = (function () {
var el = document.createElement('bootstrap')
, transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd'
, 'MozTransition' : 'transitionend'
, 'OTransition' : 'oTransitionEnd otransitionend'
, 'transition' : 'transitionend'
}
, name
for (name in transEndEventNames){
if (el.style[name] !== undefined) {
return transEndEventNames[name]
}
}
}())
return transitionEnd && {
end: transitionEnd
}
})()
})
}(window.jQuery);

View File

@ -0,0 +1,26 @@
.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #ff8a3c; }
.kwd, .prettyprint .tag { color: #195f91; }
.typ, .atn, .dec, .var { color: #3fbf79; }
.pln { color: #48484c; }
.pun{ color:#48484c; }
pre.prettyprint {
padding: 20px;
background-color: #f3f3f3;
border: 0px solid #e1e1e8;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin: 0 0 0 40px; /* IE indents via margin-left */
}
ol.linenums li {
padding-left: 12px;
color: #bebec5;
line-height: 20px;
text-shadow: 0 1px 0 #fff;
}

View File

@ -0,0 +1,28 @@
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();

View File

@ -0,0 +1,34 @@
!function(){var r=null;
(function(){function X(e){function j(){try{J.doScroll("left")}catch(e){P(j,50);return}w("poll")}function w(j){if(!(j.type=="readystatechange"&&x.readyState!="complete")&&((j.type=="load"?n:x)[z](i+j.type,w,!1),!m&&(m=!0)))e.call(n,j.type||j)}var Y=x.addEventListener,m=!1,C=!0,t=Y?"addEventListener":"attachEvent",z=Y?"removeEventListener":"detachEvent",i=Y?"":"on";if(x.readyState=="complete")e.call(n,"lazy");else{if(x.createEventObject&&J.doScroll){try{C=!n.frameElement}catch(A){}C&&j()}x[t](i+"DOMContentLoaded",
w,!1);x[t](i+"readystatechange",w,!1);n[t](i+"load",w,!1)}}function Q(){S&&X(function(){var e=K.length;$(e?function(){for(var j=0;j<e;++j)(function(e){P(function(){n.exports[K[e]].apply(n,arguments)},0)})(j)}:void 0)})}for(var n=window,P=n.setTimeout,x=document,J=x.documentElement,L=x.head||x.getElementsByTagName("head")[0]||J,z="",A=x.scripts,m=A.length;--m>=0;){var M=A[m],T=M.src.match(/^[^#?]*\/run_prettify\.js(\?[^#]*)?(?:#.*)?$/);if(T){z=T[1]||"";M.parentNode.removeChild(M);break}}var S=!0,D=
[],N=[],K=[];z.replace(/[&?]([^&=]+)=([^&]+)/g,function(e,j,w){w=decodeURIComponent(w);j=decodeURIComponent(j);j=="autorun"?S=!/^[0fn]/i.test(w):j=="lang"?D.push(w):j=="skin"?N.push(w):j=="callback"&&K.push(w)});m=0;for(z=D.length;m<z;++m)(function(){var e=x.createElement("script");e.onload=e.onerror=e.onreadystatechange=function(){if(e&&(!e.readyState||/loaded|complete/.test(e.readyState)))e.onerror=e.onload=e.onreadystatechange=r,--R,R||P(Q,0),e.parentNode&&e.parentNode.removeChild(e),e=r};e.type=
"text/javascript";e.src="https://google-code-prettify.googlecode.com/svn/loader/lang-"+encodeURIComponent(D[m])+".js";L.insertBefore(e,L.firstChild)})(D[m]);for(var R=D.length,A=[],m=0,z=N.length;m<z;++m)A.push("https://google-code-prettify.googlecode.com/svn/loader/skins/"+encodeURIComponent(N[m])+".css");A.push("https://google-code-prettify.googlecode.com/svn/loader/prettify.css");(function(e){function j(m){if(m!==w){var n=x.createElement("link");n.rel="stylesheet";n.type="text/css";if(m+1<w)n.error=
n.onerror=function(){j(m+1)};n.href=e[m];L.appendChild(n)}}var w=e.length;j(0)})(A);var $=function(){window.PR_SHOULD_USE_CONTINUATION=!0;var e;(function(){function j(a){function d(f){var b=f.charCodeAt(0);if(b!==92)return b;var a=f.charAt(1);return(b=i[a])?b:"0"<=a&&a<="7"?parseInt(f.substring(1),8):a==="u"||a==="x"?parseInt(f.substring(2),16):f.charCodeAt(1)}function h(f){if(f<32)return(f<16?"\\x0":"\\x")+f.toString(16);f=String.fromCharCode(f);return f==="\\"||f==="-"||f==="]"||f==="^"?"\\"+f:
f}function b(f){var b=f.substring(1,f.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),f=[],a=b[0]==="^",c=["["];a&&c.push("^");for(var a=a?1:0,g=b.length;a<g;++a){var k=b[a];if(/\\[bdsw]/i.test(k))c.push(k);else{var k=d(k),o;a+2<g&&"-"===b[a+1]?(o=d(b[a+2]),a+=2):o=k;f.push([k,o]);o<65||k>122||(o<65||k>90||f.push([Math.max(65,k)|32,Math.min(o,90)|32]),o<97||k>122||f.push([Math.max(97,k)&-33,Math.min(o,122)&-33]))}}f.sort(function(f,a){return f[0]-
a[0]||a[1]-f[1]});b=[];g=[];for(a=0;a<f.length;++a)k=f[a],k[0]<=g[1]+1?g[1]=Math.max(g[1],k[1]):b.push(g=k);for(a=0;a<b.length;++a)k=b[a],c.push(h(k[0])),k[1]>k[0]&&(k[1]+1>k[0]&&c.push("-"),c.push(h(k[1])));c.push("]");return c.join("")}function e(f){for(var a=f.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),c=a.length,d=[],g=0,k=0;g<c;++g){var o=a[g];o==="("?++k:"\\"===o.charAt(0)&&(o=+o.substring(1))&&(o<=k?d[o]=-1:a[g]=h(o))}for(g=
1;g<d.length;++g)-1===d[g]&&(d[g]=++j);for(k=g=0;g<c;++g)o=a[g],o==="("?(++k,d[k]||(a[g]="(?:")):"\\"===o.charAt(0)&&(o=+o.substring(1))&&o<=k&&(a[g]="\\"+d[o]);for(g=0;g<c;++g)"^"===a[g]&&"^"!==a[g+1]&&(a[g]="");if(f.ignoreCase&&F)for(g=0;g<c;++g)o=a[g],f=o.charAt(0),o.length>=2&&f==="["?a[g]=b(o):f!=="\\"&&(a[g]=o.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var j=0,F=!1,l=!1,I=0,c=a.length;I<c;++I){var p=a[I];if(p.ignoreCase)l=
!0;else if(/[a-z]/i.test(p.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){F=!0;l=!1;break}}for(var i={b:8,t:9,n:10,v:11,f:12,r:13},q=[],I=0,c=a.length;I<c;++I){p=a[I];if(p.global||p.multiline)throw Error(""+p);q.push("(?:"+e(p)+")")}return RegExp(q.join("|"),l?"gi":"g")}function m(a,d){function h(a){var c=a.nodeType;if(c==1){if(!b.test(a.className)){for(c=a.firstChild;c;c=c.nextSibling)h(c);c=a.nodeName.toLowerCase();if("br"===c||"li"===c)e[l]="\n",F[l<<1]=j++,F[l++<<1|1]=a}}else if(c==
3||c==4)c=a.nodeValue,c.length&&(c=d?c.replace(/\r\n?/g,"\n"):c.replace(/[\t\n\r ]+/g," "),e[l]=c,F[l<<1]=j,j+=c.length,F[l++<<1|1]=a)}var b=/(?:^|\s)nocode(?:\s|$)/,e=[],j=0,F=[],l=0;h(a);return{a:e.join("").replace(/\n$/,""),d:F}}function n(a,d,h,b){d&&(a={a:d,e:a},h(a),b.push.apply(b,a.g))}function x(a){for(var d=void 0,h=a.firstChild;h;h=h.nextSibling)var b=h.nodeType,d=b===1?d?a:h:b===3?S.test(h.nodeValue)?a:d:d;return d===a?void 0:d}function C(a,d){function h(a){for(var l=a.e,j=[l,"pln"],c=
0,p=a.a.match(e)||[],m={},q=0,f=p.length;q<f;++q){var B=p[q],y=m[B],u=void 0,g;if(typeof y==="string")g=!1;else{var k=b[B.charAt(0)];if(k)u=B.match(k[1]),y=k[0];else{for(g=0;g<i;++g)if(k=d[g],u=B.match(k[1])){y=k[0];break}u||(y="pln")}if((g=y.length>=5&&"lang-"===y.substring(0,5))&&!(u&&typeof u[1]==="string"))g=!1,y="src";g||(m[B]=y)}k=c;c+=B.length;if(g){g=u[1];var o=B.indexOf(g),H=o+g.length;u[2]&&(H=B.length-u[2].length,o=H-g.length);y=y.substring(5);n(l+k,B.substring(0,o),h,j);n(l+k+o,g,A(y,
g),j);n(l+k+H,B.substring(H),h,j)}else j.push(l+k,y)}a.g=j}var b={},e;(function(){for(var h=a.concat(d),l=[],i={},c=0,p=h.length;c<p;++c){var m=h[c],q=m[3];if(q)for(var f=q.length;--f>=0;)b[q.charAt(f)]=m;m=m[1];q=""+m;i.hasOwnProperty(q)||(l.push(m),i[q]=r)}l.push(/[\S\s]/);e=j(l)})();var i=d.length;return h}function t(a){var d=[],h=[];a.tripleQuotedStrings?d.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,
r,"'\""]):a.multiLineStrings?d.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,r,"'\"`"]):d.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,r,"\"'"]);a.verbatimStrings&&h.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,r]);var b=a.hashComments;b&&(a.cStyleComments?(b>1?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,r,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\n\r]*)/,
r,"#"]),h.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,r])):d.push(["com",/^#[^\n\r]*/,r,"#"]));a.cStyleComments&&(h.push(["com",/^\/\/[^\n\r]*/,r]),h.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,r]));if(b=a.regexLiterals){var e=(b=b>1?"":"\n\r")?".":"[\\S\\s]";h.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+
("/(?=[^/*"+b+"])(?:[^/\\x5B\\x5C"+b+"]|\\x5C"+e+"|\\x5B(?:[^\\x5C\\x5D"+b+"]|\\x5C"+e+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&h.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&h.push(["kwd",RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),r]);d.push(["pln",/^\s+/,r," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");h.push(["lit",/^@[$_a-z][\w$@]*/i,r],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,r],["pln",/^[$_a-z][\w$@]*/i,r],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,
r,"0123456789"],["pln",/^\\[\S\s]?/,r],["pun",RegExp(b),r]);return C(d,h)}function z(a,d,h){function b(a){var c=a.nodeType;if(c==1&&!j.test(a.className))if("br"===a.nodeName)e(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((c==3||c==4)&&h){var d=a.nodeValue,i=d.match(m);if(i)c=d.substring(0,i.index),a.nodeValue=c,(d=d.substring(i.index+i[0].length))&&a.parentNode.insertBefore(l.createTextNode(d),a.nextSibling),e(a),c||a.parentNode.removeChild(a)}}
function e(a){function b(a,c){var d=c?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),h=a.nextSibling;f.appendChild(d);for(var e=h;e;e=h)h=e.nextSibling,f.appendChild(e)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),d;(d=a.parentNode)&&d.nodeType===1;)a=d;c.push(a)}for(var j=/(?:^|\s)nocode(?:\s|$)/,m=/\r\n?|\n/,l=a.ownerDocument,i=l.createElement("li");a.firstChild;)i.appendChild(a.firstChild);for(var c=[i],p=0;p<c.length;++p)b(c[p]);d===(d|0)&&c[0].setAttribute("value",
d);var n=l.createElement("ol");n.className="linenums";for(var d=Math.max(0,d-1|0)||0,p=0,q=c.length;p<q;++p)i=c[p],i.className="L"+(p+d)%10,i.firstChild||i.appendChild(l.createTextNode("\u00a0")),n.appendChild(i);a.appendChild(n)}function i(a,d){for(var h=d.length;--h>=0;){var b=d[h];U.hasOwnProperty(b)?V.console&&console.warn("cannot override language handler %s",b):U[b]=a}}function A(a,d){if(!a||!U.hasOwnProperty(a))a=/^\s*</.test(d)?"default-markup":"default-code";return U[a]}function D(a){var d=
a.h;try{var h=m(a.c,a.i),b=h.a;a.a=b;a.d=h.d;a.e=0;A(d,b)(a);var e=/\bMSIE\s(\d+)/.exec(navigator.userAgent),e=e&&+e[1]<=8,d=/\n/g,i=a.a,j=i.length,h=0,l=a.d,n=l.length,b=0,c=a.g,p=c.length,t=0;c[p]=j;var q,f;for(f=q=0;f<p;)c[f]!==c[f+2]?(c[q++]=c[f++],c[q++]=c[f++]):f+=2;p=q;for(f=q=0;f<p;){for(var x=c[f],y=c[f+1],u=f+2;u+2<=p&&c[u+1]===y;)u+=2;c[q++]=x;c[q++]=y;f=u}c.length=q;var g=a.c,k;if(g)k=g.style.display,g.style.display="none";try{for(;b<n;){var o=l[b+2]||j,H=c[t+2]||j,u=Math.min(o,H),E=l[b+
1],W;if(E.nodeType!==1&&(W=i.substring(h,u))){e&&(W=W.replace(d,"\r"));E.nodeValue=W;var Z=E.ownerDocument,s=Z.createElement("span");s.className=c[t+1];var z=E.parentNode;z.replaceChild(s,E);s.appendChild(E);h<o&&(l[b+1]=E=Z.createTextNode(i.substring(u,o)),z.insertBefore(E,s.nextSibling))}h=u;h>=o&&(b+=2);h>=H&&(t+=2)}}finally{if(g)g.style.display=k}}catch(v){V.console&&console.log(v&&v.stack||v)}}var V=window,G=["break,continue,do,else,for,if,return,while"],O=[[G,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],J=[O,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],K=[O,"abstract,assert,boolean,byte,extends,final,finally,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],
L=[K,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,internal,into,is,let,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where"],O=[O,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],M=[G,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
N=[G,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],R=[G,"as,assert,const,copy,drop,enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv,pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"],G=[G,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],Q=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,
S=/\S/,T=t({keywords:[J,L,O,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",M,N,G],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),U={};i(T,["default-code"]);i(C([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",
/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);i(C([["pln",/^\s+/,r," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,r,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],
["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);i(C([],[["atv",/^[\S\s]+/]]),["uq.val"]);i(t({keywords:J,hashComments:!0,cStyleComments:!0,types:Q}),["c","cc","cpp","cxx","cyc","m"]);i(t({keywords:"null,true,false"}),["json"]);i(t({keywords:L,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:Q}),
["cs"]);i(t({keywords:K,cStyleComments:!0}),["java"]);i(t({keywords:G,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);i(t({keywords:M,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);i(t({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);i(t({keywords:N,
hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);i(t({keywords:O,cStyleComments:!0,regexLiterals:!0}),["javascript","js"]);i(t({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);i(t({keywords:R,cStyleComments:!0,multilineStrings:!0}),["rc","rs","rust"]);
i(C([],[["str",/^[\S\s]+/]]),["regex"]);var X=V.PR={createSimpleLexer:C,registerLangHandler:i,sourceDecorator:t,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:function(a,d,e){var b=document.createElement("div");b.innerHTML="<pre>"+a+"</pre>";b=b.firstChild;e&&z(b,e,!0);D({h:d,j:e,c:b,i:1});return b.innerHTML},
prettyPrint:e=e=function(a,d){function e(){for(var b=V.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;p<j.length&&c.now()<b;p++){for(var d=j[p],m=k,l=d;l=l.previousSibling;){var n=l.nodeType,s=(n===7||n===8)&&l.nodeValue;if(s?!/^\??prettify\b/.test(s):n!==3||/\S/.test(l.nodeValue))break;if(s){m={};s.replace(/\b(\w+)=([\w%+\-.:]+)/g,function(a,b,c){m[b]=c});break}}l=d.className;if((m!==k||f.test(l))&&!w.test(l)){n=!1;for(s=d.parentNode;s;s=s.parentNode)if(g.test(s.tagName)&&s.className&&f.test(s.className)){n=
!0;break}if(!n){d.className+=" prettyprinted";n=m.lang;if(!n){var n=l.match(q),A;if(!n&&(A=x(d))&&u.test(A.tagName))n=A.className.match(q);n&&(n=n[1])}if(y.test(d.tagName))s=1;else var s=d.currentStyle,v=i.defaultView,s=(s=s?s.whiteSpace:v&&v.getComputedStyle?v.getComputedStyle(d,r).getPropertyValue("white-space"):0)&&"pre"===s.substring(0,3);v=m.linenums;if(!(v=v==="true"||+v))v=(v=l.match(/\blinenums\b(?::(\d+))?/))?v[1]&&v[1].length?+v[1]:!0:!1;v&&z(d,v,s);t={h:n,c:d,j:v,i:s};D(t)}}}p<j.length?
P(e,250):"function"===typeof a&&a()}for(var b=d||document.body,i=b.ownerDocument||document,b=[b.getElementsByTagName("pre"),b.getElementsByTagName("code"),b.getElementsByTagName("xmp")],j=[],m=0;m<b.length;++m)for(var l=0,n=b[m].length;l<n;++l)j.push(b[m][l]);var b=r,c=Date;c.now||(c={now:function(){return+new Date}});var p=0,t,q=/\blang(?:uage)?-([\w.]+)(?!\S)/,f=/\bprettyprint\b/,w=/\bprettyprinted\b/,y=/pre|xmp/i,u=/^code$/i,g=/^(?:pre|code|xmp)$/i,k={};e()}};typeof define==="function"&&define.amd&&
define("google-code-prettify",[],function(){return X})})();return e}();R||P(Q,0)})();}()

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,270 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Changelog</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="owl-carousel/owl.theme.css" rel="stylesheet">
<!-- Prettify -->
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="changelog" class="container">
<div class="row">
<div class="span12">
<h1>Changelog</h1>
<div class="span12 log">
<span class="label label-success">v1.3.2</span> <span class="label">21.11.2013</span>
<ul>
<li>Changed semantic versioning v1.32 > v1.3.2</li>
<li>Clean-up the code</li>
<li>Move out transitons styls to owl.transitions.css file</li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.31</span> <span class="label">21.11.2013</span>
<ul>
<li>Fixed startDrag event</li>
<li>Included awesome <code>itemsCustom</code> function. <a href="demos/itemsCustom.html">See demo</a>. Big thanks to <a href="https://github.com/nchankov">Nik Chankov</a> for code, demo and description.</li>
<li>Fixed sync <a href="demos/sync.html">demo</a></li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.3</span> <span class="label">18.11.2013</span>
<ul>
<li>Fixed startDragging callback - now it pass correct "this" value</li>
<li>Updated owl status method with dragDirection information</li>
<li>Fixed updating prevItem on owl status object</li>
<li>Included support for lazy load background images</li>
<li>Added afterLazyLoad callback(thx JaySala)</li>
<li>Removed "opacity=0" style while using destroy method.</li>
<li>Fixed afterMove callback. Now its fire only when you successfull slide.</li>
<li>Disable drag gestures if there is no items outside viewport.</li>
<li><code>scrollByPage</code> works with darg gestures now. </li>
<li>Removed slide animation on changing browser width.</li>
<li>Added <a href="demos/owlStatus.html">Owl Status</a> and <a href="demos/sync.html">Sync</a> demos.</li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.29</span> <span class="label">11.11.2013</span>
<ul>
<li>Disabled right click event</li>
<li>Prevented ghostclicking on Android Chrome browser</li>
<li>Added visibleItems loop for future functions.</li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.28</span> <span class="label">30.10.2013</span>
<ul>
<li>Included <code>itemsScaleUp:false</code> method</li>
<li>Included <a href="demos/scaleup.html">scaleUp demo</a></li>
<li>Allowing to set options via data attributes ( THX zerghiomario)</li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.27</span> <span class="label">17.10.2013</span>
<ul>
<li>Fixed <code>destroy</code> method</li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.26</span> <span class="label">11.10.2013</span>
<ul>
<li>Fixed autoPlay on CSS3 Transitions (Thanks Matuus)</li>
<li>Added <code>lazyEffect : "fade"</code></li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.25</span> <span class="label">10.10.2013</span>
<ul>
<li>Fixed lazyLoad ( THX to Aaron Layton )</li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.24</span> <span class="label">09.10.2013</span>
<ul>
<li>Updated lazyLoad</li>
<li>Included <code>beforeUpdate</code> and <code>afterUpdate</code> callbacks</li>
<li>Included <code>dragBeforeAnimFinish:true</code> option to ignore whether a transition is done or not. Thanks to Euxneks</li>
<li>Included <code>destroy</code>, <code>reinit</code>, <code>addItem</code> and <code>removeItem</code> methods</li>
<li>Added Manipulations demo</li>
<li>Fix to force 3d in browsers that can handle it.</li>
<li>Fixed disableTextSelect event</li>
<li>Fixed watchVisibility function</li>
<li>Fixed click and drag event bug on win7 Chrome(thanks to Anydog)</li>
<li>Fixed click events on IE8</li>
<li>Thanks to all contributors and bug finders :)</li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.23</span> <span class="label">28.09.2013</span>
<ul>
<li>Included CSS3 Transitions. <a href="demos/transitions.html">See demo</a></li>
<li>Fix typo on main demo</li>
<li>Fixed opacity bug while carousel was hidden (thx seanjacob)</li>
<li>General cleanup</li>
<li>Removed <code>goToFirst</code> from options list.</li>
<li>Changed name <code>goToFirstSpeed</code> to <code>rewindSpeed</code></li>
<li>Changed name <code>goToFirstNav</code> to <code>rewindNav</code></li>
<li>Included <code>responsiveBaseWidth</code> options. Use it if you need responsivnes based on your own element width instead of the window width.</li>
<li>Included <code>"owl.goTo"</code> custom event</li>
<li>Included <code>"owl.jumpTo"</code> custom event</li>
<li>Included new width <code>itemsTabletSmall : false</code></li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.22</span> <span class="label">15.09.2013</span>
<ul>
<li>Better detection of touch events</li>
<li>Add <code>active</code> class if <code>singleItem</code> is true - <b>It is not working now.</b> Please include <code>addClassActive:true</code> option to get "active" classes on visible items. Works with any numbers of items on screen.</li>
<li>Changed option name from <code>mouseDraggable</code> to <code>mouseDrag</code></li>
<li>Also added <code>touchDrag</code> to disable touch events</li>
<li>Fixed issues on Chrome working on windows 8 touch-enabled PC. Now touch and mouse drag events work together.(Thanks for help to Monsieur Moustache!)</li>
<li>Included base element in parameter for callbacks <code>afterAction</code>, <code>beforeMove</code> and <code>afterMove</code></li>
<li>IE8 responsive fix</li>
<li>Improved autoHeight function</li>
<li>Added touchcancel event. That fixed Android Chrome scrolling issues.</li>
<li>Included Progress Bar demo.</li>
<li>Fixed some spellings</li>
<li>Slightly updated prettify style</li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.21</span> <span class="label">07.09.2013</span>
<ul>
<li>Check if base.owlControlls are present before calling methods on them</li>
<li>Correct the spelling of 'controls'</li>
<li>Rename 'autplaySpeed' to 'autoPlaySpeed'</li>
<li>IE7 owl-theme css demo fix</li>
<li><code>disable</code> class on navigation only if goToFirstNav set to false</li>
<li>Cleaner code (thanks to Stravid)</li>
<li>Added carousel selector element parameter to 'afterInit' callback</li>
<li>Changed scrollPerPageNav to scrollPerPage</li>
<li>Add <code>active</code> class if <code>singleItem</code> is true</li>
</ul>
</div>
<div class="span12 log">
<span class="label label-success">v1.2</span> <span class="label">05.09.2013</span>
<ul>
<li>Fixed capture click event</li>
<li>Navigation text accepts html now</li>
<li>Added <code>goToFirstNav</code> option and is set to true.</li>
<li>Added <code>scrollPerPage</code> option. For navigation only.</li>
<li>Added <code>responsiveRefreshRate</code> option.</li>
<li>Included five callbacks: <code>beforeInit</code>, <code>afterInit</code>, <code>beforeMove</code>, <code>afterMove</code>, <code>afterAction</code></li>
<li>Included <code>lazyLoad</code> function with <code>lazyFollow</code> sub-option</li>
<li>Included <code>autoHeight</code> option.</li>
<li>Included <code>jsonPath</code> function with <code>jsonSuccess</code> callback</li>
<li>Included <code>mouseDraggable</code> option</li>
<li>Four new demos on landing page</li>
<li>Added Changelog and faq</li>
<li>Change Custom demo page</li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
</h5>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="owl-carousel/owl.carousel.js"></script>
<!-- Frontpage Demo -->
<script>
jQuery(document).ready(function($) {
$("#owl-example").owlCarousel();
});
$("body").data("page", "frontpage");
</script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/application.js"></script>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41541058-1', 'owlgraphic.com');
ga('send', 'pageview');
}
</script>
</body>
</html>

View File

@ -0,0 +1,14 @@
Options -Indexes
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html
RewriteRule ^(.*)/$ http://%{HTTP_HOST}/$1
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -0,0 +1,335 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Auto Height</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../owl-carousel/owl.transitions.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Auto Height</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x400/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x200/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x250/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x350/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x300/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x100/42bdc2/FFFFFF"></div>
<div><img src="http://placehold.it/1170x500/42bdc2/FFFFFF"></div>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>Add height to <code>div="owl-wrapper-outer"</code> so you can use diffrent heights on each slide. Use it only for one item per page setting. Don't use it on large content websites.</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay : 3000,
stopOnHover : true,
navigation:true,
paginationSpeed : 1000,
goToFirstSpeed : 2000,
singleItem : true,
autoHeight : true,
transitionStyle:"fade"
});
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel"&gt;
&lt;div&gt;&lt;img src="http://placehold.it/1170x300/42bdc2/FFFFFF"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="http://placehold.it/1170x400/42bdc2/FFFFFF"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="http://placehold.it/1170x500/42bdc2/FFFFFF"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="http://placehold.it/1170x200/42bdc2/FFFFFF"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="http://placehold.it/1170x500/42bdc2/FFFFFF"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="http://placehold.it/1170x250/42bdc2/FFFFFF"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="http://placehold.it/1170x350/42bdc2/FFFFFF"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="http://placehold.it/1170x300/42bdc2/FFFFFF"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="http://placehold.it/1170x100/42bdc2/FFFFFF"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img src="http://placehold.it/1170x500/42bdc2/FFFFFF"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .owl-item div{
padding:5px;
}
#owl-demo .owl-item img{
display: block;
width: 100%;
height: auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .owl-item div{
padding:5px;
}
#owl-demo .owl-item img{
display: block;
width: 100%;
height: auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
</style>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay : 3000,
stopOnHover : true,
navigation:true,
paginationSpeed : 1000,
goToFirstSpeed : 2000,
singleItem : true,
autoHeight : true,
transitionStyle:"fade"
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,365 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Click Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Click events inside content.</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<a class="item link"><h1>1</h1></a>
<a class="item link"><h1>2</h1></a>
<a class="item link"><h1>3</h1></a>
<a class="item link"><h1>4</h1></a>
<a class="item link"><h1>5</h1></a>
<a class="item link"><h1>6</h1></a>
<a class="item link"><h1>7</h1></a>
<a class="item link"><h1>8</h1></a>
<a class="item link"><h1>9</h1></a>
<a class="item link"><h1>10</h1></a>
<a class="item link"><h1>11</h1></a>
<a class="item link"><h1>12</h1></a>
<a class="item link"><h1>13</h1></a>
<a class="item link"><h1>14</h1></a>
<a class="item link"><h1>15</h1></a>
<a class="item link"><h1>16</h1></a>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>Enabling click events inside content was the biggest challenge while building this plugin. Please don't use mouseup and mousedown events, they are reserved for mouse dragging events unless you have to use them. In this case you can disable mouse draggable capabilities by adding<code>mouseDraggable:false</code> in options.
</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 10
});
$('.link').on('click', function(event){
var $this = $(this);
if($this.hasClass('clicked')){
$this.removeAttr('style').removeClass('clicked');
} else{
$this.css('background','#7fc242').addClass('clicked');
}
});
})&#59;
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel"&gt;
&lt;a class="item link"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;15&lt;/h1&gt;&lt;/a&gt;
&lt;a class="item link"&gt;&lt;h1&gt;16&lt;/h1&gt;&lt;/a&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
display: block;
cursor: pointer;
background: #ffd800;
padding: 30px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
#owl-demo .item:hover{
background: #F2CD00;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="full.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Full Width</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
display: block;
cursor: pointer;
background: #ffd800;
padding: 30px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
#owl-demo .item:hover{
background: #F2CD00;
}
</style>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 10
});
$('.link').on('click', function(event){
var $this = $(this);
if($this.hasClass('clicked')){
$this.removeAttr('style').removeClass('clicked');
} else{
$this.css('background','#7fc242').addClass('clicked');
}
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,417 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Custom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Custom Options with Events</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
</div>
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
<a class="btn play">Autoplay</a>
<a class="btn stop">Stop</a>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>This is an example of using custom events for navigation. Also it shows how you can customise widths and inherit option from tablet to mobile.
</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
var owl = &#36;("#owl-demo")&#59;
owl.owlCarousel({
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
})&#59;
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next')&#59;
})
$(".prev").click(function(){
owl.trigger('owl.prev')&#59;
})
$(".play").click(function(){
owl.trigger('owl.play',1000)&#59; //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function(){
owl.trigger('owl.stop')&#59;
})
})&#59;
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
&lt;div class="item"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;15&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;16&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="customNavigation"&gt;
&lt;a class="btn prev"&gt;Previous&lt;/a&gt;
&lt;a class="btn next"&gt;Next&lt;/a&gt;
&lt;a class="btn play"&gt;Autoplay&lt;/a&gt;
&lt;a class="btn stop"&gt;Stop&lt;/a&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.customNavigation{
text-align: center;
}
//use styles below to disable ugly selection
.customNavigation a{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.customNavigation{
text-align: center;
}
.customNavigation a{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
$(".play").click(function(){
owl.trigger('owl.play',1000);
})
$(".stop").click(function(){
owl.trigger('owl.stop');
})
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,358 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Dynamic content via custom JSON</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Dynamic content via custom JSON</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>This example uses custom structure of JSON file <a href="json/customData.json">customData.json</a>.
</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
<li><a href="#JSON">JSON</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
jsonPath : 'json/customData.json',
jsonSuccess : customDataSuccess
});
function customDataSuccess(data){
var content = "";
for(var i in data["items"]){
var img = data["items"][i].img;
var alt = data["items"][i].alt;
content += "&lt;img src=\"" +img+ "\" alt=\"" +alt+ "\"&gt"
}
$("#owl-demo").html(content);
}
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel"&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
background: #a1def8;
padding: 30px 0px;
display: block;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
</pre>
</div>
<div class="tab-pane" id="JSON">
<pre class="pre-show prettyprint linenums">
{
"items" : [
{
"img": "assets/owl1.jpg",
"alt" : "Owl Image 1"
},
{
"img": "assets/owl2.jpg",
"alt" : "Owl Image 2"
},
{
"img": "assets/owl3.jpg",
"alt" : "Owl Image 1"
},
{
"img": "assets/owl4.jpg",
"alt" : "Owl Image 2"
},
{
"img": "assets/owl5.jpg",
"alt" : "Owl Image 1"
},
{
"img": "assets/owl6.jpg",
"alt" : "Owl Image 2"
}
]
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo img{
display: block;
width: 99%;
height: auto;
}
</style>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
jsonPath : 'json/customData.json',
jsonSuccess : customDataSuccess
});
function customDataSuccess(data){
var content = "";
for(var i in data["items"]){
var img = data["items"][i].img;
var alt = data["items"][i].alt;
content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
}
$("#owl-demo").html(content);
}
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,321 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Full Width Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Full Browser Width</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>To get full width use owl-carousel outside your div wrappers.-</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true
});
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
&lt;div class="item"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
background: #42bdc2;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
background: #42bdc2;
padding: 30px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
</style>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,325 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Images Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<!-- Prettify -->
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Content with Images</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>In order for the images to auto fit to slider containers use width 100% on &lt;img&gt;. Check CSS below</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo"&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl1.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl2.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl3.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl4.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl5.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl6.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl7.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl8.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000,
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,372 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - itemsCustom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Define custom and unlimited items.</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
<div class="item"><h1>17</h1></div>
<div class="item"><h1>18</h1></div>
<div class="item"><h1>19</h1></div>
<div class="item"><h1>20</h1></div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>Define custom and unlimited items depending from the width. If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled. For better preview, order the arrays by screen size, but it's not mandatory. Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available. In the example there is dimension with 0 with which cover screens between 0 and 450px.
</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
var owl = &#36;("#owl-demo")&#59;
owl.owlCarousel({
itemsCustom : [
[0, 2],
[450, 4],
[600, 7],
[700, 9],
[1000, 10],
[1200, 12],
[1400, 13],
[1600, 15]
],
navigation : true
})&#59;
})&#59;
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
&lt;div class="item"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;15&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;16&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;17&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;18&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;19&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;20&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
background: #42bdc2;
padding: 30px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
background: #42bdc2;
padding: 30px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
</style>
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
// Define custom and unlimited items depending from the width
// If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled
// For better preview, order the arrays by screen size, but it's not mandatory
// Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available.
// In the example there is dimension with 0 with which cover screens between 0 and 450px
itemsCustom : [
[0, 2],
[450, 4],
[600, 7],
[700, 9],
[1000, 10],
[1200, 12],
[1400, 13],
[1600, 15]
],
navigation : true
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,336 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Dynamic content via JSON</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Dynamic content via JSON</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>With this setup, all content is coming from external file <a href="json/data.json">data.json.</a> To get this stuff working prepare JSON file with proper structure (see JSON below).</p>
<pre class="pre-show prettyprint linenums">
{
"owl" : [
{"item" : "your html content..."},
{"item" : "your html content..."},
...
]
}
</pre>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
<li><a href="#JSON">JSON</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
jsonPath : "json/data.json"
});
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
background: #a1def8;
padding: 30px 0px;
display: block;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
</pre>
</div>
<div class="tab-pane" id="JSON">
<pre class="pre-show prettyprint linenums">
{
"owl" : [
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/span&gt;"},
{"item" : "&lt;span class='item'&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/span&gt;"}
]
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
background: #a1def8;
padding: 30px 0px;
display: block;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
</style>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
jsonPath : "json/data.json"
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,28 @@
{
"items" : [
{
"img": "assets/owl1.jpg",
"alt" : "Owl Image 1"
},
{
"img": "assets/owl2.jpg",
"alt" : "Owl Image 2"
},
{
"img": "assets/owl3.jpg",
"alt" : "Owl Image 1"
},
{
"img": "assets/owl4.jpg",
"alt" : "Owl Image 2"
},
{
"img": "assets/owl5.jpg",
"alt" : "Owl Image 1"
},
{
"img": "assets/owl6.jpg",
"alt" : "Owl Image 2"
}
]
}

View File

@ -0,0 +1,18 @@
{
"owl" : [
{"item" : "<span class='item'><h1>1</h1></span>"},
{"item" : "<span class='item'><h1>2</h1></span>"},
{"item" : "<span class='item'><h1>3</h1></span>"},
{"item" : "<span class='item'><h1>4</h1></span>"},
{"item" : "<span class='item'><h1>5</h1></span>"},
{"item" : "<span class='item'><h1>6</h1></span>"},
{"item" : "<span class='item'><h1>7</h1></span>"},
{"item" : "<span class='item'><h1>8</h1></span>"},
{"item" : "<span class='item'><h1>9</h1></span>"},
{"item" : "<span class='item'><h1>10</h1></span>"},
{"item" : "<span class='item'><h1>11</h1></span>"},
{"item" : "<span class='item'><h1>12</h1></span>"},
{"item" : "<span class='item'><h1>13</h1></span>"},
{"item" : "<span class='item'><h1>14</h1></span>"}
]
}

View File

@ -0,0 +1,338 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Lazy Load</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<!-- Prettify -->
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Lazy Load</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"></div>
<div class="item"><img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"></div>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>Delays loading of images. Images outside of viewport wont be loaded before user scrolls to them. Great for mobile devices to speed up page loadings.
</p>
<p>
Img need special class <code>class="lazyOwl"</code> and path to image in <code>data-src=""</code>:
<blockquote><code>&lt;img class="lazyOwl" data-src="path-to-your-image"&gt;</code></blockquote>
</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 4,
lazyLoad : true,
navigation : true
});
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel"&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl4.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl6.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl7.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img class="lazyOwl" data-src="assets/owl8.jpg" alt="Lazy Owl Image"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 4,
lazyLoad : true,
navigation : true
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,515 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Content Manipulations</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<!-- Prettify -->
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Content manipulations.</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span10">
<div id="owl-demo" class="owl-carousel">
<div class="item dodgerBlue"><h1>Start</h1></div>
</div>
</div>
<div class="span2">
<div class="left">
<a href="" class="btn add">Add Item</a>
</div>
<div class="left">
<a href="" class="btn remove">Remove Item</a>
</div>
<div class="left">
<a class="btn reinit" href="">Reinit + singlItem</a>
</div>
<div class="left">
<a class="btn destroy" href="">Destroy</a>
</div>
<div class="left">
<a class="btn rebuild" href="">Rebuild</a>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<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>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
var owl = $("#owl-demo"),
i = 0,
textholder,
booleanValue = false;
//init carousel
owl.owlCarousel();
/*
addItem() method add new slides on given position
Syntax:
owldata.addItem(htmlString, targetPosition)
First parameter(mandatory) "htmlString" accept string like this:
var newItem = "&lt;div&gt;new Item&lt;/div&gt;"
Second parameter "targetPosition" is optional and accept number values.
To add item at the end of carousel you could use -1 value. Last item is default value.
*/
$('.add').on("click", function(e){
e.preventDefault();
i += 1;
var content = "&lt;div class=\"item dodgerBlue\"&gt;&lt;h1&gt;"+i+"&lt;/h1&gt;&lt;/div&gt;";
owl.data('owlCarousel').addItem(content);
});
/*
Next new owl method is .removeItem()
Syntax:
owldata.removeItem(targetPosition)
Where parameter "targetPosition" is target item you will remove.
targetPosition is optional. Default value is last item (-1);
*/
$('.remove').on("click", function(e){
e.preventDefault();
i -= 1;
if(i&lt;=0)i=0;
$("#owl-demo").data('owlCarousel').removeItem();
});
/*
destroy() method unwrap whole plugin and leave original pre carousel structure
Syntax:
owldata.destroy();
*/
$('.destroy').click(function(e){
e.preventDefault()
$("#owl-demo").data('owlCarousel').destroy();
});
/*
reinit() method reinitialize plugin
Syntax:
owldata.reinit(newOptions)
Yes! you can reinit plugin with new options. Old options
will be overwritten if exist or added if new.
You can easly add new content by ajax or change old options with reinit method.
*/
$('.reinit').click(function(e){
e.preventDefault()
if(booleanValue === true){
booleanValue = false;
} else if(booleanValue === false){
booleanValue = true;
}
owl.data('owlCarousel').reinit({
singleItem : booleanValue
});
})
/*
Well, if you destroyed plugin why not resurect it?
*/
$('.rebuild').click(function(e){
e.preventDefault()
owl.owlCarousel();
});
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel"&gt;
&lt;div class="item dodgerBlue"&gt;&lt;h1&gt;Start&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
display: block;
padding: 54px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.left{
text-align: left;
margin-bottom: 10px;
}
.left .btn {
display: block;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
display: block;
padding: 54px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.left{
text-align: left;
margin-bottom: 10px;
}
.left .btn {
display: block;
}
</style>
<script>
$(document).ready(function() {
var owl = $("#owl-demo"),
i = 0,
textholder,
booleanValue = false;
//init carousel
owl.owlCarousel();
/*
addItem() method add new slides on given position
Syntax:
owldata.addItem(htmlString, targetPosition)
First parameter(mandatory) "htmlString" accept string like this:
var newItem = "<div>new Item</div>"
Second parameter "targetPosition" is optional and accept number values.
To add item at the end of carousel you could use -1 value. Last item is default value.
*/
$('.add').on("click", function(e){
e.preventDefault();
i += 1;
var content = "<div class=\"item dodgerBlue\"><h1>"+i+"</h1></div>";
owl.data('owlCarousel').addItem(content);
});
/*
Next new owl method is .removeItem()
Syntax:
owldata.removeItem(targetPosition)
Where parameter "targetPosition" is target item you will remove.
targetPosition is optional. Default value is last item (-1);
*/
$('.remove').on("click", function(e){
e.preventDefault();
i -= 1;
if(i<=0)i=0;
$("#owl-demo").data('owlCarousel').removeItem();
});
/*
destroy() method unwrap whole plugin and leave original pre carousel structure
Syntax:
owldata.destroy();
*/
$('.destroy').click(function(e){
e.preventDefault()
$("#owl-demo").data('owlCarousel').destroy();
});
/*
reinit() method reinitialize plugin
Syntax:
owldata.reinit(newOptions)
Yes! you can reinit plugin with new options. Old options
will be overwritten if exist or added if new.
You can easly add new content by ajax or change old options with reinit method.
*/
$('.reinit').click(function(e){
e.preventDefault()
if(booleanValue === true){
booleanValue = false;
} else if(booleanValue === false){
booleanValue = true;
}
owl.data('owlCarousel').reinit({
singleItem : booleanValue
});
})
/*
Well, if you destroyed plugin why not resurect it?
*/
$('.rebuild').click(function(e){
e.preventDefault()
owl.owlCarousel();
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,395 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Navigation on top</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Navigation on top by custom events</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
</div>
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>This is an example of using custom events for navigation.
</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
var owl = &#36;("#owl-demo")&#59;
owl.owlCarousel()&#59;
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next')&#59;
})
$(".prev").click(function(){
owl.trigger('owl.prev')&#59;
})
})&#59;
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div class="customNavigation"&gt;
&lt;a class="btn prev"&gt;Previous&lt;/a&gt;
&lt;a class="btn next"&gt;Next&lt;/a&gt;
&lt;/div&gt;
&lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
&lt;div class="item"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;15&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;16&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.customNavigation{
text-align: center;
}
//use styles below to disable ugly selection
.customNavigation a{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.customNavigation{
text-align: center;
}
.customNavigation a{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel();
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
$(".play").click(function(){
owl.trigger('owl.play',1000);
})
$(".stop").click(function(){
owl.trigger('owl.stop');
})
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,325 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Images Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<!-- Prettify -->
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Navigation on top by callback</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>Navigation moved on top by <code>afterInit</code> callback</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation:true,
afterInit : function(elem){
var that = this
that.owlControls.prependTo(elem)
}
});
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo"&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl1.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl2.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl3.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl4.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl5.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl6.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl7.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl8.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation:true,
afterInit : function(elem){
var that = this
that.owlControls.prependTo(elem)
}
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,318 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - One slide</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>One Item with Image</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
<div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
<div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>In order for the images to auto fit to slider containers use width 100% on <img>. Check CSS below</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage1.jpg" alt="The Last of us"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage2.jpg" alt="GTA V"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage3.jpg" alt="Mirror Edge"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,461 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Owl Status</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Owl Status Information</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>0</h1></div>
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
</div>
<table id="owlStatus" class="table" style="width:auto">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr class="owlItems">
<td>owlItems.length</td>
<td class="result"></td>
</tr>
<tr class="currentItem">
<td>currentItem</td>
<td class="result"></td>
</tr>
<tr class="prevItem">
<td>prevItem</td>
<td class="result"></td>
</tr>
<tr class="visibleItems">
<td>visibleItems</td>
<td class="result"></td>
</tr>
<tr class="dragDirection">
<td>dragDirection:</td>
<td class="result"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>This is an example of retrieving <code>this.owl object</code> with basic information.
</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
var owl = $("#owl-demo"),
status = $("#owlStatus");
owl.owlCarousel({
navigation : true,
afterAction : afterAction
});
function updateResult(pos,value){
status.find(pos).find(".result").text(value);
}
function afterAction(){
updateResult(".owlItems", this.owl.owlItems.length);
updateResult(".currentItem", this.owl.currentItem);
updateResult(".prevItem", this.prevItem);
updateResult(".visibleItems", this.owl.visibleItems);
updateResult(".dragDirection", this.owl.dragDirection);
}
/*
All owl object information listed below:
base.owl = {
"userOptions" : base.userOptions,
"baseElement" : base.$elem,
"userItems" : base.$userItems,
"owlItems" : base.$owlItems,
"currentItem" : base.currentItem,
"prevItem" : base.prevItem,
"visibleItems": base.visibleItems,
"isTouch" : base.browser.isTouch,
"browser" : base.browser,
"dragDirection": base.dragDirection
}
*/
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel"&gt;
&lt;div class="item"&gt;&lt;h1&gt;0&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;15&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;table id="owlStatus" class="table" style="width:auto"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Value&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr class="owlItems"&gt;
&lt;td&gt;owlItems.length&lt;/td&gt;
&lt;td class="result"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="currentItem"&gt;
&lt;td&gt;currentItem&lt;/td&gt;
&lt;td class="result"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="prevItem"&gt;
&lt;td&gt;prevItem&lt;/td&gt;
&lt;td class="result"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="visibleItems"&gt;
&lt;td&gt;visibleItems&lt;/td&gt;
&lt;td class="result"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="dragDirection"&gt;
&lt;td&gt;dragDirection:&lt;/td&gt;
&lt;td class="result"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
</style>
<script>
$(document).ready(function() {
var owl = $("#owl-demo"),
status = $("#owlStatus");
owl.owlCarousel({
navigation : true,
afterAction : afterAction
});
function updateResult(pos,value){
status.find(pos).find(".result").text(value);
}
function afterAction(){
updateResult(".owlItems", this.owl.owlItems.length);
updateResult(".currentItem", this.owl.currentItem);
updateResult(".prevItem", this.prevItem);
updateResult(".visibleItems", this.owl.visibleItems);
updateResult(".dragDirection", this.owl.dragDirection);
}
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,471 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Progress Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Progress Bar</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
<div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
<div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>Progress Bar made by three callbacks: <code>afterInit</code>, <code>afterMove</code> and <code>startDragging</code>.</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
var time = 7; // time in seconds
var $progressBar,
$bar,
$elem,
isPause,
tick,
percentTime;
//Init the carousel
$("#owl-demo").owlCarousel({
slideSpeed : 500,
paginationSpeed : 500,
singleItem : true,
afterInit : progressBar,
afterMove : moved,
startDragging : pauseOnDragging
});
//Init progressBar where elem is $("#owl-demo")
function progressBar(elem){
$elem = elem;
//build progress bar elements
buildProgressBar();
//start counting
start();
}
//create div#progressBar and div#bar then prepend to $("#owl-demo")
function buildProgressBar(){
$progressBar = $("&lt;div&gt;",{
id:"progressBar"
});
$bar = $("&lt;div&gt;",{
id:"bar"
});
$progressBar.append($bar).prependTo($elem);
}
function start() {
//reset timer
percentTime = 0;
isPause = false;
//run interval every 0.01 second
tick = setInterval(interval, 10);
};
function interval() {
if(isPause === false){
percentTime += 1 / time;
$bar.css({
width: percentTime+"%"
});
//if percentTime is equal or greater than 100
if(percentTime >= 100){
//slide to next item
$elem.trigger('owl.next')
}
}
}
//pause while dragging
function pauseOnDragging(){
isPause = true;
}
//moved callback
function moved(){
//clear interval
clearTimeout(tick);
//start again
start();
}
//uncomment this to make pause on mouseover
// $elem.on('mouseover',function(){
// isPause = true;
// })
// $elem.on('mouseout',function(){
// isPause = false;
// })
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage1.jpg" alt="The Last of us"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage2.jpg" alt="GTA V"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage3.jpg" alt="Mirror Edge"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
#bar{
width: 0%;
max-width: 100%;
height: 4px;
background: #7fc242;
}
#progressBar{
width: 100%;
background: #EDEDED;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
#bar{
width: 0%;
max-width: 100%;
height: 4px;
background: #7fc242;
}
#progressBar{
width: 100%;
background: #EDEDED;
}
</style>
<script>
$(document).ready(function() {
var time = 7; // time in seconds
var $progressBar,
$bar,
$elem,
isPause,
tick,
percentTime;
//Init the carousel
$("#owl-demo").owlCarousel({
slideSpeed : 500,
paginationSpeed : 500,
singleItem : true,
afterInit : progressBar,
afterMove : moved,
startDragging : pauseOnDragging
});
//Init progressBar where elem is $("#owl-demo")
function progressBar(elem){
$elem = elem;
//build progress bar elements
buildProgressBar();
//start counting
start();
}
//create div#progressBar and div#bar then prepend to $("#owl-demo")
function buildProgressBar(){
$progressBar = $("<div>",{
id:"progressBar"
});
$bar = $("<div>",{
id:"bar"
});
$progressBar.append($bar).prependTo($elem);
}
function start() {
//reset timer
percentTime = 0;
isPause = false;
//run interval every 0.01 second
tick = setInterval(interval, 10);
};
function interval() {
if(isPause === false){
percentTime += 1 / time;
$bar.css({
width: percentTime+"%"
});
//if percentTime is equal or greater than 100
if(percentTime >= 100){
//slide to next item
$elem.trigger('owl.next')
}
}
}
//pause while dragging
function pauseOnDragging(){
isPause = true;
}
//moved callback
function moved(){
//clear interval
clearTimeout(tick);
//start again
start();
}
//uncomment this to make pause on mouseover
// $elem.on('mouseover',function(){
// isPause = true;
// })
// $elem.on('mouseout',function(){
// isPause = false;
// })
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,416 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Ramdom order and custom navi.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Random order and custom navi.</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item orange"><h1>1</h1></div>
<div class="item darkCyan"><h1>2</h1></div>
<div class="item yellow"><h1>3</h1></div>
<div class="item forestGreen"><h1>4</h1></div>
<div class="item dodgerBlue"><h1>5</h1></div>
<div class="item skyBlue"><h1>6</h1></div>
<div class="item zombieGreen"><h1>7</h1></div>
<div class="item violet"><h1>8</h1></div>
<div class="item steelGray"><h1>9</h1></div>
<div class="item dodgerBlue"><h1>10</h1></div>
<div class="item darkCyan"><h1>11</h1></div>
<div class="item zombieGreen"><h1>12</h1></div>
<div class="item orange"><h1>13</h1></div>
<div class="item forestGreen"><h1>14</h1></div>
<div class="item skyBlue"><h1>15</h1></div>
<div class="item darkCyan"><h1>16</h1></div>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>A little play with <code>beforeInit</code> function. Refresh browser to see effect. Also check css to get idea how move navi buttons.
</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
//Sort random function
function random(owlSelector){
owlSelector.children().sort(function(){
return Math.round(Math.random()) - 0.5;
}).each(function(){
$(this).appendTo(owlSelector);
});
}
$("#owl-demo").owlCarousel({
navigation: true,
navigationText: [
"&lt;i class='icon-chevron-left icon-white'>&lt;/i&gt;",
"&lt;i class='icon-chevron-right icon-white'&gt;&lt;/i&gt;"
],
beforeInit : function(elem){
//Parameter elem pointing to $("#owl-demo")
random(elem);
}
});
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
&lt;div class="item orange"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item darkCyan"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item yellow"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item forestGreen"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item dodgerBlue"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item skyBlue"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item zombieGreen"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item violet"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item steelGray"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item dodgerBlue"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item darkCyan"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item zombieGreen"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item orange"&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item forestGreen"&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item skyBlue"&gt;&lt;h1&gt;15&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item darkCyan"&gt;&lt;h1&gt;16&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
display: block;
padding: 30px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.owl-theme .owl-controls .owl-buttons div {
padding: 5px 9px;
}
.owl-theme .owl-buttons i{
margin-top: 2px;
}
//To move navigation buttons outside use these settings:
.owl-theme .owl-controls .owl-buttons div {
position: absolute;
}
.owl-theme .owl-controls .owl-buttons .owl-prev{
left: -45px;
top: 55px;
}
.owl-theme .owl-controls .owl-buttons .owl-next{
right: -45px;
top: 55px;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
display: block;
padding: 30px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
.owl-theme .owl-controls .owl-buttons div {
padding: 5px 9px;
}
.owl-theme .owl-buttons i{
margin-top: 2px;
}
/*To move navigation buttons outside use these settings:*/
.owl-theme .owl-controls .owl-buttons div {
position: absolute;
}
.owl-theme .owl-controls .owl-buttons .owl-prev{
left: -45px;
top: 55px;
}
.owl-theme .owl-controls .owl-buttons .owl-next{
right: -45px;
top: 55px;
}
</style>
<script>
$(document).ready(function() {
//Sort random function
function random(owlSelector){
owlSelector.children().sort(function(){
return Math.round(Math.random()) - 0.5;
}).each(function(){
$(this).appendTo(owlSelector);
});
}
$("#owl-demo").owlCarousel({
navigation: true,
navigationText: [
"<i class='icon-chevron-left icon-white'></i>",
"<i class='icon-chevron-right icon-white'></i>"
],
//Call beforeInit callback, elem parameter point to $("#owl-demo")
beforeInit : function(elem){
random(elem);
}
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,328 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Items scale up</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<!-- Prettify -->
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Auto Scale up Items</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="itemsScaleUp-true owl-carousel">
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
</div>
<div id="owl-demo" class="itemsScaleUp-false owl-carousel">
<div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
<div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>If you have less items in a viewport than declared and you don't want to auto-stretch items use <code>itemsScaleUp:true</code>.</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
$(".itemsScaleUp-true").owlCarousel({
items : 7,
itemsScaleUp:true
});
$(".itemsScaleUp-false").owlCarousel({
items : 7
});
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="itemsScaleUp-true owl-carousel"&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl1.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl2.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/owl3.jpg" alt="Owl Image"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="owl-demo" class="itemsScaleUp-false owl-carousel">
&lt;div class="item">&lt;img src="assets/owl1.jpg" alt="Owl Image">&lt;/div>
&lt;div class="item">&lt;img src="assets/owl2.jpg" alt="Owl Image">&lt;/div>
&lt;div class="item">&lt;img src="assets/owl3.jpg" alt="Owl Image">&lt;/div>
&lt;/div>
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>
<script>
$(document).ready(function() {
$(".itemsScaleUp-false").owlCarousel({
items : 7
});
$(".itemsScaleUp-true").owlCarousel({
items : 7,
itemsScaleUp:true
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,569 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - Synced Owls</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>Synced Owls</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="sync1" class="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
<div class="item"><h1>17</h1></div>
<div class="item"><h1>18</h1></div>
<div class="item"><h1>19</h1></div>
<div class="item"><h1>20</h1></div>
<div class="item"><h1>21</h1></div>
<div class="item"><h1>22</h1></div>
<div class="item"><h1>23</h1></div>
</div>
<div id="sync2" class="owl-carousel">
<div class="item" ><h1>1</h1></div>
<div class="item" ><h1>2</h1></div>
<div class="item" ><h1>3</h1></div>
<div class="item" ><h1>4</h1></div>
<div class="item" ><h1>5</h1></div>
<div class="item" ><h1>6</h1></div>
<div class="item" ><h1>7</h1></div>
<div class="item" ><h1>8</h1></div>
<div class="item" ><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
<div class="item"><h1>17</h1></div>
<div class="item"><h1>18</h1></div>
<div class="item"><h1>19</h1></div>
<div class="item"><h1>20</h1></div>
<div class="item"><h1>21</h1></div>
<div class="item"><h1>22</h1></div>
<div class="item"><h1>23</h1></div>
</div>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>This is an example of using two synced Owl Carousel. This is not out of the box function, rather a demo or even "how to".
</p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
navigation: true,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
});
sync2.owlCarousel({
items : 15,
itemsDesktop : [1199,10],
itemsDesktopSmall : [979,10],
itemsTablet : [768,8],
itemsMobile : [479,4],
pagination:false,
responsiveRefreshRate : 100,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el){
var current = this.currentItem;
$("#sync2")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($("#sync2").data("owlCarousel") !== undefined){
center(current)
}
}
$("#sync2").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});
function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+2)
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}
}
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="sync1" class="owl-carousel"&gt;
&lt;div class="item"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;15&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;16&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;17&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;18&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;19&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;20&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;21&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;22&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;23&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="sync2" class="owl-carousel"&gt;
&lt;div class="item"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;15&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;16&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;17&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;18&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;19&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;20&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;21&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;22&lt;/h1&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;h1&gt;23&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#sync1 .item{
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
#sync2 .item{
background: #C9C9C9;
padding: 10px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
}
#sync2 .item h1{
font-size: 18px;
}
#sync2 .synced .item{
background: #0c83e7;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#sync1 .item{
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
#sync2 .item{
background: #C9C9C9;
padding: 10px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
}
#sync2 .item h1{
font-size: 18px;
}
#sync2 .synced .item{
background: #0c83e7;
}
</style>
<script>
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
navigation: true,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
});
sync2.owlCarousel({
items : 15,
itemsDesktop : [1199,10],
itemsDesktopSmall : [979,10],
itemsTablet : [768,8],
itemsMobile : [479,4],
pagination:false,
responsiveRefreshRate : 100,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el){
var current = this.currentItem;
$("#sync2")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($("#sync2").data("owlCarousel") !== undefined){
center(current)
}
}
$("#sync2").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});
function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+2)
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}
}
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,330 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel - CSS3 Transitions</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="../assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../owl-carousel/owl.theme.css" rel="stylesheet">
<link href="../owl-carousel/owl.transitions.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
<li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
</div>
<div id="title">
<div class="container">
<div class="row">
<div class="span12">
<h1>CSS3 Transitions</h1>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item"><img src="assets/fullimage4.jpg"></div>
<div class="item"><img src="assets/fullimage5.jpg"></div>
<div class="item"><img src="assets/fullimage6.jpg"></div>
<div class="item"><img src="assets/fullimage7.jpg"></div>
<div class="item"><img src="assets/fullimage1.jpg" ></div>
<div class="item"><img src="assets/fullimage2.jpg"></div>
<div class="item"><img src="assets/fullimage3.jpg"></div>
</div>
<label for="transitionType">Select Transition Type</label>
<select name="transitionType" id="transitionType">
<option value="fade">fade</option>
<option value="backSlide">backSlide</option>
<option value="goDown">goDown</option>
<option value="fadeUp">fadeUp</option>
</select>
</div>
</div>
</div>
</div>
<div id="example-info">
<div class="container">
<div class="row">
<div class="span12">
<h1>Setup</h1>
<p>From update 1.3.2 all transitions styles are moved out from main owl.carousel.css file to owl.transitions.css</p>
<p><strong>Important! CSS3 transition works only in modern browsers that support CSS3 translate3d methods and only with single item on screen.</strong><br><br>
Use <code>transitionStyle</code> option to set transtion. There are four predefined transitions: <code>"fade"</code>, <code>"backSlide"</code>, <code>goDown</code> and <code>scaleUp</code>.
<br><br>
You can also build your own transition styles easily. For example by adding "YourName" value <code>transitionStyle: "YourName"</code>, owlCarousel will add <code>.owl-YourName-out</code> class to previous slide and <code>.owl-YourName-in</code> to next slide. All transitions require "in" and "out" styles. Look into owl.carousel.css source for details. </p>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#javascript">Javascript</a></li>
<li><a href="#HTML">HTML</a></li>
<li><a href="#CSS">CSS</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="javascript">
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
navigation : true,
singleItem : true,
transitionStyle : "fade"
});
});
</pre>
</div>
<div class="tab-pane" id="HTML">
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage4.jpg"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage5.jpg"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage6.jpg"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage7.jpg"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage1.jpg"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage2.jpg"&gt;&lt;/div&gt;
&lt;div class="item"&gt;&lt;img src="assets/fullimage3.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<div class="tab-pane" id="CSS">
<pre class="pre-show prettyprint linenums">
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</pre>
</div>
</div><!--End Tab Content-->
</div>
</div>
</div>
</div>
<div id="more">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="../changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="../assets/js/jquery-1.9.1.min.js"></script>
<script src="../owl-carousel/owl.carousel.js"></script>
<!-- Demo -->
<style>
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>
<script>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
navigation : true,
singleItem : true,
transitionStyle : "fade"
});
//Select Transtion Type
$("#transitionType").change(function(){
var newValue = $(this).val();
//TransitionTypes is owlCarousel inner method.
owl.data("owlCarousel").transitionTypes(newValue);
//After change type go to next slide
owl.trigger("owl.next");
});
});
</script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/google-code-prettify/prettify.js"></script>
<script src="../assets/js/application.js"></script>
</body>
</html>

View File

@ -0,0 +1,911 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Owl Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
<meta name="author" content="Bartosz Wojciechowski">
<meta name="keywords" content="HTML,CSS,JSON,JavaScript, jQuery, Responsive, Design, Owl, Carousel, Free">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="assets/css/bootstrapTheme.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="owl-carousel/owl.theme.css" rel="stylesheet">
<!-- Prettify -->
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body>
<div id="top-nav" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><a href="#demo">Demo</a></li>
<li><a href="#more-demos">More Demos</a></li>
<li><a href="#how-to">How To</a></li>
<li><a href="#customizing">Customizing</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="owl.carousel.zip" class="download" data-spy="affix" data-offset-top="450">Download</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="header">
<div class="container">
<div class="row">
<div class="span5">
<img class="logo" src="assets/img/owl-logo.png" alt="Owl Logo">
</div>
<div class="span7">
<h1>OWL Carousel </h1>
<h3>Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.</h3>
<a class="btn btn-success btn-large" href="owl.carousel.zip">Download for FREE</a>
<p class="muted"><a class="muted" href="https://github.com/OwlFonk/OwlCarousel">Github</a> / v1.3.2 / <a class="muted" href="changelog.html">Changelog</a></p>
</div>
</div>
</div>
</div>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<h1>Demo</h1>
</div>
</div>
<div class="row">
<div class="span12">
<div id="owl-example" class="owl-carousel">
<div class="item darkCyan">
<img src="assets/img/demo-slides/touch.png" alt="Touch">
<h3>Touch</h3>
<h4>Can touch this</h4>
</div>
<div class="item forestGreen">
<img src="assets/img/demo-slides/grab.png" alt="Grab">
<h3>Grab</h3>
<h4>Can grab this</h4>
</div>
<div class="item orange">
<img src="assets/img/demo-slides/responsive.png" alt="Responsive">
<h3>Responsive</h3>
<h4>Fully responsive!</h4>
</div>
<div class="item yellow">
<img src="assets/img/demo-slides/css3.png" alt="CSS3">
<h3>CSS3</h3>
<h4>3D Acceleration.</h4>
</div>
<div class="item dodgerBlue">
<img src="assets/img/demo-slides/multi.png" alt="Multi">
<h3>Multiply</h3>
<h4>Owls on page.</h4>
</div>
<div class="item skyBlue">
<img src="assets/img/demo-slides/modern.png" alt="Modern Browsers">
<h3>Modern</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item zombieGreen">
<img src="assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones">
<h3>Zombie</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item violet">
<img src="assets/img/demo-slides/controls.png" alt="Take Control">
<h3>Take Control</h3>
<h4>The way you like</h4>
</div>
<div class="item yellowLight">
<img src="assets/img/demo-slides/feather.png" alt="Light">
<h3>Light</h3>
<h4>As a feather</h4>
</div>
<div class="item steelGray">
<img src="assets/img/demo-slides/tons.png" alt="Tons of Opotions">
<h3>Tons</h3>
<h4>of options</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="more-demos">
<div class="container">
<div class="row">
<div class="span12">
<h1>More Demos</h1>
<h2>Awesome!</h2>
<p>Check more demos here! See what Owl can do.</p>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="demos/images.html" class="demo-box">
<div class="demo-wrapper demo-images clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Images</h3>
</a>
</div>
<div class="span3">
<a href="demos/custom.html" class="demo-box">
<div class="demo-wrapper demo-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom</h3>
</a>
</div>
<div class="span3">
<a href="demos/itemsCustom.html" class="demo-box">
<div class="demo-wrapper demo-full clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Custom 2</h3>
</a>
</div>
<div class="span3">
<a href="demos/one.html" class="demo-box">
<div class="demo-wrapper demo-one clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>One Slide</h3>
</a>
</div>
</div>
<div class="row demos-row">
<div class="span3">
<a href="demos/json.html" class="demo-box">
<div class="demo-wrapper demo-Json clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON</h3>
</a>
</div>
<div class="span3">
<a href="demos/customJson.html" class="demo-box">
<div class="demo-wrapper demo-Json-custom clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>JSON Custom</h3>
</a>
</div>
<div class="span3">
<a href="demos/lazyLoad.html" class="demo-box">
<div class="demo-wrapper demo-lazy clearfix">
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Lazy Load</h3>
</a>
</div>
<div class="span3">
<a href="demos/autoHeight.html" class="demo-box">
<div class="demo-wrapper demo-height clearfix">
<div class="demo-slide"><div class="bg"></div></div>
</div>
<h3>Auto Height</h3>
</a>
</div>
</div>
<div class="row">
<div class="span12">
<h3>Hey wanna see more demos?</h3>
<ul>
<li>
<a href="demos/click.html">Click events inside items</a>
</li>
<li>
<a href="demos/randomOrder.html">Randomize items and buttons outside slider.</a>
</li>
<li>
<a href="demos/navOnTop.html">Navigation on top by custom events</a>
</li>
<li>
<a href="demos/navOnTop2.html">Navigation on top by afterInit callback</a>
</li>
<li>
<a href="demos/progressBar.html">Progress Bar</a>
</li>
<li>
<a href="demos/transitions.html">CSS3 Transitions</a>
</li>
<li>
<a href="demos/manipulations.html">Content manipulations: destroy, reinit, addItem, removeItem</a>
</li>
<li>
<a href="demos/scaleup.html">Auto scale up comparsion demo</a>
</li>
<li>
<a href="demos/sync.html">Synced Owls</a>
</li>
<li>
<a href="demos/owlStatus.html">How to retrieve basic information from plugin (current, prev, all items, visible items etc.)</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="how-to">
<div class="container">
<div class="row">
<div class="span12">
<h1>How To Use</h1>
<h2>1. Load jQuery and include Owl Carousel plugin files</h2>
<p>To use Owl Carousel, youll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.</p>
<pre class="pre-show prettyprint linenums">
&lt;!-- Important Owl stylesheet --&gt;
&lt;link rel="stylesheet" href="owl-carousel/owl.carousel.css"&gt;
&lt;!-- Default Theme --&gt;
&lt;link rel="stylesheet" href="owl-carousel/owl.theme.css"&gt;
&lt;!-- jQuery 1.7+ --&gt;
&lt;script src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;!-- Include js plugin --&gt;
&lt;script src="assets/owl-carousel/owl.carousel.js"&gt;&lt;/script&gt;
</pre>
<h2>2. Set up your HTML</h2>
<p>You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element &lt;div class="owl-carousel"&gt;. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.</p>
<pre class="pre-show prettyprint linenums">
&lt;div id="owl-example" class="owl-carousel"&gt;
&lt;div&gt; Your Content &lt;/div&gt;
&lt;div&gt; Your Content &lt;/div&gt;
&lt;div&gt; Your Content &lt;/div&gt;
&lt;div&gt; Your Content &lt;/div&gt;
&lt;div&gt; Your Content &lt;/div&gt;
&lt;div&gt; Your Content &lt;/div&gt;
&lt;div&gt; Your Content &lt;/div&gt;
...
&lt;/div>
</pre>
<h2>3. Call the plugin</h2>
<p>Now call the Owl initializer function and your carousel is ready.</p>
<pre class="pre-show prettyprint linenums">
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
</pre>
</div>
</div>
</div>
</div>
<div id="customizing">
<div class="container">
<div class="row">
<div class="span12">
<h1>Customizing</h1>
<h2>1. Options</h2>
<p>All of the options below are available to customize Owl Carousel.</p>
<table class="table hp-table table-bordered table-striped">
<thead>
<tr>
<th>Variable</th>
<th>Default</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="text-emp">items</span></td>
<td>5</td>
<td>int</td>
<td>This variable allows you to set the maximum amount of items displayed at a time with the widest browser width</td>
</tr>
<tr>
<td><span class="text-emp">itemsDesktop</span></td>
<td>[1199,4]</td>
<td>array</td>
<td>This allows you to preset the number of slides visible with a particular browser width. The format is [x,y] whereby x=browser width and y=number of slides displayed. For example [1199,4] means that if(window&lt;=1199){ show 4 slides per page}
Alternatively use <code>itemsDesktop: false</code> to override these settings. Check my <a href="demos/custom.html">Custom Demo</a></td>
</tr>
<tr>
<td><span class="text-emp">itemsDesktopSmall</span></td>
<td>[979,3]</td>
<td>array</td>
<td>As above.</td>
</tr>
<tr>
<td><span class="text-emp">itemsTablet</span></td>
<td>[768,2]</td>
<td>array</td>
<td>As above.</td>
</tr>
<tr>
<td><span class="text-emp">itemsTabletSmall</span></td>
<td>false</td>
<td>array</td>
<td>As above. Default value is disabled.</td>
</tr>
<tr>
<td><span class="text-emp">itemsMobile</span></td>
<td>[479,1]</td>
<td>array</td>
<td>As above</td>
</tr>
<tr>
<td><span class="text-emp">itemsCustom</span></td>
<td>false</td>
<td>array</td>
<td>
This allow you to add custom variations of items depending from the width
If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled
For better preview, order the arrays by screen size, but it's not mandatory
Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available.
<br />Example:<br /> [[0, 2], [400, 4], [700, 6], [1000, 8], [1200, 10], [1600, 16]]<br />
For more information about structure of the internal arrays see itemsDesktop. Check my <a href="demos/custom.html">Custom Demo</a></td>
</tr>
<tr>
<td><span class="text-emp">singleItem</span></td>
<td>false</td>
<td>boolean</td>
<td>Display only one item. <a href="demos/one.html">See demo</a></td>
</tr>
<tr>
<td><span class="text-emp">itemsScaleUp</span></td>
<td>false</td>
<td>boolean</td>
<td>Option to not stretch items when it is less than the supplied items. <a href="demos/scaleup.html">See demo</a></td>
</tr>
<tr>
<td><span class="text-emp">slideSpeed</span></td>
<td>200</td>
<td>int</td>
<td>Slide speed in milliseconds</td>
</tr>
<tr>
<td><span class="text-emp">paginationSpeed</span></td>
<td>800</td>
<td>int</td>
<td>Pagination speed in milliseconds</td>
</tr>
<tr>
<td><span class="text-emp">rewindSpeed</span></td>
<td>1000</td>
<td>int</td>
<td>Rewind speed in milliseconds</td>
</tr>
<tr>
<td><span class="text-emp">autoPlay</span></td>
<td>false</td>
<td>int/boolean</td>
<td>Change to any integrer for example <code>autoPlay : 5000</code> to play every 5 seconds. If you set <code>autoPlay: true</code> default speed will be 5 seconds.</td>
</tr>
<tr>
<tr>
<td><span class="text-emp">stopOnHover</span></td>
<td>false</td>
<td>boolean</td>
<td>Stop autoplay on mouse hover</td>
</tr>
<tr>
<tr>
<td><span class="text-emp">navigation</span></td>
<td>false</td>
<td>boolean</td>
<td>Display "next" and "prev" buttons.</td>
</tr>
<tr>
<td><span class="text-emp">navigationText</span></td>
<td>["prev","next"]</td>
<td>array</td>
<td>You can cusomize your own text for navigation. To get empty buttons use <code>navigationText : false</code>. Also HTML can be used here</td>
</tr>
<tr>
<td><span class="text-emp">rewindNav</span></td>
<td>true</td>
<td>boolean</td>
<td>Slide to first item. Use <code>rewindSpeed</code> to change animation speed. </td>
</tr>
<tr>
<td><span class="text-emp">scrollPerPage</span></td>
<td>false</td>
<td>boolean</td>
<td>Scroll per page not per item. This affect next/prev buttons and mouse/touch dragging.</td>
</tr>
<tr>
<td><span class="text-emp">pagination</span></td>
<td>true</td>
<td>boolean</td>
<td>Show pagination.</td>
</tr>
<tr>
<td><span class="text-emp">paginationNumbers</span></td>
<td>false</td>
<td>boolean</td>
<td>Show numbers inside pagination buttons</td>
</tr>
<tr>
<td><span class="text-emp">responsive</span></td>
<td>true</td>
<td>boolean</td>
<td>You can use Owl Carousel on desktop-only websites too! Just change that to "false" to disable resposive capabilities</td>
</tr>
<tr>
<td><span class="text-emp">responsiveRefreshRate</span></td>
<td>200</td>
<td>int</td>
<td>Check window width changes every 200ms for responsive actions</td>
</tr>
<tr>
<td><span class="text-emp">responsiveBaseWidth</span></td>
<td>window</td>
<td>jQuery selector</td>
<td>Owl Carousel check window for browser width changes. You can use any other jQuery element to check width changes for example ".owl-demo". Owl will change only if ".owl-demo" get new width.</td>
</tr>
<tr>
<td><span class="text-emp">baseClass</span></td>
<td>"owl-carousel"</td>
<td>string</td>
<td>Automaticly added class for base CSS styles. Best not to change it if you don't need to.</td>
</tr>
<tr>
<td><span class="text-emp">theme</span></td>
<td>"owl-theme"</td>
<td>string</td>
<td>Default Owl CSS styles for navigation and buttons. Change it to match your own theme</td>
</tr>
<tr>
<td><span class="text-emp">lazyLoad</span></td>
<td>false</td>
<td>boolean</td>
<td>Delays loading of images. Images outside of viewport won't be loaded before user scrolls to them. Great for mobile devices to speed up page loadings. IMG need special markup <code>class="lazyOwl"</code> and <code>data-src="your img path"</code>. <a href="demos/lazyLoad.html">See example.</a></td>
</tr>
<tr>
<td><span class="text-emp">lazyFollow</span></td>
<td>true</td>
<td>boolean</td>
<td>When pagination used, it skips loading the images from pages that got skipped. It only loads the images that get displayed in viewport. If set to false, all images get loaded when pagination used. It is a sub setting of the lazy load function.</td>
</tr>
<tr>
<td><span class="text-emp">lazyEffect</span></td>
<td>"fade"</td>
<td>boolean / string</td>
<td>Default is fadeIn on 400ms speed. Use false to remove that effect.</td>
</tr>
<tr>
<td><span class="text-emp">autoHeight</span></td>
<td>false</td>
<td>boolean</td>
<td>Add height to owl-wrapper-outer so you can use diffrent heights on slides. Use it only for one item per page setting.</td>
</tr>
<tr>
<td><span class="text-emp">jsonPath</span></td>
<td>false</td>
<td>string</td>
<td>Allows you to load directly from a jSon file. The JSON structure you use needs to match the owl JSON structure used here. To use custom JSON structure see jsonSuccess option.</td>
</tr>
<tr>
<td><span class="text-emp">jsonSuccess</span></td>
<td>false</td>
<td>function</td>
<td>Success callback for $.getJSON build in into carousel. See demo with custom JSON structure <a href="demos/customJson.html">here</a>. </td>
</tr>
<tr>
<td><span class="text-emp">dragBeforeAnimFinish</span></td>
<td>true</td>
<td>boolean</td>
<td>Ignore whether a transition is done or not (only dragging).</td>
</tr>
<tr>
<td><span class="text-emp">mouseDrag</span></td>
<td>true</td>
<td>boolean</td>
<td>Turn off/on mouse events.</td>
</tr>
<tr>
<td><span class="text-emp">touchDrag</span></td>
<td>true</td>
<td>boolean</td>
<td>Turn off/on touch events.</td>
</tr>
<tr>
<td><span class="text-emp">addClassActive</span></td>
<td>false</td>
<td>boolean</td>
<td>Add "active" classes on visible items. Works with any numbers of items on screen.</td>
</tr>
<tr>
<td><span class="text-emp">transitionStyle</span></td>
<td>false</td>
<td>string</td>
<td>Add CSS3 transition style. Works only with one item on screen. <a href="demos/transitions.html">See Demo</a></td>
</tr>
</tbody>
</table>
<h2>2. Callbacks</h2>
<table class="table hp-table table-bordered table-striped">
<thead>
<tr>
<th>Variable</th>
<th>Default</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="text-emp">beforeUpdate</span></td>
<td>false</td>
<td>function</td>
<td>Before responsive update callback</td>
</tr>
<tr>
<td><span class="text-emp">afterUpdate</span></td>
<td>false</td>
<td>function</td>
<td>After responsive update callback</td>
</tr>
<tr>
<td><span class="text-emp">beforeInit</span></td>
<td>false</td>
<td>function</td>
<td>Before initialization callback</td>
</tr>
<tr>
<td><span class="text-emp">afterInit</span></td>
<td>false</td>
<td>function</td>
<td>After initialization callback</td>
</tr>
<tr>
<td><span class="text-emp">beforeMove</span></td>
<td>false</td>
<td>function</td>
<td>Before move callback</td>
</tr>
<tr>
<td><span class="text-emp">afterMove</span></td>
<td>false</td>
<td>function</td>
<td>After move callback</td>
</tr>
<tr>
<td><span class="text-emp">afterAction</span></td>
<td>false</td>
<td>function</td>
<td>After startup, move and update callback</td>
</tr>
<tr>
<td><span class="text-emp">startDragging</span></td>
<td>false</td>
<td>function</td>
<td>Call this function while dragging.</td>
</tr>
<tr>
<td><span class="text-emp">afterLazyLoad</span></td>
<td>false</td>
<td>function</td>
<td>Call this function after lazyLoad.</td>
</tr>
</tbody>
</table>
<h2>3. Defaults</h2>
<p>Carousel default settings</p>
<pre class="pre-show prettyprint linenums">
$("#owl-example").owlCarousel({
// Most important owl features
items : 5,
itemsCustom : false,
itemsDesktop : [1199,4],
itemsDesktopSmall : [980,3],
itemsTablet: [768,2],
itemsTabletSmall: false,
itemsMobile : [479,1],
singleItem : false,
itemsScaleUp : false,
//Basic Speeds
slideSpeed : 200,
paginationSpeed : 800,
rewindSpeed : 1000,
//Autoplay
autoPlay : false,
stopOnHover : false,
// Navigation
navigation : false,
navigationText : ["prev","next"],
rewindNav : true,
scrollPerPage : false,
//Pagination
pagination : true,
paginationNumbers: false,
// Responsive
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
// CSS Styles
baseClass : "owl-carousel",
theme : "owl-theme",
//Lazy load
lazyLoad : false,
lazyFollow : true,
lazyEffect : "fade",
//Auto height
autoHeight : false,
//JSON
jsonPath : false,
jsonSuccess : false,
//Mouse Events
dragBeforeAnimFinish : true,
mouseDrag : true,
touchDrag : true,
//Transitions
transitionStyle : false,
// Other
addClassActive : false,
//Callbacks
beforeUpdate : false,
afterUpdate : false,
beforeInit: false,
afterInit: false,
beforeMove: false,
afterMove: false,
afterAction: false,
startDragging : false
afterLazyLoad : false
})
</pre>
<h2>4. Custom Events</h2>
<p>Owl Carousel handles a few basic events. Mainly use them for custom navigation. <a href="demos/custom.html">See Demo</a></p>
<pre class="pre-show prettyprint linenums">
"owl.prev" //Go to previous
"owl.next" //Go to next
"owl.play" //Autoplay, also this event accept autoPlay speed as second parameter
"owl.stop" //Stop
"owl.goTo" //goTo provided item
"owl.jumpTo" //jumpTo provided item. Without slide animation.
</pre>
<h2>5. Owl Data methods</h2>
<p>To use Owl Carousel $.data use delegate function.</p>
<pre class="pre-show prettyprint linenums">
//Initialize Plugin
$(".owl-carousel").owlCarousel()
//get carousel instance data and store it in variable owl
var owl = $(".owl-carousel").data('owlCarousel');
//Public methods
owl.next() // Go to next slide
owl.prev() // Go to previous slide
owl.goTo(x) // Go to x slide
owl.jumpTo(x) // Go to x slide without slide animation
//Auto Play
owl.play() // Autoplay
owl.stop() // Autoplay Stop
//Manipulation methods. <a href="demos/manipulations.html">See demo.</a>
owl.addItem(htmlString [,targetPosition])
owl.removeItem(targetPosition)
owl.destroy()
owl.reinit(newOptions)
</pre>
</div>
</div>
</div>
</div>
<div id="faq" class="container">
<div class="row">
<div class="span12">
<h1>FAQ</h1>
<dl>
<dt>Can i use it for free?</dt>
<dd>Yes!</dd>
<dt>Can i use it for ecommerce?</dt>
<dd>Yes!</dd>
<dt>Has it any licence?</dt>
<dd>MIT</dd>
<dt>Can i ask for a new functionality?</dt>
<dd>Yes! Use <a href="https://github.com/OwlFonk/OwlCarousel">Github</a></dd>
<dt>I need help!</dt>
<dd>Send me an <a href="mailto:owl@owlgraphic.com?subject=Hey Owl! I need help">email</a>, visit <a href="https://github.com/OwlFonk/OwlCarousel">Github</a> or add comment <a href="#disqus">below.</a><br>Don't forget to add link to your demo/example website!</dd>
<dt>Does it has infinity scroll/circle/loop slides?</dt>
<dd>Sorry, no.</dd>
<dt>What's new in latest release?</dt>
<dd>See <a href="changelog.html">Changelog</a></dd>
</dl>
</div>
</div>
</div>
<div class="container disqus">
<div class="row">
<div class="span12">
<h1>Disqus</h1>
<div id="disqus_thread"></div>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="span12">
<h5>Bartosz Wojciechowski 2013 / @OwlFonk /
<a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
<a href="changelog.html">changelog</a> /
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
<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>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
!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>
</h5>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="owl-carousel/owl.carousel.min.js"></script>
<!-- Frontpage Demo -->
<script>
$(document).ready(function($) {
$("#owl-example").owlCarousel();
});
$("body").data("page", "frontpage");
</script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/application.js"></script>
<script type="text/javascript">
jQuery(function($){
var disqus_loaded = false;
var top = $("#faq").offset().top;
var owldomain = window.location.hostname.indexOf("owlgraphic");
var comments = window.location.href.indexOf("comment");
if(owldomain !== -1){
function check(){
if ( (!disqus_loaded && $(window).scrollTop() + $(window).height() > top) || (comments !== -1) ){
$(window).off( "scroll" )
disqus_loaded = true;
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'owlcarousel'; // required: replace example with your forum shortname
var disqus_identifier = 'OWL Carousel';
//var disqus_url = 'http://owlgraphic.com/owlcarousel/';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
}
}
$(window).on( "scroll", check )
check();
} else {
$('.disqus').hide();
}
});
</script>
<script>
var owldomain = window.location.hostname.indexOf("owlgraphic");
if(owldomain !== -1){
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41541058-1', 'owlgraphic.com');
ga('send', 'pageview');
}
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 B

View File

@ -0,0 +1,71 @@
/*
* Core Owl Carousel CSS File
* v1.3.2
*/
/* clearfix */
.owl-carousel .owl-wrapper:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl-carousel{
display: none;
position: relative;
width: 100%;
-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
display: none;
position: relative;
-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item{
float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
cursor: pointer;
}
.owl-controls {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
.grabbing {
cursor:url(grabbing.png) 8 8, move;
}
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,79 @@
/*
* Owl Carousel Owl Demo Theme
* v1.3.2
*/
.owl-theme .owl-controls{
margin-top: 10px;
text-align: center;
}
/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div{
color: #FFF;
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
margin: 5px;
padding: 3px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: #869791;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
text-decoration: none;
}
/* Styling Pagination*/
.owl-theme .owl-controls .owl-page{
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controls .owl-page span{
display: block;
width: 12px;
height: 12px;
margin: 5px 7px;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #869791;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
}
/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers{
height: auto;
width: auto;
color: #FFF;
padding: 2px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
/* preloading images */
.owl-item.loading{
min-height: 150px;
background: url(AjaxLoader.gif) no-repeat center center
}

View File

@ -0,0 +1,163 @@
/*
* Owl Carousel CSS3 Transitions
* v1.3.2
*/
.owl-origin {
-webkit-perspective: 1200px;
-webkit-perspective-origin-x : 50%;
-webkit-perspective-origin-y : 50%;
-moz-perspective : 1200px;
-moz-perspective-origin-x : 50%;
-moz-perspective-origin-y : 50%;
perspective : 1200px;
}
/* fade */
.owl-fade-out {
z-index: 10;
-webkit-animation: fadeOut .7s both ease;
-moz-animation: fadeOut .7s both ease;
animation: fadeOut .7s both ease;
}
.owl-fade-in {
-webkit-animation: fadeIn .7s both ease;
-moz-animation: fadeIn .7s both ease;
animation: fadeIn .7s both ease;
}
/* backSlide */
.owl-backSlide-out {
-webkit-animation: backSlideOut 1s both ease;
-moz-animation: backSlideOut 1s both ease;
animation: backSlideOut 1s both ease;
}
.owl-backSlide-in {
-webkit-animation: backSlideIn 1s both ease;
-moz-animation: backSlideIn 1s both ease;
animation: backSlideIn 1s both ease;
}
/* goDown */
.owl-goDown-out {
-webkit-animation: scaleToFade .7s ease both;
-moz-animation: scaleToFade .7s ease both;
animation: scaleToFade .7s ease both;
}
.owl-goDown-in {
-webkit-animation: goDown .6s ease both;
-moz-animation: goDown .6s ease both;
animation: goDown .6s ease both;
}
/* scaleUp */
.owl-fadeUp-in {
-webkit-animation: scaleUpFrom .5s ease both;
-moz-animation: scaleUpFrom .5s ease both;
animation: scaleUpFrom .5s ease both;
}
.owl-fadeUp-out {
-webkit-animation: scaleUpTo .5s ease both;
-moz-animation: scaleUpTo .5s ease both;
animation: scaleUpTo .5s ease both;
}
/* Keyframes */
/*empty*/
@-webkit-keyframes empty {
0% {opacity: 1}
}
@-moz-keyframes empty {
0% {opacity: 1}
}
@keyframes empty {
0% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@keyframes fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes fadeOut {
0% { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes fadeOut {
0% { opacity:1; }
100% { opacity:0; }
}
@keyframes fadeOut {
0% { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes backSlideOut {
25% { opacity: .5; -webkit-transform: translateZ(-500px); }
75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
}
@-moz-keyframes backSlideOut {
25% { opacity: .5; -moz-transform: translateZ(-500px); }
75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes backSlideOut {
25% { opacity: .5; transform: translateZ(-500px); }
75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}
@-webkit-keyframes backSlideIn {
0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
75% { opacity: .5; -webkit-transform: translateZ(-500px); }
100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
}
@-moz-keyframes backSlideIn {
0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); }
75% { opacity: .5; -moz-transform: translateZ(-500px); }
100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
}
@keyframes backSlideIn {
0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
75% { opacity: .5; transform: translateZ(-500px); }
100% { opacity: 1; transform: translateZ(0) translateX(0); }
}
@-webkit-keyframes scaleToFade {
to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleToFade {
to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleToFade {
to { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes goDown {
from { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes goDown {
from { -moz-transform: translateY(-100%); }
}
@keyframes goDown {
from { transform: translateY(-100%); }
}
@-webkit-keyframes scaleUpFrom {
from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpFrom {
from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpFrom {
from { opacity: 0; transform: scale(1.5); }
}
@-webkit-keyframes scaleUpTo {
to { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleUpTo {
to { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleUpTo {
to { opacity: 0; transform: scale(1.5); }
}