<div class="text-image">
<div class="row ">
<div class="content col-12 col-sm-6 min-height: 40rem">
<h5>Potenialum</h5>
<span>Content Image can have different widths. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</span>
<a href="#" class="btn btn-primary">Details</a>
</div>
<div class="image col-12 col-sm-6">
<div class="" style="background-image: url(https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80)">
</div>
<button class="text-image-overlay-open"><i class="fas fa-search-plus"></i></button>
</div>
</div>
<div class="text-image-overlay">
<div class="text-image-overlay-dimmer"></div>
<div class="text-image-overlay-content">
<button class="text-image-overlay-close">
<i class="fal fa-times "></i> </button>
<img src="https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
</div>
</div>
</div>
<div class="text-image">
<div class="row {{ direction }}">
<div class="content {{ content_col }} {{ content_custom_styles }}">
{% if cta_title %}
<h5>{{ cta_title }}</h5>
{% endif %}
<span>{{ content }}</span>
{% if cta_link_href %}
<a href="{{ cta_link_href }}" class="btn btn-primary">{{ cta_link_text }}</a>
{% endif %}
</div>
<div class="image {{ image_col }}">
<div class="{% if image_class is not empty %}lazy-bg {{ image_class }} {% endif %}" {% if image_class is empty %} style="background-image: url({{ image_url }})" {% endif %}>
{{ image_rendered }}
{% if cover == false and image_url %}
<img src="{{ image_url }}" alt="">
{% endif %}
</div>
{% if variant == 'video' %}
<div class="text-image-play-area"></div>
<button class="text-image-play">
{% render "@components/01-core/icon/icon.twig" with {
icon_type: 'fal',
icon_id: 'fa-play-circle'
} %}
</button>
{% endif %}
{% if variant == 'zoom' %}
<button class="text-image-overlay-open"><i class="fas fa-search-plus"></i></button>
{% endif %}
</div>
</div>
{% if variant == 'zoom' %}
<div class="text-image-overlay">
<div class="text-image-overlay-dimmer"></div>
<div class="text-image-overlay-content">
<button class="text-image-overlay-close">
{% render "@components/01-core/icon/icon.twig" with {
icon_type: 'fal',
icon_id: 'fa-times'
} %}
</button>
{{ image_highres_url }}
</div>
</div>
{% endif %}
{% if variant == 'video' %}
<div class="video-overlay">
<div class="video-dimmer"></div>
<button class="close-video-btn"><i class="fal fa-times"></i></button>
<div class="video-stage">
<div class="youtube-iframe-placeholder" data-src="{{ video_url }}"></div>
</div>
</div>
{% endif %}
</div>
{
"content": "Content Image can have different widths. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
"direction": "",
"content_custom_styles": "min-height: 40rem",
"content_col": "col-12 col-sm-6",
"image_col": "col-12 col-sm-6",
"image_url": "https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
"image_class": "",
"image_rendered": "",
"cover": true,
"variant": "zoom",
"image_highres_url": "<img src=\"https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80\" alt=\"\">",
"video_url": "https://www.youtube-nocookie.com/embed/R7uVdWENCMA",
"cta_title": "Potenialum",
"cta_link_text": "Details",
"cta_link_href": "#"
}
$('.text-image-overlay-open').click(function() {
$(this).parent().parent().parent().find('.text-image-overlay').toggleClass('is-open');
});
$('.text-image-overlay-dimmer').click(function() {
$(this).parent().removeClass('is-open');
});
$('.text-image-overlay-close').click(function() {
$(this).parent().parent().removeClass('is-open');
});
import $ from "jquery";
$('.text-image .text-image-play-area, .text-image .text-image-play').on('click', function() {
var $iframePlaceholder = $(this).closest('.text-image').find('.youtube-iframe-placeholder');
if ($iframePlaceholder.length) {
var $iframe = $('<iframe class="youtube-iframe" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
$iframe.attr('src', $iframePlaceholder.attr('data-src'));
$iframePlaceholder.replaceWith($iframe);
}
$(this).parent().parent().parent().find('.video-overlay').addClass('is-open');
});
$('.video-dimmer').click(function() {
$(this).parent().removeClass('is-open');
$(this).parent().find('.youtube-iframe').attr('src', $(this).parent().find('.youtube-iframe').attr('src'));
});
$('.close-video-btn').click(function() {
$(this).parent().removeClass('is-open');
$(this).parent().find('.youtube-iframe').attr('src', $(this).parent().find('.youtube-iframe').attr('src'));
});
.text-image {
background: $color-light-grey;
margin-left: -3rem;
margin-right: -3rem;
h5 {
margin-bottom: 1rem;
font-size: 2.2rem;
}
picture {
display: block;
max-height: 500px;
text-align: left;
img {
max-width: 100%;
height: auto;
}
}
.close-video-btn {
background: transparent;
border: none;
position: absolute;
top: 2rem;
right: 2rem;
font-size: 4rem;
outline: none;
opacity: 0.8;
&:hover {
opacity: 1;
}
svg {
color: #fff;
}
}
@include media-breakpoint-up(md) {
margin-left: 0;
margin-right: 0;
}
.reverse {
flex-direction: row-reverse;
}
.content {
padding: 1.5rem 2.6rem;
padding: 3rem 4.5rem;
.btn-primary {
margin-top: 20px;
}
span {
display: block;
}
@include media-breakpoint-up(sm) {
margin-bottom: 0;
padding: 1.5rem 2.6rem;
}
svg {
color: $primary;
}
}
.image {
position: relative;
padding-left: 0;
padding-right: 0;
> div {
height: 100vw;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
@include media-breakpoint-up(sm) {
> div {
height: 100%;
}
}
.text-image-play-area {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: black;
opacity: 0.2;
z-index: 10;
}
.text-image-play {
background: none;
border: none;
color: #fff;
opacity: 0.8;
position: absolute;
left: 50%;
top: 50%;
font-size: 8rem;
margin-left: -4rem;
margin-top: -4rem;
padding: 0;
outline: none;
z-index: 11;
&:hover {
opacity: 1;
}
}
}
.text-image-overlay-open {
position: absolute;
top: 2rem;
right: 2rem;
border: none;
background: none;
font-size: 5rem;
svg {
color: $color-grey;
}
}
.text-image-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease-in-out;
&.is-open {
opacity: 1;
pointer-events: all;
}
.text-image-overlay-dimmer {
background: rgba(#fff, 0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.text-image-overlay-content {
height: 100%;
max-height: 90%;
padding: 4rem 0;
position: relative;
z-index: 3;
color: #fff;
max-width: 90%;
display: flex;
@extend .text-base;
@include media-breakpoint-up(lg) {
padding: 6rem 0;
}
b {
color: $primary;
@extend .text-medium;
font-style: italic;
}
img {
object-fit: contain;
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.text-image-overlay-close {
background: none;
border: none;
color: $primary;
opacity: 0.8;
position: absolute;
right: 0;
top: 0;
font-size: 3.4rem;
outline: none;
z-index: 10;
&:hover {
opacity: 1;
}
}
}
}
.video-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
z-index: -10;
transition: all 0.2s ease-in-out;
&.is-open {
opacity: 1;
pointer-events: all;
z-index: 2000;
}
.video-dimmer {
position: absolute;
height: 100%;
width: 100%;
background: rgba(#000, 0.4);
cursor: pointer;
}
.video-stage {
//width: 80vw;
position: relative;
z-index: 5;
max-width: 90vw;
max-height: 80vh;
iframe {
width: 800px;
height: 450px;
max-width: 100%;
max-height: 100%;
}
}
&.is-open {
}
}
}
There are no notes for this item.