- Besides displaying Images, it can also display regular HTML content
- Responsive
- Flat Designed
- No Dependencies
- The tags that belong to the same category don't need to be in the same container.
- Releases Support IE9 (master branch might not be tested on IE9)
- Link two files, add an attribute to your tag, done.
http:https://hip70890b.de/web.php#Hippo
You can find the css and js files here: https://github.com/sezanzeb/Hippo/tree/master/src
<link rel="stylesheet" href="hippo-gallery.css" type="text/css">
<script src="hippo-gallery.js"></script>
<img zoom="full.jpg" src="thumbnail.jpg"/>Just take care of setting the href, zoom and src attributes according to your project
the alt tag can be used to display e.g. "click here" instead of a thumbnail
will display "click here" on your website. Clicking it will open an image (when the zoom attribute was set correctly)
<link rel="stylesheet" href="hippo-gallery.css" type="text/css">
<script src="hippo-gallery.js"></script>
<img zoom="full.jpg" alt="click here"/>style it the way you like using the following css:
img[zoom][alt]:not([src])
{
color: #ee3388;
text-decoration: underline;
cursor: pointer;
}Activates navigation using arrow keys or the buttons on the top left and top right of the lightbox
<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"/>
<img category="category2" caption="caption3" zoom="pic3.jpg" alt="click here"/>Displays text, tables, anything that fits into the div "hippo-zoomContent-content" as shown below inside the lightbox.
<link rel="stylesheet" href="hippo-gallery.css" type="text/css">
<script src="hippo-gallery.js"></script>
<div class="hippo-zoomContent" category="examplegroup" caption='"text"'/>
<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/>Creates a clickable div that opens the lightbox and shows an image
<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>