Commit 6e040fec authored by Eric Bremner's avatar Eric Bremner
Browse files

ISTWCMS-4872: adding basic html and css for image gallery grid

parent 34fc39a2
$size: 6;
#gallery {
display: grid;
grid-gap: 0.5em;
grid-template: repeat($size, 1fr) / repeat($size, 1fr);
height: calc(100vh - 10px);
@media (max-width: 800px) {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: center;
> div {
margin: 1%;
width: 48%;
@media (max-width: 350px) {
width: 98%;
}
}
}
> div {
//Grid Structure
&:nth-child(#{$size}n + 1) {
grid-column: span 2;
grid-row: span 2;
}
&:nth-child(2) {
grid-column: span 3;
grid-row: span 3;
}
&:nth-child(4) {
grid-column: span 1;
grid-row: span 2;
}
> a {
background-color: #000;
color: #000;
font: bold 4em "Helvetica";
height: 100%;
mix-blend-mode: difference;
opacity: 0;
padding: 2rem;
position: absolute;
//text-shadow: 0 -1px 5px #fff, -1px 0px 5px #fff, 0 1px 5px #fff, 1px 0px 5px #fff;
transition: all ease 1s;
width: 100%;
}
> img {
min-height: 100%;
transition: all ease 1s;
width: 100%;
}
&:hover {
img {
filter: blur(4px);
}
a {
opacity: 1;
}
}
}
> div {
box-shadow: 0 2px 8px 0 rgba(#000, 0.2), 0 3px 20px 0 rgba(#000, 0.19);
overflow: hidden;
position: relative;
}
div,
a {
align-items: center;
display: flex;
justify-content: center;
text-decoration: none;
}
}
//
// lightbox
//
[id^="lightbox-"] {
&:target {
opacity:1;
pointer-events:inherit;
img {
filter:blur(0);
}
}
align-items: center;
background-color: rgba($uw-black, 0.5);
display: flex;
height: 100vh;
justify-content: center;
left: 0;
opacity:0;
pointer-events: none;
position: fixed;
top: 0;
transition: opacity 450ms ease-in-out;
width: 100vw;
.content {
color: #fff;
max-width: 90%;
position: relative;
&:hover > .close {
opacity: 1;
transform: scale(1, 1);
}
&:hover > .title {
opacity: 1;
transform: translateY(-3px); //Fix extra line at end
&::after{
opacity:1;
}
}
> * {
transition: all 450ms ease-in-out;
}
}
.title {
bottom: 0;
display: block;
font-size: 1.5em;
margin: 0;
opacity: 0;
padding: 1em;
position: absolute;
transform: translateY(50%);
width: 100%;
&::after {
background-color: rgba($uw-black, 0.4);
bottom: 0;
content: ' ';
height: 100%;
left: 0;
mix-blend-mode: soft-light;
opacity: 0;
position: absolute;
transform-origin: bottom;
transition: all 350ms ease-in-out 250ms;
width: 100%;
}
}
img {
filter: blur(50px);
margin: 0;
max-height: 90vh;
max-width: 100%;
padding: 0;
}
.close {
align-items: center;
background-color: rgba($uw-black, 0.5);
color:#fff;
display: flex;
height: 2em;
justify-content: center;
opacity: 0;
position: absolute;
right: 0;
text-decoration:none;
top: 0;
transform: scale(0, 0);
transform-origin: right top;
width: 2em;
&::after {
content: "X";
}
}
}
{% if type == '' or type == 'slider' %}
{% if type == NULL or type == 'slider' %}
<div id="uw-ig-{{ images.id }}" class="uw-ig" data-id="{{ images.id }}">
<div class="uw-ig__wrapper">
......@@ -31,17 +31,36 @@
</div>
</div>
{% else %}
<div id="gallery">
{% for images in image_gallery.images %}
{% for image in images %}
<a
href="{{ image.image.original }}"
{% if image.caption %}title="{{ image.caption }}"{% endif%}
class="colorbox cboxElement"
data-colorbox-gallery="{{ image_gallery.images.id }}"
data-cbox-img-attrs="&lbrace;&quot;alt&quot;:&quot;{{ image.image.alt }}&quot;&rbrace;"
>
<img src="{{ image.image.thumbnail }}" />
{% for index, image in images %}
<div>
<img src="{{ image.image.thumbnail }}" alt="{{ image.image.alt }}" />
<a href="#lightbox-{{ index }}">
{% if image.caption %}
{{ image.caption }}
{% endif %}
</a>
</div>
{% endfor %}
{% endfor %}
</div>
{% for images in image_gallery.images %}
{% for index, image in images %}
<div class="lightbox" id="lightbox-{{ index }}" />
<div class="content">
<img src="{{ image.image.original }}" alt="{{ image.image.alt }}">
{% if image.caption %}
<div class="title">{{ image.caption }}</div>
{% endif %}
<a class="close" href="#gallery"></a>
</div>
</div>
{% endfor %}
{% endfor %}
{% endif %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment