https://github.com/sezanzeb/hippo
Image & Content Gallery. Responsive, flat designed, no dependencies
https://github.com/sezanzeb/hippo
javascript lightbox picture-gallery
Last synced: 8 months ago
JSON representation
Image & Content Gallery. Responsive, flat designed, no dependencies
- Host: GitHub
- URL: https://github.com/sezanzeb/hippo
- Owner: sezanzeb
- License: unlicense
- Created: 2017-09-12T21:07:15.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-03-05T18:56:26.000Z (over 4 years ago)
- Last Synced: 2025-01-08T08:45:39.439Z (9 months ago)
- Topics: javascript, lightbox, picture-gallery
- Language: JavaScript
- Homepage:
- Size: 996 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hippo Gallery
- 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.## Live Example
https://sezanzeb.de/web/hippo/
## How To
You can find the css and js files here: https://github.com/sezanzeb/Hippo/tree/master/src
### Minimal Working Example
```html
![]()
```
Just take care of setting the href, zoom and src attributes according to your projectwill display "click here" on your website. Clicking it will open an image (when the zoom attribute was set correctly)
```html
click here
```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;
}
```### Captions and Categories
Activates navigation using arrow keys or the buttons on the top left and top right of the lightbox
```html
![]()
![]()
click here
```### Displaying HTML Content Inside the Lightbox
Displays text, tables, anything that fits into the div "hippo-zoomContent-content" as shown below inside the lightbox.
```html
Click
me
foo
bar
Your content goes here, into the div with the class called .hippo-zoomContent-content,
which is a child of .hippo-zoomContent
```### Click on a Div to Open an Image
Creates a clickable div that opens the lightbox and shows an image
```html
this is a div that will open an image
```