Merge pull request materializecss#45 from nekonenene/replace_lorempix…

…el_images

jade/page-contents/cards_content.html

@@ -1,6 +1,5 @@
 <div class="container">
   <div class="row">
-
     <div class="col s12 m8 offset-m1 xl7 offset-xl1">
 
   <!-- Cards Section-->
@@ -167,7 +166,7 @@ <h3 class="header">FABs in Cards</h3>
             <h3 class="header">Horizontal Card</h3>
             <div class="card horizontal">
               <div class="card-image">
-                <img src="https://lorempixel.com/100/190/nature/6">
+                <img src="images/placeholder/80x200_a.jpg">
               </div>
               <div class="card-stacked">
                 <div class="card-content">
@@ -192,7 +191,7 @@ <h3 class="header">Horizontal Card</h3>
     &lt;h2 class="header">Horizontal Card&lt;/h2>
     &lt;div class="card horizontal">
       &lt;div class="card-image">
-        &lt;img src="https://lorempixel.com/100/190/nature/6">
+        &lt;img src="images/placeholder/80x200_a.jpg">
       &lt;/div>
       &lt;div class="card-stacked">
         &lt;div class="card-content">
@@ -221,7 +220,6 @@ <h3 class="header">Card Reveal</h3>
               </div>
               <div class="card-content">
                 <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
-
                 <p><a href="#!">This is a link</a></p>
               </div>
               <div class="card-reveal">
@@ -264,7 +262,6 @@ <h5>Card Action Options</h5>
               </div>
               <div class="card-content">
                 <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
-
                 <p><a href="#!">This is a link</a></p>
               </div>
               <div class="card-reveal">
@@ -293,7 +290,6 @@ <h5>Card Action Options</h5>
               </div>
               <div class="card-content">
                 <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
-
                 <p><a href="#!">This is a link</a></p>
               </div>
 
@@ -328,7 +324,6 @@ <h5>Card Action Options</h5>
         </div>
       </div>
 
-
       <div id="tabs" class="section scrollspy">
         <div class="row">
           <!-- Small Card -->
@@ -415,7 +410,6 @@ <h5>Colored</h5>
         </div>
       </div>
 
-
       <div id="sizes" class="section scrollspy">
         <div class="row">
           <!-- Small Card -->
@@ -505,7 +499,6 @@ <h5>Large</h5>
         </div>
       </div>
 
-
       <div id="panel" class="section scrollspy">
         <div class="row">
           <!-- Card Panel -->
@@ -536,8 +529,6 @@ <h3 class="header">Card Panel</h3>
           </div>
         </div>
       </div>
-
-
     </div>
 
     <div class="col hide-on-small-only m3 xl3 offset-xl1">
@@ -560,7 +551,5 @@ <h3 class="header">Card Panel</h3>
         </div>
       </div>
     </div>
-
   </div>
 </div>
-

jade/page-contents/carousel_content.html

@@ -11,30 +11,30 @@
 
         <div class="carousel">
           <a class="carousel-item" href="#one!">
-            <img src="https://lorempixel.com/250/250/nature/1">
+            <img src="images/placeholder/250x250_a.png">
           </a>
           <a class="carousel-item" href="#two!">
-            <img src="https://lorempixel.com/250/250/nature/2">
+            <img src="images/placeholder/250x250_b.png">
           </a>
           <a class="carousel-item" href="#three!">
-            <img src="https://lorempixel.com/250/250/nature/3">
+            <img src="images/placeholder/250x250_c.png">
           </a>
           <a class="carousel-item" href="#four!">
-            <img src="https://lorempixel.com/250/250/nature/4">
+            <img src="images/placeholder/250x250_d.png">
           </a>
           <a class="carousel-item" href="#five!">
-            <img src="https://lorempixel.com/250/250/nature/5">
+            <img src="images/placeholder/250x250_e.png">
           </a>
         </div>
         <br>
 
         <pre><code class="language-markup">
   &lt;div class="carousel">
-    &lt;a class="carousel-item" href="#one!">&lt;img src="https://lorempixel.com/250/250/nature/1">&lt;/a>
-    &lt;a class="carousel-item" href="#two!">&lt;img src="https://lorempixel.com/250/250/nature/2">&lt;/a>
-    &lt;a class="carousel-item" href="#three!">&lt;img src="https://lorempixel.com/250/250/nature/3">&lt;/a>
-    &lt;a class="carousel-item" href="#four!">&lt;img src="https://lorempixel.com/250/250/nature/4">&lt;/a>
-    &lt;a class="carousel-item" href="#five!">&lt;img src="https://lorempixel.com/250/250/nature/5">&lt;/a>
+    &lt;a class="carousel-item" href="#one!">&lt;img src="images/placeholder/250x250_a.png">&lt;/a>
+    &lt;a class="carousel-item" href="#two!">&lt;img src="images/placeholder/250x250_b.png">&lt;/a>
+    &lt;a class="carousel-item" href="#three!">&lt;img src="images/placeholder/250x250_c.png">&lt;/a>
+    &lt;a class="carousel-item" href="#four!">&lt;img src="images/placeholder/250x250_d.png">&lt;/a>
+    &lt;a class="carousel-item" href="#five!">&lt;img src="images/placeholder/250x250_e.png">&lt;/a>
   &lt;/div>
       </code></pre>
       </div>
@@ -239,7 +239,6 @@ <h3 class="header">Properties</h3>
         </table>
       </div>
 
-
       <!--  Slider Section  -->
       <div id="slider" class="scrollspy section">
         <h3 class="header">Full Width Slider</h3>
@@ -250,26 +249,26 @@ <h3 class="header">Full Width Slider</h3>
 
         <div class="carousel carousel-slider">
           <a class="carousel-item" href="#one!">
-            <img src="https://lorempixel.com/800/400/food/1">
+            <img src="images/placeholder/800x400_a.jpg">
           </a>
           <a class="carousel-item" href="#two!">
-            <img src="https://lorempixel.com/800/400/food/2">
+            <img src="images/placeholder/800x400_b.jpg">
           </a>
           <a class="carousel-item" href="#three!">
-            <img src="https://lorempixel.com/800/400/food/3">
+            <img src="images/placeholder/800x400_c.jpg">
           </a>
           <a class="carousel-item" href="#four!">
-            <img src="https://lorempixel.com/800/400/food/4">
+            <img src="images/placeholder/800x400_d.jpg">
           </a>
         </div>
         <br>
 
         <pre><code class="language-markup">
   &lt;div class="carousel carousel-slider">
-    &lt;a class="carousel-item" href="#one!">&lt;img src="https://lorempixel.com/800/400/food/1">&lt;/a>
-    &lt;a class="carousel-item" href="#two!">&lt;img src="https://lorempixel.com/800/400/food/2">&lt;/a>
-    &lt;a class="carousel-item" href="#three!">&lt;img src="https://lorempixel.com/800/400/food/3">&lt;/a>
-    &lt;a class="carousel-item" href="#four!">&lt;img src="https://lorempixel.com/800/400/food/4">&lt;/a>
+    &lt;a class="carousel-item" href="#one!">&lt;img src="images/placeholder/800x400_a.jpg">&lt;/a>
+    &lt;a class="carousel-item" href="#two!">&lt;img src="images/placeholder/800x400_b.jpg">&lt;/a>
+    &lt;a class="carousel-item" href="#three!">&lt;img src="images/placeholder/800x400_c.jpg">&lt;/a>
+    &lt;a class="carousel-item" href="#four!">&lt;img src="images/placeholder/800x400_d.jpg">&lt;/a>
   &lt;/div>
         </code></pre>
 
@@ -354,12 +353,8 @@ <h2>Fourth Panel</h2>
   });
         </code></pre>
       </div>
-
     </div>
 
-
-
-
     <!-- Table of Contents -->
     <div class="col hide-on-small-only m3 xl3 offset-xl1">
       <div class="toc-wrapper">
@@ -394,6 +389,5 @@ <h2>Fourth Panel</h2>
         </div>
       </div>
     </div>
-
   </div>
-</div>
+</div>

jade/page-contents/media_content.html

@@ -16,7 +16,6 @@ <h3 class="header">Material Box</h3>
     &lt;img class="materialboxed" width="650" src="images/sample-1.jpg">
       </code></pre>
 
-
         <h4>Initialization</h4>
         <pre><code class="language-javascript">
   document.addEventListener('DOMContentLoaded', function() {
@@ -188,15 +187,13 @@ <h4>Properties</h4>
         <h4>Captions</h4>
         <p>It is very easy to add a short caption to your photo. Just add the caption as a
           <code class="language-markup">data-caption</code> attribute.</p>
-        <img class="materialboxed" data-caption="A picture of a way with a group of trees in a park" width="250" src="https://lorempixel.com/800/400/nature/4">
+        <img class="materialboxed" data-caption="A picture of a way with a group of trees in a park" width="250" src="images/placeholder/800x400_d.jpg">
         <pre><code class="language-markup">
-  &lt;img class="materialboxed" data-caption="A picture of a way with a group of trees in a park" width="250" src="https://lorempixel.com/800/400/nature/4">
+  &lt;img class="materialboxed" data-caption="A picture of a way with a group of trees in a park" width="250" src="images/placeholder/800x400_d.jpg">
           </code></pre>
       </div>
-
       <br>
 
-
       <!--  Slider Section  -->
       <div id="slider" class="scrollspy section">
         <h3 class="header">Slider</h3>
@@ -207,31 +204,31 @@ <h3 class="header">Slider</h3>
         <div class="slider">
           <ul class="slides">
             <li>
-              <img src="https://lorempixel.com/580/250/nature/1">
+              <img src="images/placeholder/800x400_a.jpg">
               <!-- random image -->
               <div class="caption center-align">
                 <h3>This is our big Tagline!</h3>
                 <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
               </div>
             </li>
             <li>
-              <img src="https://lorempixel.com/580/250/nature/2">
+              <img src="images/placeholder/800x400_b.jpg">
               <!-- random image -->
               <div class="caption left-align">
                 <h3>Left Aligned Caption</h3>
                 <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
               </div>
             </li>
             <li>
-              <img src="https://lorempixel.com/580/250/nature/3">
+              <img src="images/placeholder/800x400_c.jpg">
               <!-- random image -->
               <div class="caption right-align">
                 <h3>Right Aligned Caption</h3>
                 <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
               </div>
             </li>
             <li>
-              <img src="https://lorempixel.com/580/250/nature/4">
+              <img src="images/placeholder/800x400_d.jpg">
               <!-- random image -->
               <div class="caption center-align">
                 <h3>This is our big Tagline!</h3>
@@ -246,28 +243,28 @@ <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
   &lt;div class="slider">
     &lt;ul class="slides">
       &lt;li>
-        &lt;img src="https://lorempixel.com/580/250/nature/1"> &lt;!-- random image -->
+        &lt;img src="images/placeholder/800x400_a.jpg">
         &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="https://lorempixel.com/580/250/nature/2"> &lt;!-- random image -->
+        &lt;img src="images/placeholder/800x400_b.jpg">
         &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="https://lorempixel.com/580/250/nature/3"> &lt;!-- random image -->
+        &lt;img src="images/placeholder/800x400_c.jpg">
         &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="https://lorempixel.com/580/250/nature/4"> &lt;!-- random image -->
+        &lt;img src="images/placeholder/800x400_d.jpg">
         &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>
@@ -355,6 +352,7 @@ <h4>Methods</h4>
     */
           </code></pre>
         </blockquote>
+
         <h5 class="method-header">
           .pause();
         </h5>
@@ -437,10 +435,8 @@ <h4>Fullscreen Slider</h4>
           <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>
       </div>
-
     </div>
 
-
     <!-- Table of Contents -->
     <div class="col hide-on-small-only m3 xl3 offset-xl1">
       <div class="toc-wrapper">
@@ -460,6 +456,5 @@ <h4>Fullscreen Slider</h4>
         </div>
       </div>
     </div>
-
   </div>
-</div>
+</div>

test/html/carousel.html

@@ -7,7 +7,6 @@
     <!-- CSS  -->
     <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
   </head>
   <body>
     <h3>Carousel within collapsible</h3>
@@ -20,11 +19,11 @@ <h3>Carousel within collapsible</h3>
         <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
         <div class="collapsible-body">
           <div class="carousel">
-            <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
-            <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
-            <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
-            <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
-            <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
+            <a class="carousel-item" href="#one!"><img src="../../images/placeholder/250x250_a.png"></a>
+            <a class="carousel-item" href="#two!"><img src="../../images/placeholder/250x250_b.png"></a>
+            <a class="carousel-item" href="#three!"><img src="../../images/placeholder/250x250_c.png"></a>
+            <a class="carousel-item" href="#four!"><img src="../../images/placeholder/250x250_d.png"></a>
+            <a class="carousel-item" href="#five!"><img src="../../images/placeholder/250x250_e.png"></a>
           </div>
         </div>
       </li>
@@ -41,30 +40,26 @@ <h3>Full Width Carousels in tabs</h3>
     </ul>
     <div id="test1" class="col s12">
       <div class="carousel carousel-slider">
-        <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a>
-        <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a>
-        <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a>
-        <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
+        <a class="carousel-item" href="#one!"><img src="../../images/placeholder/800x400_a.jpg"></a>
+        <a class="carousel-item" href="#two!"><img src="../../images/placeholder/800x400_b.jpg"></a>
+        <a class="carousel-item" href="#three!"><img src="../../images/placeholder/800x400_c.jpg"></a>
+        <a class="carousel-item" href="#four!"><img src="../../images/placeholder/800x400_d.jpg"></a>
       </div>
     </div>
     <div id="test2" class="col s12">
       <div class="carousel carousel-slider">
-        <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a>
-        <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a>
-        <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a>
-        <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
+        <a class="carousel-item" href="#one!"><img src="../../images/placeholder/800x400_a.jpg"></a>
+        <a class="carousel-item" href="#two!"><img src="../../images/placeholder/800x400_b.jpg"></a>
+        <a class="carousel-item" href="#three!"><img src="../../images/placeholder/800x400_c.jpg"></a>
+        <a class="carousel-item" href="#four!"><img src="../../images/placeholder/800x400_d.jpg"></a>
       </div>
     </div>
 
-
-
-
     <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
     <script src="../../../bin/materialize.js"></script>
 
     <script type="text/javascript">
     $( document ).ready(function() {
-
       $('.collapsible').collapsible({
         onOpenEnd: function(el) {
           console.log("OPEN", el);
@@ -81,11 +76,7 @@ <h3>Full Width Carousels in tabs</h3>
 
       $('.carousel').carousel();
       $('.carousel.carousel-slider').carousel({fullWidth : true});
-
     });
-
-
-
     </script>
   </body>
-</html>
+</html>