Documentation/examples updated

victordieggo · Aug 22, 2017 · 22c498b · 22c498b
1 parent 5a4c765
commit 22c498b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Everything you'll need is located under the [`lightbox/`](lightbox/) directory.
 Add the `data-lightbox` attribute to an `<a>` tag and set its `href` to the content you want to be opened in the lightbox. When opening an image, you can send its alt text using the `data-image-alt` attribute:
 
 ```html
-<a href="assets\dist\img\image-1.png" data-lightbox data-image-alt="Image 1">
+<a href="assets/dist/img/image-1.png" data-lightbox data-image-alt="Image 1">
   Image
 </a>
 <a href="#modal" data-lightbox>
@@ -48,13 +48,13 @@ Set the `data-lightbox` attribute to `"gallery"` on all `<a>` tags under the sam
 ```html
 <div class="gallery">
   <div class="gallery-item">
-    <a href="assets\dist\img\image-1.png" data-lightbox="gallery" data-image-alt="Image 1">
-      <img src="assets\dist\img\thumbnail-gallery.png" alt="Thumbnail 1">
+    <a href="assets/dist/img/image-1.png" data-lightbox="gallery" data-image-alt="Image 1">
+      <img src="assets/dist/img/thumbnail-gallery.png" alt="Thumbnail 1">
     </a>
   </div>
   <div class="gallery-item">
-    <a href="assets\dist\img\image-2.png" data-lightbox="gallery" data-image-alt="Image 2">
-      <img src="assets\dist\img\thumbnail-gallery.png" alt="Thumbnail 2">
+    <a href="assets/dist/img/image-2.png" data-lightbox="gallery" data-image-alt="Image 2">
+      <img src="assets/dist/img/thumbnail-gallery.png" alt="Thumbnail 2">
     </a>
   </div>
 </div>

diff --git a/index.html b/index.html
@@ -53,10 +53,10 @@ <h2>Get Started</h2>
     <section id="usage" class="wrapper">
       <h2>Usage</h2>
       <br/>
-      <p class="text-block">Add the <span class="code">data-lightbox</span> attribute to an <span class="code">&lta></span> tag and set its <span class="code">href</span> to the content you want to be opened in the lightbox. When opening an image, you can send its alt text using the <span class="code">data-image-alt</span> attribute:</p>
+      <p class="text-block">Add the <span class="code">data-lightbox</span> attribute to an <span class="code">&#60;a></span> tag and set its <span class="code">href</span> to the content you want to be opened in the lightbox. When opening an image, you can send its alt text using the <span class="code">data-image-alt</span> attribute:</p>
       <br/>
       <div class="examples">
-        <a class="btn" href="assets\dist\img\image-1.png" data-lightbox data-image-alt="Image 1">
+        <a class="btn" href="assets/dist/img/image-1.png" data-lightbox data-image-alt="Image 1">
           Image
         </a>
         <a class="btn" href="#modal" data-lightbox>
@@ -81,7 +81,7 @@ <h3>Welcome!</h3>
         </div>
       </div>
       <br/>
-      <pre><code class="language-markup">&lt;a href="assets\dist\img\image-1.png" data-lightbox data-image-alt="Image 1">
+      <pre><code class="language-markup">&lt;a href="assets/dist/img/image-1.png" data-lightbox data-image-alt="Image 1">
   Image
 &lt;/a>
 &lt;a href="#modal" data-lightbox>
@@ -110,40 +110,40 @@ <h3>Welcome!</h3>
       <h2>Gallery</h2>
       <br/>
       <p class="text-block">
-        Set the <span class="code">data-lightbox</span> attribute to <span class="code">"gallery"</span> on all <span class="code">&lta></span> tags under the same parent element and any previous or next items will be found automatically:</p>
+        Set the <span class="code">data-lightbox</span> attribute to <span class="code">"gallery"</span> on all <span class="code">&#60;a></span> tags under the same parent element and any previous or next items will be found automatically:</p>
       <br/>
       <div class="image-gallery">
         <div class="gallery-item">
-          <a href="assets\dist\img\image-1.png" data-lightbox="gallery" data-image-alt="Image 1">
-            <img src="assets\dist\img\thumbnail-gallery.png" alt="Alt Text" />
+          <a href="assets/dist/img/image-1.png" data-lightbox="gallery" data-image-alt="Image 1">
+            <img src="assets/dist/img/thumbnail-gallery.png" alt="Alt Text" />
           </a>
         </div>
         <div class="gallery-item">
-          <a href="assets\dist\img\image-2.png" data-lightbox="gallery" data-image-alt="Image 2">
-            <img src="assets\dist\img\thumbnail-gallery.png" alt="Alt Text" />
+          <a href="assets/dist/img/image-2.png" data-lightbox="gallery" data-image-alt="Image 2">
+            <img src="assets/dist/img/thumbnail-gallery.png" alt="Alt Text" />
           </a>
         </div>
         <div class="gallery-item">
-          <a href="assets\dist\img\image-3.png" data-lightbox="gallery" data-image-alt="Image 3">
-            <img src="assets\dist\img\thumbnail-gallery.png" alt="Alt Text" />
+          <a href="assets/dist/img/image-3.png" data-lightbox="gallery" data-image-alt="Image 3">
+            <img src="assets/dist/img/thumbnail-gallery.png" alt="Alt Text" />
           </a>
         </div>
         <div class="gallery-item">
-          <a href="assets\dist\img\image-4.png" data-lightbox="gallery" data-image-alt="Image 4">
-            <img src="assets\dist\img\thumbnail-gallery.png" alt="Alt Text" />
+          <a href="assets/dist/img/image-4.png" data-lightbox="gallery" data-image-alt="Image 4">
+            <img src="assets/dist/img/thumbnail-gallery.png" alt="Alt Text" />
           </a>
         </div>
       </div>
       <br/>
       <pre><code class="language-markup">&lt;div class="gallery">
   &lt;div class="gallery-item">
-    &lt;a href="assets\dist\img\image-1.png" data-lightbox="gallery" data-image-alt="Image 1">
-      &lt;img src="assets\dist\img\thumbnail-gallery.png" alt="Thumbnail 1">
+    &lt;a href="assets/dist/img/image-1.png" data-lightbox="gallery" data-image-alt="Image 1">
+      &lt;img src="assets/dist/img/thumbnail-gallery.png" alt="Thumbnail 1">
     &lt;/a>
   &lt;/div>
   &lt;div class="gallery-item">
-    &lt;a href="assets\dist\img\image-2.png" data-lightbox="gallery" data-image-alt="Image 2">
-      &lt;img src="assets\dist\img\thumbnail-gallery.png" alt="Thumbnail 2">
+    &lt;a href="assets/dist/img/image-2.png" data-lightbox="gallery" data-image-alt="Image 2">
+      &lt;img src="assets/dist/img/thumbnail-gallery.png" alt="Thumbnail 2">
     &lt;/a>
   &lt;/div>
 &lt;/div></code></pre>