Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1 
<!DOCTYPE html>
2 
<html lang="en">
3 
  <head>
4 
    <meta charset="utf-8">
5 
    <title>Owl Carousel - Items scale up</title>
6 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 
    <meta name="description" content="jQuery Responsive Carousel - Owl Carusel">
8 
    <meta name="author" content="Bartosz Wojciechowski">
9 
 
10 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
11 
    <link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
12 
    <link href="../assets/css/custom.css" rel="stylesheet">
13 
 
14 
    <!-- Owl Carousel Assets -->
15 
    <link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
16 
    <link href="../owl-carousel/owl.theme.css" rel="stylesheet">
17 
 
18 
    <!-- Prettify -->
19 
    <link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
20 
 
21 
 
22 
    <!-- Le fav and touch icons -->
23 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
24 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
25 
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
26 
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
27 
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
28 
  </head>
29 
  <body>
30 
 
31 
      <div id="top-nav" class="navbar navbar-fixed-top">
32 
        <div class="navbar-inner">
33 
          <div class="container">
34 
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
35 
            <span class="icon-bar"></span>
36 
            <span class="icon-bar"></span>
37 
            <span class="icon-bar"></span>
38 
          </button>
39 
            <div class="nav-collapse collapse">
40 
            <ul class="nav pull-right">
41 
              <li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>
42 
              <li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>
43 
            </ul>
44 
            <ul class="nav pull-left">
45 
 
46 
            </ul>
47 
            </div>
48 
          </div>
49 
        </div>
50 
      </div>
51 
 
52 
    <div id="title">
53 
      <div class="container">
54 
        <div class="row">
55 
          <div class="span12">
56 
            <h1>Auto Scale up Items</h1>
57 
          </div>
58 
        </div>
59 
      </div>
60 
    </div>
61 
 
62 
      <div id="demo">
63 
        <div class="container">
64 
          <div class="row">
65 
            <div class="span12">
66 
 
67 
              <div id="owl-demo" class="itemsScaleUp-true owl-carousel">
68 
                <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
69 
                <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
70 
                <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
71 
              </div>
72 
 
73 
              <div id="owl-demo" class="itemsScaleUp-false owl-carousel">
74 
                <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
75 
                <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
76 
                <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
77 
              </div>
78 
 
79 
            </div>
80 
          </div>
81 
        </div>
82 
 
83 
    </div>
84 
 
85 
    <div id="example-info">
86 
      <div class="container">
87 
        <div class="row">
88 
          <div class="span12">
89 
            <h1>Setup</h1>
90 
            <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>
91 
            <ul class="nav nav-tabs" id="myTab">
92 
              <li class="active"><a href="#javascript">Javascript</a></li>
93 
              <li><a href="#HTML">HTML</a></li>
94 
              <li><a href="#CSS">CSS</a></li>
95 
            </ul>
96 
 
97 
            <div class="tab-content">
98 
 
99 
              <div class="tab-pane active" id="javascript">
100 
<pre class="pre-show prettyprint linenums">
101 
$(document).ready(function() {
102 
 
103 
  $(".itemsScaleUp-true").owlCarousel({
104 
    items : 7,
105 
    itemsScaleUp:true
106 
  });
107 
 
108 
  $(".itemsScaleUp-false").owlCarousel({
109 
    items : 7
110 
  });
111 
 
112 
});
113 
</pre>  
114 
 
115 
              </div>
116 
 
117 
              <div class="tab-pane" id="HTML">
118 
<pre class="pre-show prettyprint linenums">
119 
&lt;div id="owl-demo" class="itemsScaleUp-true owl-carousel"&gt;
120 
  &lt;div class="item"&gt;&lt;img src="assets/owl1.jpg" alt="Owl Image"&gt;&lt;/div&gt;
121 
  &lt;div class="item"&gt;&lt;img src="assets/owl2.jpg" alt="Owl Image"&gt;&lt;/div&gt;
122 
  &lt;div class="item"&gt;&lt;img src="assets/owl3.jpg" alt="Owl Image"&gt;&lt;/div&gt;
123 
&lt;/div&gt;
124 
 
125 
&lt;div id="owl-demo" class="itemsScaleUp-false owl-carousel">
126 
  &lt;div class="item">&lt;img src="assets/owl1.jpg" alt="Owl Image">&lt;/div>
127 
  &lt;div class="item">&lt;img src="assets/owl2.jpg" alt="Owl Image">&lt;/div>
128 
  &lt;div class="item">&lt;img src="assets/owl3.jpg" alt="Owl Image">&lt;/div>
129 
&lt;/div>
130 
</pre>
131 
              </div>
132 
 
133 
              <div class="tab-pane" id="CSS">
134 
<pre class="pre-show prettyprint linenums">
135 
#owl-demo .item{
136 
  margin: 3px;
137 
}
138 
#owl-demo .item img{
139 
  display: block;
140 
  width: 100%;
141 
  height: auto;
142 
}
143 
</pre>
144 
              </div>
145 
            </div><!--End Tab Content-->
146 
 
147 
          </div>
148 
        </div>
149 
      </div>
150 
    </div>
151 
 
152 
    <div id="more">
153 
      <div class="container">
154 
 
155 
        <div class="row">
156 
          <div class="span12">
157 
            <h1>More Demos</h1>
158 
          </div>
159 
        </div>
160 
 
161 
        <div class="row demos-row">
162 
          <div class="span3">
163 
            <a href="images.html" class="demo-box">
164 
              <div class="demo-wrapper demo-images clearfix">
165 
                <div class="demo-slide"><div class="bg"></div></div>
166 
                <div class="demo-slide"><div class="bg"></div></div>
167 
                <div class="demo-slide"><div class="bg"></div></div>
168 
              </div>
169 
              <h3>Images</h3>
170 
            </a>
171 
          </div>
172 
 
173 
          <div class="span3">
174 
            <a href="custom.html" class="demo-box">
175 
              <div class="demo-wrapper demo-custom clearfix">
176 
                <div class="demo-slide"><div class="bg"></div></div>
177 
                <div class="demo-slide"><div class="bg"></div></div>
178 
                <div class="demo-slide"><div class="bg"></div></div>
179 
                <div class="demo-slide"><div class="bg"></div></div>
180 
                <div class="demo-slide"><div class="bg"></div></div>
181 
                <div class="demo-slide"><div class="bg"></div></div>
182 
                <div class="demo-slide"><div class="bg"></div></div>
183 
                <div class="demo-slide"><div class="bg"></div></div>
184 
                <div class="demo-slide"><div class="bg"></div></div>
185 
                <div class="demo-slide"><div class="bg"></div></div>
186 
              </div>
187 
              <h3>Custom</h3>
188 
            </a>
189 
          </div>
190 
 
191 
          <div class="span3">
192 
            <a href="itemsCustom.html" class="demo-box">
193 
              <div class="demo-wrapper demo-full clearfix">
194 
                <div class="demo-slide"><div class="bg"></div></div>
195 
                <div class="demo-slide"><div class="bg"></div></div>
196 
                <div class="demo-slide"><div class="bg"></div></div>
197 
                <div class="demo-slide"><div class="bg"></div></div>
198 
              </div>
199 
              <h3>Custom 2</h3>
200 
            </a>
201 
          </div>
202 
 
203 
          <div class="span3">
204 
            <a href="one.html" class="demo-box">
205 
              <div class="demo-wrapper demo-one clearfix">
206 
                <div class="demo-slide"><div class="bg"></div></div>
207 
              </div>
208 
              <h3>One Slide</h3>
209 
            </a>
210 
          </div>
211 
 
212 
        </div>
213 
        <div class="row demos-row">
214 
          <div class="span3">
215 
            <a href="json.html" class="demo-box">
216 
              <div class="demo-wrapper demo-Json clearfix">
217 
                <div class="demo-slide"><div class="bg"></div></div>
218 
                <div class="demo-slide"><div class="bg"></div></div>
219 
                <div class="demo-slide"><div class="bg"></div></div>
220 
                <div class="demo-slide"><div class="bg"></div></div>
221 
                <div class="demo-slide"><div class="bg"></div></div>
222 
              </div>
223 
              <h3>JSON</h3>
224 
            </a>
225 
          </div>
226 
 
227 
          <div class="span3">
228 
            <a href="customJson.html" class="demo-box">
229 
              <div class="demo-wrapper demo-Json-custom clearfix">
230 
                <div class="demo-slide"><div class="bg"></div></div>
231 
                <div class="demo-slide"><div class="bg"></div></div>
232 
                <div class="demo-slide"><div class="bg"></div></div>
233 
              </div>
234 
              <h3>JSON Custom</h3>
235 
            </a>
236 
          </div>
237 
 
238 
          <div class="span3">
239 
            <a href="lazyLoad.html" class="demo-box">
240 
              <div class="demo-wrapper demo-lazy clearfix">
241 
                <div class="demo-slide"><div class="bg"></div></div>
242 
                <div class="demo-slide"><div class="bg"></div></div>
243 
                <div class="demo-slide"><div class="bg"></div></div>
244 
              </div>
245 
              <h3>Lazy Load</h3>
246 
            </a>
247 
          </div>
248 
 
249 
          <div class="span3">
250 
            <a href="autoHeight.html" class="demo-box">
251 
              <div class="demo-wrapper demo-height clearfix">
252 
                <div class="demo-slide"><div class="bg"></div></div>
253 
              </div>
254 
              <h3>Auto Height</h3>
255 
            </a>
256 
          </div>
257 
 
258 
        </div>
259 
      </div>
260 
    </div>
261 
 
262 
 
263 
 
264 
    <div id="footer">
265 
      <div class="container">
266 
        <div class="row">
267 
          <div class="span12">
268 
            <h5>Bartosz Wojciechowski 2013 / @OwlFonk /
269 
            <a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> /
270 
            <a href="../changelog.html">changelog</a> /
271 
            <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> /
272 
            <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>
273 
            <script>
274 
            var owldomain = window.location.hostname.indexOf("owlgraphic");
275 
            if(owldomain !== -1){
276 
              !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');
277 
            }
278 
            </script>
279 
            </h5>
280 
          </div>
281 
        </div>
282 
      </div>
283 
    </div>
284 
 
285 
 
286 
    <script src="../assets/js/jquery-1.9.1.min.js"></script>
287 
    <script src="../owl-carousel/owl.carousel.js"></script>
288 
 
289 
 
290 
    <!-- Demo -->
291 
 
292 
    <style>
293 
    #owl-demo .item{
294 
        margin: 3px;
295 
    }
296 
    #owl-demo .item img{
297 
        display: block;
298 
        width: 100%;
299 
        height: auto;
300 
    }
301 
    </style>
302 
 
303 
 
304 
    <script>
305 
    $(document).ready(function() {
306 
 
307 
      $(".itemsScaleUp-false").owlCarousel({
308 
        items : 7
309 
      });
310 
 
311 
      $(".itemsScaleUp-true").owlCarousel({
312 
        items : 7,
313 
        itemsScaleUp:true
314 
      });
315 
 
316 
    });
317 
    </script>
318 
 
319 
 
320 
    <script src="../assets/js/bootstrap-collapse.js"></script>
321 
    <script src="../assets/js/bootstrap-transition.js"></script>
322 
    <script src="../assets/js/bootstrap-tab.js"></script>
323 
 
324 
    <script src="../assets/js/google-code-prettify/prettify.js"></script>
325 
          <script src="../assets/js/application.js"></script>
326 
 
327 
  </body>
328 
</html>