From 3e7268867522b7db67c11e37d99476992c9c45df Mon Sep 17 00:00:00 2001
From: Jeffrey Pearce <jeffikus@gmail.com>
Date: Tue, 26 May 2015 11:31:28 +0200
Subject: [PATCH] Closes #819 - Adds caption demo file

---
 demo/basic-carousel.html                      |   1 +
 demo/basic-slider-with-caption.html           | 186 ++++++++++++++++++
 ...asic-slider-with-custom-direction-nav.html |   1 +
 demo/carousel-min-max.html                    |   1 +
 demo/dynamic-carousel-min-max.html            |   1 +
 demo/index.html                               |   1 +
 demo/thumbnail-controlnav.html                |   1 +
 demo/thumbnail-slider.html                    |   1 +
 demo/video-wistia.html                        |   1 +
 demo/video.html                               |   1 +
 10 files changed, 195 insertions(+)
 create mode 100644 demo/basic-slider-with-caption.html
diff --git a/demo/basic-carousel.html b/demo/basic-carousel.html
index ed97fce8..839ee23d 100644
--- a/demo/basic-carousel.html
+++ b/demo/basic-carousel.html
@@ -31,6 +31,7 @@ <h3 class="header-nav">Other Examples</h3>
         <ul>
           <li><a href="index.html">Basic Slider</a></li>
           <li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
+          <li><a href="basic-slider-with-caption.html">Basic Slider with Simple Caption</a></li>
           <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
           <li class="active"><a href="basic-carousel.html">Basic Carousel</a></li>
diff --git a/demo/basic-slider-with-caption.html b/demo/basic-slider-with-caption.html
new file mode 100644
index 00000000..88b08730
--- /dev/null
+++ b/demo/basic-slider-with-caption.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+	<meta content="charset=utf-8">
+	<title>FlexSlider 2</title>
+	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
+
+  <!-- Syntax Highlighter -->
+  <link href="css/shCore.css" rel="stylesheet" type="text/css" />
+  <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
+  <!-- Demo CSS -->
+	<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
+	<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
+
+	<!-- Modernizr -->
+  <script src="js/modernizr.js"></script>
+
+  <style type="text/css">
+    .flex-caption {
+      width: 96%;
+      padding: 2%;
+      left: 0;
+      bottom: 0;
+      background: rgba(0,0,0,.5);
+      color: #fff;
+      text-shadow: 0 -1px 0 rgba(0,0,0,.3);
+      font-size: 14px;
+      line-height: 18px;
+    }
+    li.css a {
+      border-radius: 0;
+    }
+  </style>
+
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body class="loading">
+
+  <div id="container" class="cf">
+    <header role="navigation">
+      <a class="logo" href="http://www.woothemes.com" title="WooThemes">
+        <img src="images/logo.png" alt="WooThemes" />
+	  </a>
+      <h1>FlexSlider 2</h1>
+      <h2>The best responsive slider. Period.</h2>
+      <a class="button green" href="/woothemes/FlexSlider/zipball/master">Download Flexslider</a>
+      <h3 class="nav-header">Other Examples</h3>
+      <nav>
+        <ul>
+          <li><a href="index.html">Basic Slider</a></li>
+          <li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
+          <li class="active"><a href="basic-slider-with-caption.html">Basic Slider with Simple Caption</a></li>
+          <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
+          <li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
+          <li><a href="basic-carousel.html">Basic Carousel</a></li>
+          <li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
+          <li><a href="dynamic-carousel-min-max.html">Carousel with dynamic min/max ranges</a></li>
+          <li><a href="video.html">Video & the api (vimeo)</a></li>
+          <li><a href="video-wistia.html">Video & the api (wistia)</a></li>
+        </ul>
+      </nav>
+    </header>
+
+	<div id="main" role="main">
+      <section class="slider">
+        <div class="flexslider">
+          <ul class="slides">
+            <li>
+  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
+              <p class="flex-caption">Adventurer Cheesecake Brownie</p>
+  	    		</li>
+  	    		<li>
+  	    	    <img src="images/kitchen_adventurer_lemon.jpg" />
+              <p class="flex-caption">Adventurer Lemon</p>
+  	    		</li>
+  	    		<li>
+  	    	    <img src="images/kitchen_adventurer_donut.jpg" />
+              <p class="flex-caption">Adventurer Donut</p>
+  	    		</li>
+  	    		<li>
+  	    	    <img src="images/kitchen_adventurer_caramel.jpg" />
+              <p class="flex-caption">Adventurer Caramel</p>
+  	    		</li>
+          </ul>
+        </div>
+      </section>
+      <aside>
+        <div class="cf">
+          <h3>Basic Slider</h3>
+          <ul class="toggle cf">
+            <li class="js"><a href="#view-js">JS</a></li>
+            <li class="css"><a href="#view-css">CSS</a></li>
+            <li class="html"><a href="#view-html">HTML</a></li>
+          </ul>
+        </div>
+        <div id="view-js" class="code">
+          <pre class="brush: js; toolbar: false; gutter: false;">
+            // Can also be used with $(document).ready()
+            $(window).load(function() {
+              $('.flexslider').flexslider({
+                animation: "slide"
+              });
+            });
+          </pre>
+        </div>
+        <div id="view-css" class="code">
+          <pre class="brush: xml; toolbar: false; gutter: false;">
+            &lt;!-- Place either at the bottom in the &lt;head&gt; of your page or inside your CSS -->
+            &lt;style type="text/css">
+            .flex-caption {
+              width: 96%;
+              padding: 2%;
+              left: 0;
+              bottom: 0;
+              background: rgba(0,0,0,.5);
+              color: #fff;
+              text-shadow: 0 -1px 0 rgba(0,0,0,.3);
+              font-size: 14px;
+              line-height: 18px;
+            }
+            &lt;/style>
+          </pre>
+        </div>
+        <div id="view-html" class="code">
+          <pre class="brush: xml; toolbar: false; gutter: false;">
+            &lt;!-- Place somewhere in the &lt;body&gt; of your page -->
+            &lt;div class="flexslider">
+              &lt;ul class="slides">
+                &lt;li>
+                  &lt;img src="slide1.jpg" />
+                  &lt;p class="flex-caption">Adventurer Cheesecake Brownie&lt;/p>
+                &lt;/li>
+                &lt;li>
+                  &lt;img src="slide2.jpg" />
+                  &lt;p class="flex-caption">Adventurer Lemon&lt;/p>
+                &lt;/li>
+                &lt;li>
+                  &lt;img src="slide3.jpg" />
+                  &lt;p class="flex-caption">Adventurer Donut&lt;/p>
+                &lt;/li>
+                &lt;li>
+                  &lt;img src="slide4.jpg" />
+                  &lt;p class="flex-caption">Adventurer Caramel&lt;/p>
+                &lt;/li>
+              &lt;/ul>
+            &lt;/div>
+          </pre>
+        </div>
+      </aside>
+    </div>
+
+  </div>
+
+  <!-- jQuery -->
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
+
+  <!-- FlexSlider -->
+  <script defer src="../jquery.flexslider.js"></script>
+
+  <script type="text/javascript">
+    $(function(){
+      SyntaxHighlighter.all();
+    });
+    $(window).load(function(){
+      $('.flexslider').flexslider({
+        animation: "slide",
+        start: function(slider){
+          $('body').removeClass('loading');
+        }
+      });
+    });
+  </script>
+
+
+  <!-- Syntax Highlighter -->
+  <script type="text/javascript" src="js/shCore.js"></script>
+  <script type="text/javascript" src="js/shBrushXml.js"></script>
+  <script type="text/javascript" src="js/shBrushJScript.js"></script>
+
+  <!-- Optional FlexSlider Additions -->
+  <script src="js/jquery.easing.js"></script>
+  <script src="js/jquery.mousewheel.js"></script>
+  <script defer src="js/demo.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/demo/basic-slider-with-custom-direction-nav.html b/demo/basic-slider-with-custom-direction-nav.html
index 86718110..e9bc8085 100644
--- a/demo/basic-slider-with-custom-direction-nav.html
+++ b/demo/basic-slider-with-custom-direction-nav.html
@@ -60,6 +60,7 @@ <h3 class="nav-header">Other Examples</h3>
         <ul>
           <li><a href="index.html">Basic Slider</a></li>
           <li class="active"><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
+          <li><a href="basic-slider-with-caption.html">Basic Slider with Simple Caption</a></li>
           <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
           <li><a href="basic-carousel.html">Basic Carousel</a></li>
diff --git a/demo/carousel-min-max.html b/demo/carousel-min-max.html
index b8bb1f45..43280303 100644
--- a/demo/carousel-min-max.html
+++ b/demo/carousel-min-max.html
@@ -31,6 +31,7 @@ <h3 class="nav-header">Other Examples</h3>
         <ul>
           <li><a href="index.html">Basic Slider</a></li>
           <li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
+          <li><a href="basic-slider-with-caption.html">Basic Slider with Simple Caption</a></li>
           <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
           <li><a href="basic-carousel.html">Basic Carousel</a></li>
diff --git a/demo/dynamic-carousel-min-max.html b/demo/dynamic-carousel-min-max.html
index 4f728506..78fc2349 100644
--- a/demo/dynamic-carousel-min-max.html
+++ b/demo/dynamic-carousel-min-max.html
@@ -31,6 +31,7 @@ <h3 class="nav-header">Other Examples</h3>
         <ul>
           <li><a href="index.html">Basic Slider</a></li>
           <li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
+          <li><a href="basic-slider-with-caption.html">Basic Slider with Simple Caption</a></li>
           <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
           <li><a href="basic-carousel.html">Basic Carousel</a></li>
diff --git a/demo/index.html b/demo/index.html
index 6fa37cff..dfaef32b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -31,6 +31,7 @@ <h3 class="nav-header">Other Examples</h3>
         <ul>
           <li class="active"><a href="index.html">Basic Slider</a></li>
           <li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
+          <li><a href="basic-slider-with-caption.html">Basic Slider with Simple Caption</a></li>
           <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
           <li><a href="basic-carousel.html">Basic Carousel</a></li>
diff --git a/demo/thumbnail-controlnav.html b/demo/thumbnail-controlnav.html
index f56754c3..cbfeba2c 100644
--- a/demo/thumbnail-controlnav.html
+++ b/demo/thumbnail-controlnav.html
@@ -31,6 +31,7 @@ <h3 class="nav-header">Other Examples</h3>
         <ul>
           <li><a href="index.html">Basic Slider</a></li>
           <li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
+          <li><a href="basic-slider-with-caption.html">Basic Slider with Simple Caption</a></li>
           <li class="active"><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
           <li><a href="basic-carousel.html">Basic Carousel</a></li>
diff --git a/demo/thumbnail-slider.html b/demo/thumbnail-slider.html
index f9f9dd54..0ea76f2c 100644
--- a/demo/thumbnail-slider.html
+++ b/demo/thumbnail-slider.html
@@ -31,6 +31,7 @@ <h3 class="nav-header">Other Examples</h3>
         <ul>
           <li><a href="index.html">Basic Slider</a></li>
           <li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
+          <li><a href="basic-slider-with-caption.html">Basic Slider with Simple Caption</a></li>
           <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li class="active"><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
           <li><a href="basic-carousel.html">Basic Carousel</a></li>
diff --git a/demo/video-wistia.html b/demo/video-wistia.html
index e49efb24..78e0113a 100644
--- a/demo/video-wistia.html
+++ b/demo/video-wistia.html
@@ -38,6 +38,7 @@ <h3 class="nav-header">Other Examples</h3>
         <ul>
           <li><a href="index.html">Basic Slider</a></li>
           <li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
+          <li><a href="basic-slider-with-caption.html">Basic Slider with Simple Caption</a></li>
           <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
           <li><a href="basic-carousel.html">Basic Carousel</a></li>
diff --git a/demo/video.html b/demo/video.html
index a39ac17f..23e1a398 100644
--- a/demo/video.html
+++ b/demo/video.html
@@ -31,6 +31,7 @@ <h3 class="nav-header">Other Examples</h3>
         <ul>
           <li><a href="index.html">Basic Slider</a></li>
           <li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
+          <li><a href="basic-slider-with-caption.html">Basic Slider with Simple Caption</a></li>
           <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
           <li><a href="basic-carousel.html">Basic Carousel</a></li>
