Skip to content

Commit

Permalink
can now display more complex content than images
Browse files Browse the repository at this point in the history
  • Loading branch information
sezanzeb committed Oct 28, 2017
1 parent 91801c4 commit dae9d10
Show file tree
Hide file tree
Showing 4 changed files with 273 additions and 100 deletions.
36 changes: 31 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

<img src="http:https://vanilla-js.com/assets/button.png">

latest stable: https://github.com/sezanzeb/Hippo/releases/tag/1.0

- Can display text and tags aswell as images
- Responsive
- Flat Designed
- No Dependencies
Expand All @@ -10,7 +13,16 @@
- Link two files, add an attribute to your img tag, done.


# minimal working example
<br/>

## Live Example

http:https://hip70890b.de/web.php#Hippo


<br/>

## Minimal Working Example

You can find the css and js files here: https://github.com/sezanzeb/Hippo/tree/master/src

Expand All @@ -19,8 +31,7 @@ You can find the css and js files here: https://github.com/sezanzeb/Hippo/tree/m

<img zoom="full.jpg" src="thumbnail.jpg"/>


# captions and categories
## Captions and Categories

<link rel="stylesheet" href="hippo-gallery.css" type="text/css">
<script src="hippo-gallery.js"></script>
Expand All @@ -29,7 +40,22 @@ You can find the css and js files here: https://github.com/sezanzeb/Hippo/tree/m
<img category="category2" zoom="pic2.jpg" src="preview2.jpeg" caption="caption2"/>
<img category="category2" caption="caption3" zoom="pic3.jpg" alt="click here"/>

## Dom Elements Instead of Images

<div class="hippo-zoomContent" category="examplegroup" caption='"text"'/>

<p>Click me</p>
<div>foo</div>
<span>bar</span>

<div class="hippo-zoomContent-content">
<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/>

# live example
## TODO

http:https://hip70890b.de/web.php#Hippo
- closing using the esc-key
98 changes: 83 additions & 15 deletions example/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,83 @@
<link rel="stylesheet" href="../src/hippo-gallery.css" type="text/css">
</head>
<body>
<!-- they don't need to be in the same container -->
<div>
<img category="examplegroup" zoom="pic1.jpeg" alt='"pic1 (click)"' caption='"picture 1"'/>
<p><img category="examplegroup" zoom="pic2.jpeg" src="pic2.jpeg" caption='"picture 2"'/></p>
</div>
<p><img category="examplegroup" zoom="pic3.jpeg" src="pic3.jpeg" caption='"picture 3"'/></p>
<!-- they don't need to be in the same container, that's one of the reasons why i wrote this -->
<p><img category="examplegroup" zoom="pic2.jpeg" src="pic2.jpeg" caption='Picture One'/></p>
<p><img category="examplegroup" zoom="pic1.jpeg" alt='"pic1 (click)"' caption='Picture Two'/></p>
<p><img category="examplegroup" zoom="pic3.jpeg" src="pic3.jpeg" caption='Picture Three'/></p>
<p>
<div class="hippo-zoomContent" category="examplegroup" caption='Text'/>
<p>Click me</p>
<div class="hippo-zoomContent-content">
<h1>Hello World</h1>
<p>
Quasi pariatur quis repellendus corrupti delectus. Praesentium corrupti harum et. Consequatur ut tempora laudantium.
</p>
<p>
Fugiat illo quo qui eum ea praesentium. Possimus corrupti temporibus quia. Voluptatem consequatur aut aut. Voluptas
sint ut magni minus aperiam quo. Dicta aut aut sed veritatis ut est ratione. Illum quis et voluptas quod voluptas.
</p>
<p>
Occaecati occaecati doloremque illo deserunt soluta quo. Eum repellendus similique veniam velit non aut. Ut repellat
voluptas earum omnis in. Esse est itaque eos harum tempora quam. Et voluptatibus qui cupiditate. Nihil esse ut delectus et fuga aut.
</p>
<p>
Autem praesentium facere atque debitis exercitationem. Ut est et voluptas molestias modi odio. Minima distinctio
mollitia aut adipisci deleniti labore pariatur in.
</p>
<p>
Ad rerum sunt quae voluptate facilis doloribus. Aut necessitatibus vero voluptatem veritatis. Dolores voluptates
esse ullam sunt quasi nam veniam. Tempora ut rerum voluptate eos quo officia et. Sequi alias libero facere non. Omnis
quo odit illum quia temporibus provident et earum.
</p>
<p>
Quasi pariatur quis repellendus corrupti delectus. Praesentium corrupti harum et. Consequatur ut tempora laudantium.
</p>
<p>
Fugiat illo quo qui eum ea praesentium. Possimus corrupti temporibus quia. Voluptatem consequatur aut aut. Voluptas
sint ut magni minus aperiam quo. Dicta aut aut sed veritatis ut est ratione. Illum quis et voluptas quod voluptas.
</p>
<p>
Occaecati occaecati doloremque illo deserunt soluta quo. Eum repellendus similique veniam velit non aut. Ut repellat
voluptas earum omnis in. Esse est itaque eos harum tempora quam. Et voluptatibus qui cupiditate. Nihil esse ut delectus et fuga aut.
</p>
<p>
Autem praesentium facere atque debitis exercitationem. Ut est et voluptas molestias modi odio. Minima distinctio
mollitia aut adipisci deleniti labore pariatur in.
</p>
<p>
Ad rerum sunt quae voluptate facilis doloribus. Aut necessitatibus vero voluptatem veritatis. Dolores voluptates
esse ullam sunt quasi nam veniam. Tempora ut rerum voluptate eos quo officia et. Sequi alias libero facere non. Omnis
quo odit illum quia temporibus provident et earum.
</p>
<p>
Ad rerum sunt quae voluptate facilis doloribus. Aut necessitatibus vero voluptatem veritatis. Dolores voluptates
esse ullam sunt quasi nam veniam. Tempora ut rerum voluptate eos quo officia et. Sequi alias libero facere non. Omnis
quo odit illum quia temporibus provident et earum.
</p>
<p>
Quasi pariatur quis repellendus corrupti delectus. Praesentium corrupti harum et. Consequatur ut tempora laudantium.
</p>
<p>
Fugiat illo quo qui eum ea praesentium. Possimus corrupti temporibus quia. Voluptatem consequatur aut aut. Voluptas
sint ut magni minus aperiam quo. Dicta aut aut sed veritatis ut est ratione. Illum quis et voluptas quod voluptas.
</p>
<p>
Occaecati occaecati doloremque illo deserunt soluta quo. Eum repellendus similique veniam velit non aut. Ut repellat
voluptas earum omnis in. Esse est itaque eos harum tempora quam. Et voluptatibus qui cupiditate. Nihil esse ut delectus et fuga aut.
</p>
<p>
Autem praesentium facere atque debitis exercitationem. Ut est et voluptas molestias modi odio. Minima distinctio
mollitia aut adipisci deleniti labore pariatur in.
</p>
<p>
Ad rerum sunt quae voluptate facilis doloribus. Aut necessitatibus vero voluptatem veritatis. Dolores voluptates
esse ullam sunt quasi nam veniam. Tempora ut rerum voluptate eos quo officia et. Sequi alias libero facere non. Omnis
quo odit illum quia temporibus provident et earum.
</p>
</div>
</div>
</p>
</body>
</hmtl>

Expand All @@ -23,19 +94,16 @@
color:#333;
}

img[alt][zoom]
{
background: #fff;
padding:30px;
box-sizing:border-box;
text-align: center;
}

img[zoom]
img[zoom], .hippo-zoomContent
{
width:400px;
margin: 0px auto;
display: block;
background: #fff;
box-sizing:border-box;
text-align: center;
line-height:50px;
box-shadow:0px 1px 2px #ddd;
}

#credits
Expand Down
41 changes: 38 additions & 3 deletions src/hippo-gallery.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
.hippo-zoomContent {
cursor:pointer;
}

.hippo-zoomContent-content {
display:none;
}

#hippo-loading {
margin: 0px auto;
vertical-align: middle;
Expand All @@ -14,17 +22,28 @@
transition:opacity 1s ease-in;
}

#hippo-lightbox-bg * {
#hippo-previousOff,
#hippo-previous,
#hippo-nextOff,
#hippo-next,
#hippo-caption,
#hippo-caption-responsive {
font-family: sans-serif;
color:white;
}

#hippo-img-height {
background: RGBa(255,255,255,0.2);
color: white;
}

#hippo-img {
margin: 0px auto;
/*padding-bottom: 4vw;*/
width:100%;
z-index:400;
position:relative;
display:block;
}

#hippo-img-height {
Expand All @@ -49,6 +68,11 @@

max-width: 850px;
width: 850px; /* IE needs a set width, so that this can be centered. This is going to be disabled using responsive rules later */
}

#hippo-caption-responsive,
#hippo-controls,
#hippo-img-container {
background: #182535;
}

Expand Down Expand Up @@ -205,15 +229,26 @@ img[zoom] {
display:none;
}

#hippo-div {
cursor: default;
padding: 2vw;
text-align: left;
}

#hippo-div:empty,
#hippo-img[src=""] {
display: none;
}

@media screen and (max-width:850px) {
#hippo-caption {
display:none;
}

#hippo-caption-responsive {
display:block;
padding-top: 15px;
padding-bottom: 6px;
padding-top: 18px;
padding-bottom: 4px;
}

#hippo-controls {
Expand Down
Loading

0 comments on commit dae9d10

Please sign in to comment.