Skip to content

Commit

Permalink
added documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@acburst
acburst committed Nov 6, 2015
1 parent 9c48d6d commit e3d04f4
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 108 deletions.
4 changes: 2 additions & 2 deletions bin/materialize.js
View file

Large diffs are not rendered by default.

68 changes: 19 additions & 49 deletions jade/page-contents/media_content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ <h4>jQuery Plugin Methods</h4>
<div id="carousel" class="scrollspy section">
<h3 class="header">Carousel</h3>
<p class="caption">Our slider is a simple and elegant image carousel. You can also have captions that will be transitioned on their own depending on their alignment. You can also have indicators that show up on the bottom of the slider. </p>
<p>Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the slider.</p><br>
<p>Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the carousel.</p><br>

<div class="carousel">
<a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
Expand All @@ -180,56 +180,26 @@ <h3 class="header">Carousel</h3>
</div><br>

<pre><code class="language-markup">
&lt;div class="slider">
&lt;ul class="slides">
&lt;li>
&lt;img src="http://lorempixel.com/580/250/nature/1"> &lt;!-- random image -->
&lt;div class="caption center-align">
&lt;h3>This is our big Tagline!&lt;/h3>
&lt;h5 class="light grey-text text-lighten-3">Here's our small slogan.&lt;/h5>
&lt;/div>
&lt;/li>
&lt;li>
&lt;img src="http://lorempixel.com/580/250/nature/2"> &lt;!-- random image -->
&lt;div class="caption left-align">
&lt;h3>Left Aligned Caption&lt;/h3>
&lt;h5 class="light grey-text text-lighten-3">Here's our small slogan.&lt;/h5>
&lt;/div>
&lt;/li>
&lt;li>
&lt;img src="http://lorempixel.com/580/250/nature/3"> &lt;!-- random image -->
&lt;div class="caption right-align">
&lt;h3>Right Aligned Caption&lt;/h3>
&lt;h5 class="light grey-text text-lighten-3">Here's our small slogan.&lt;/h5>
&lt;/div>
&lt;/li>
&lt;li>
&lt;img src="http://lorempixel.com/580/250/nature/4"> &lt;!-- random image -->
&lt;div class="caption center-align">
&lt;h3>This is our big Tagline!&lt;/h3>
&lt;h5 class="light grey-text text-lighten-3">Here's our small slogan.&lt;/h5>
&lt;/div>
&lt;/li>
&lt;/ul>
&lt;div class="carousel">
&lt;a class="carousel-item" href="#one!">&lt;img src="http://lorempixel.com/250/250/nature/1">&lt;/a>
&lt;a class="carousel-item" href="#two!">&lt;img src="http://lorempixel.com/250/250/nature/2">&lt;/a>
&lt;a class="carousel-item" href="#three!">&lt;img src="http://lorempixel.com/250/250/nature/3">&lt;/a>
&lt;a class="carousel-item" href="#four!">&lt;img src="http://lorempixel.com/250/250/nature/4">&lt;/a>
&lt;a class="carousel-item" href="#five!">&lt;img src="http://lorempixel.com/250/250/nature/5">&lt;/a>
&lt;/div>
</code></pre>

<br>
<h4>Fullscreen Slider</h4>
<p>You can easliy make this slider a fullscreen slider by adding the class <code class="language-markup">fullscreen</code> to the slider div. Here's a quick demo.</p>
<a href="fullscreen-slider-demo.html" target="_blank" class="btn-large waves-effect waves-light">Open Demo</a>

<br>
<h4>jQuery Initialization</h4>
<pre><code class="language-javascript">
$(document).ready(function(){
$('.slider').slider({full_width: true});
$('.carousel').carousel();
});
</code></pre>
<br>

<h4>jQuery Plugin Options</h4>
<table class="hoverable">
<table class="highlight">
<thead>
<tr>
<th>Option Name</th>
Expand All @@ -239,19 +209,23 @@ <h4>jQuery Plugin Options</h4>

<tbody>
<tr>
<td>Indicators</td>
<td>Set to false to hide slide indicators. (Default: True)</td>
<td>time_constant</td>
<td>Transition time. (Default: 200)</td>
</tr>
<tr>
<td>Height</td>
<td>Set height of slider. (Default: 400)</td>
<td>dist</td>
<td>Perspective zoom. If 0, all items are the same size. (Default: -100)</td>
</tr>
<tr>
<td>Transition</td>
<td>shift</td>
<td>Set the duration of the transition animation in ms. (Default: 500)</td>
</tr>
<tr>
<td>Interval</td>
<td>padding</td>
<td>Set the duration between transitions in ms. (Default: 6000)</td>
</tr>
<tr>
<td>full_width</td>
<td>Set the duration between transitions in ms. (Default: 6000)</td>
</tr>
</tbody>
Expand All @@ -261,10 +235,6 @@ <h4>jQuery Plugin Options</h4>
<h4>jQuery Plugin Methods</h4>
<p>We have methods to pause, start, move to next and move to previous slide.</p>
<pre><code class="language-javascript col s12">
// Pause slider
$('.slider').slider('pause');
// Start slider
$('.slider').slider('start');
// Next slide
$('.slider').slider('next');
// Previous slide
Expand Down
16 changes: 8 additions & 8 deletions js/carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@

init : function(options) {
var defaults = {
timeConstant: 200, // ms
time_constant: 200, // ms
dist: -100, // zoom scale TODO: make this more intuitive as an option
shift: 0, // spacing for center image
padding: 0, // Padding between non center items
fullWidth: false // Change to full width styles
full_width: false // Change to full width styles
};
options = $.extend(defaults, options);

Expand All @@ -19,7 +19,7 @@
xform, frame, timestamp, ticker, dragged;

// Options
if (options.fullWidth) {
if (options.full_width) {
options.dist = 0;
}

Expand Down Expand Up @@ -83,14 +83,14 @@
' translateX(' + (dir * options.shift * tween * i) + 'px)' +
' translateZ(' + (options.dist * tween) + 'px)';
el.style.zIndex = 0;
if (options.fullWidth) { tweenedOpacity = 1; }
if (options.full_width) { tweenedOpacity = 1; }
else { tweenedOpacity = 1 - 0.2 * tween; }
el.style.opacity = tweenedOpacity;
half = count >> 1;

for (i = 1; i <= half; ++i) {
// right side
if (options.fullWidth) {
if (options.full_width) {
zTranslation = options.dist;
tweenedOpacity = (i === half && delta < 0) ? 1 - tween : 1;
} else {
Expand All @@ -106,7 +106,7 @@


// left side
if (options.fullWidth) {
if (options.full_width) {
zTranslation = options.dist;
tweenedOpacity = (i === half && delta > 0) ? 1 - tween : 1;
} else {
Expand All @@ -128,7 +128,7 @@
' translateX(' + (dir * options.shift * tween) + 'px)' +
' translateZ(' + (options.dist * tween) + 'px)';
el.style.zIndex = 0;
if (options.fullWidth) { tweenedOpacity = 1; }
if (options.full_width) { tweenedOpacity = 1; }
else { tweenedOpacity = 1 - 0.2 * tween; }
el.style.opacity = tweenedOpacity;
}
Expand All @@ -151,7 +151,7 @@

if (amplitude) {
elapsed = Date.now() - timestamp;
delta = amplitude * Math.exp(-elapsed / options.timeConstant);
delta = amplitude * Math.exp(-elapsed / options.time_constant);
if (delta > 2 || delta < -2) {
scroll(target - delta);
requestAnimationFrame(autoScroll);
Expand Down
68 changes: 19 additions & 49 deletions media.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ <h4>jQuery Plugin Methods</h4>
<div id="carousel" class="scrollspy section">
<h3 class="header">Carousel</h3>
<p class="caption">Our slider is a simple and elegant image carousel. You can also have captions that will be transitioned on their own depending on their alignment. You can also have indicators that show up on the bottom of the slider. </p>
<p>Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the slider.</p><br>
<p>Note: This is also Hammer.js compatible! Try swiping with your finger to scroll through the carousel.</p><br>

<div class="carousel">
<a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
Expand All @@ -290,56 +290,26 @@ <h3 class="header">Carousel</h3>
</div><br>

<pre><code class="language-markup">
&lt;div class="slider">
&lt;ul class="slides">
&lt;li>
&lt;img src="http://lorempixel.com/580/250/nature/1"> &lt;!-- random image -->
&lt;div class="caption center-align">
&lt;h3>This is our big Tagline!&lt;/h3>
&lt;h5 class="light grey-text text-lighten-3">Here's our small slogan.&lt;/h5>
&lt;/div>
&lt;/li>
&lt;li>
&lt;img src="http://lorempixel.com/580/250/nature/2"> &lt;!-- random image -->
&lt;div class="caption left-align">
&lt;h3>Left Aligned Caption&lt;/h3>
&lt;h5 class="light grey-text text-lighten-3">Here's our small slogan.&lt;/h5>
&lt;/div>
&lt;/li>
&lt;li>
&lt;img src="http://lorempixel.com/580/250/nature/3"> &lt;!-- random image -->
&lt;div class="caption right-align">
&lt;h3>Right Aligned Caption&lt;/h3>
&lt;h5 class="light grey-text text-lighten-3">Here's our small slogan.&lt;/h5>
&lt;/div>
&lt;/li>
&lt;li>
&lt;img src="http://lorempixel.com/580/250/nature/4"> &lt;!-- random image -->
&lt;div class="caption center-align">
&lt;h3>This is our big Tagline!&lt;/h3>
&lt;h5 class="light grey-text text-lighten-3">Here's our small slogan.&lt;/h5>
&lt;/div>
&lt;/li>
&lt;/ul>
&lt;div class="carousel">
&lt;a class="carousel-item" href="#one!">&lt;img src="http://lorempixel.com/250/250/nature/1">&lt;/a>
&lt;a class="carousel-item" href="#two!">&lt;img src="http://lorempixel.com/250/250/nature/2">&lt;/a>
&lt;a class="carousel-item" href="#three!">&lt;img src="http://lorempixel.com/250/250/nature/3">&lt;/a>
&lt;a class="carousel-item" href="#four!">&lt;img src="http://lorempixel.com/250/250/nature/4">&lt;/a>
&lt;a class="carousel-item" href="#five!">&lt;img src="http://lorempixel.com/250/250/nature/5">&lt;/a>
&lt;/div>
</code></pre>

<br>
<h4>Fullscreen Slider</h4>
<p>You can easliy make this slider a fullscreen slider by adding the class <code class="language-markup">fullscreen</code> to the slider div. Here's a quick demo.</p>
<a href="fullscreen-slider-demo.html" target="_blank" class="btn-large waves-effect waves-light">Open Demo</a>

<br>
<h4>jQuery Initialization</h4>
<pre><code class="language-javascript">
$(document).ready(function(){
$('.slider').slider({full_width: true});
$('.carousel').carousel();
});
</code></pre>
<br>

<h4>jQuery Plugin Options</h4>
<table class="hoverable">
<table class="highlight">
<thead>
<tr>
<th>Option Name</th>
Expand All @@ -349,19 +319,23 @@ <h4>jQuery Plugin Options</h4>

<tbody>
<tr>
<td>Indicators</td>
<td>Set to false to hide slide indicators. (Default: True)</td>
<td>time_constant</td>
<td>Transition time. (Default: 200)</td>
</tr>
<tr>
<td>Height</td>
<td>Set height of slider. (Default: 400)</td>
<td>dist</td>
<td>Perspective zoom. If 0, all items are the same size. (Default: -100)</td>
</tr>
<tr>
<td>Transition</td>
<td>shift</td>
<td>Set the duration of the transition animation in ms. (Default: 500)</td>
</tr>
<tr>
<td>Interval</td>
<td>padding</td>
<td>Set the duration between transitions in ms. (Default: 6000)</td>
</tr>
<tr>
<td>full_width</td>
<td>Set the duration between transitions in ms. (Default: 6000)</td>
</tr>
</tbody>
Expand All @@ -371,10 +345,6 @@ <h4>jQuery Plugin Options</h4>
<h4>jQuery Plugin Methods</h4>
<p>We have methods to pause, start, move to next and move to previous slide.</p>
<pre><code class="language-javascript col s12">
// Pause slider
$('.slider').slider('pause');
// Start slider
$('.slider').slider('start');
// Next slide
$('.slider').slider('next');
// Previous slide
Expand Down

0 comments on commit e3d04f4

Please sign in to comment.