An open API service indexing awesome lists of open source software.

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

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 project

will 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
```