Update README.md

README.md

@@ -27,32 +27,32 @@ You can find the css and js files here: https://github.com/sezanzeb/Hippo/tree/m
 ### Minimal Working Example
 
 ```html
- <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
- <script src="hippo-gallery.js"></script> 
+<link rel="stylesheet" href="hippo-gallery.css" type="text/css">
+<script src="hippo-gallery.js"></script> 
 
- <img zoom="full.jpg" src="thumbnail.jpg"/>
+<img zoom="full.jpg" src="thumbnail.jpg"/>
 ```
 
 Just take care of setting the href, zoom and src attributes according to your project
 
 will display "click here" on your website. Clicking it will open an image (when the zoom attribute was set correctly)
 
 ```html
- <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
- <script src="hippo-gallery.js"></script> 
+<link rel="stylesheet" href="hippo-gallery.css" type="text/css">
+<script src="hippo-gallery.js"></script> 
 
- <span zoom="full.jpg">click here</span>
+<span zoom="full.jpg">click here</span>
 ```
 
 style it the way you like using the following css for example, to make it look like a clickable link:
 
 ```css
- span[zoom]
- {
-  color: #ee3388;
-  text-decoration: underline;
-  cursor: pointer;
- }
+span[zoom]
+{
+ color: #ee3388;
+ text-decoration: underline;
+ cursor: pointer;
+}
 ```
 
 <br/>
@@ -62,12 +62,12 @@ style it the way you like using the following css for example, to make it look l
 Activates navigation using arrow keys or the buttons on the top left and top right of the lightbox
 
 ```html
- <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
- <script src="hippo-gallery.js"></script>
+<link rel="stylesheet" href="hippo-gallery.css" type="text/css">
+<script src="hippo-gallery.js"></script>
 
- <img category="category1" zoom="pic1.jpg" src="preview1.jpeg" caption="caption1"/>
- <img category="category2" zoom="pic2.jpg" src="preview2.jpeg" caption="caption2"/>
- <span category="category2" caption="caption3" zoom="pic3.jpg" zoom="full.jpg">click here</span>
+<img category="category1" zoom="pic1.jpg" src="preview1.jpeg" caption="caption1"/>
+<img category="category2" zoom="pic2.jpg" src="preview2.jpeg" caption="caption2"/>
+<span category="category2" caption="caption3" zoom="pic3.jpg" zoom="full.jpg">click here</span>
 ```
 
 <br/>
@@ -77,25 +77,25 @@ Activates navigation using arrow keys or the buttons on the top left and top rig
 Displays text, tables, anything that fits into the div "hippo-zoomContent-content" as shown below inside the lightbox.
 
 ```html
- <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
- <script src="hippo-gallery.js"></script>
-
- <div class="hippo-zoomContent" category="examplegroup" caption='"text"'/>
+<link rel="stylesheet" href="hippo-gallery.css" type="text/css">
+<script src="hippo-gallery.js"></script>
 
- <p>Click</p>
- <div>me</div>
- <span>foo</span>
+<div class="hippo-zoomContent" category="examplegroup" caption='"text"'/>
 
- <div class="hippo-zoomContent-content">
- <h1>bar</h1>
- <p>
- Your content goes here, into the div with the class called .hippo-zoomContent-content,
- which is a child of .hippo-zoomContent
- </p>
- </div>
+ <p>Click</p>
+ <div>me</div>
+ <span>foo</span>
 
+ <div class="hippo-zoomContent-content">
+ <h1>bar</h1>
+ <p>
+ Your content goes here, into the div with the class called .hippo-zoomContent-content,
+ which is a child of .hippo-zoomContent
+ </p>
  </div>
 
+</div>
+
 <br/>
 ```
 
@@ -104,8 +104,8 @@ Displays text, tables, anything that fits into the div "hippo-zoomContent-conten
 Creates a clickable div that opens the lightbox and shows an image
 
 ```html
- <link rel="stylesheet" href="hippo-gallery.css" type="text/css">
- <script src="hippo-gallery.js"></script>
- 
- <div category="examplegroup" zoom="full.jpg" caption="Foo Bar"/>this is a div that will open an image</div>
+<link rel="stylesheet" href="hippo-gallery.css" type="text/css">
+<script src="hippo-gallery.js"></script>
+
+<div category="examplegroup" zoom="full.jpg" caption="Foo Bar"/>this is a div that will open an image</div>
 ```