feat(MediaModal): add navigation between medias
This commit is contained in:
parent
a8bed7c7de
commit
d29d1a0212
3 changed files with 152 additions and 45 deletions
|
|
@ -48,7 +48,11 @@
|
|||
{% if data.gallery|length > 0 %}
|
||||
<div class="media-mosaic mosaic-{{ data.gallery|length }}">
|
||||
{% for media in data.gallery %}
|
||||
<div class="media-container" onclick="openModal('{{ media.location }}', {{ media.isVideo }})">
|
||||
<div
|
||||
class="media-container"
|
||||
data-video="{{ media.isVideo }}"
|
||||
data-location="{{ media.location }}"
|
||||
onclick="openModal({{ loop.index - 1 }})">
|
||||
<div
|
||||
class="media {% if media.isVideo %}media-video-bg{% endif %}"
|
||||
{% if not media.isVideo %}style="background-image: url({{ media.location }})"{% endif %}></div>
|
||||
|
|
@ -65,7 +69,6 @@
|
|||
<div class="media-modal-container" id="media-modal">
|
||||
<div class="media-modal">
|
||||
<div class="media-modal-content" id="media-modal-content">
|
||||
|
||||
</div>
|
||||
<div class="media-close" onclick="closeModal()">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
|
|
@ -73,6 +76,21 @@
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="media-nav-left"
|
||||
class="media-nav-left media-nav">
|
||||
<div class="media-nav-btn">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="media-nav-right"
|
||||
class="media-nav-right media-nav">
|
||||
<div class="media-nav-btn">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -326,7 +344,7 @@
|
|||
</div>
|
||||
<div class="contact-content">
|
||||
<a href="{{ data.contacts.website|e }}">
|
||||
{{ data.contacts.websiteLabel|e }}
|
||||
Site Web
|
||||
<svg class="external-link" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||
<path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
|
||||
</svg>
|
||||
|
|
@ -343,12 +361,7 @@
|
|||
</div>
|
||||
<div class="contact-content">
|
||||
<a href="{{ data.contacts.facebook|e }}">
|
||||
<span class="short">
|
||||
{{ data.contacts.facebookLabel|e }}
|
||||
</span>
|
||||
<span class="long">
|
||||
{{ data.contacts.facebook|e }}
|
||||
</span>
|
||||
Page Facebook
|
||||
<svg class="external-link" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||
<path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
|
||||
</svg>
|
||||
|
|
@ -365,12 +378,7 @@
|
|||
</div>
|
||||
<div class="contact-content">
|
||||
<a href="{{ data.contacts.instagram|e }}">
|
||||
<span class="short">
|
||||
{{ data.contacts.instagramLabel|e }}
|
||||
</span>
|
||||
<span class="long">
|
||||
{{ data.contacts.instagram|e }}
|
||||
</span>
|
||||
Profil Instagram
|
||||
<svg class="external-link" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||
<path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
|
||||
</svg>
|
||||
|
|
@ -387,12 +395,7 @@
|
|||
</div>
|
||||
<div class="contact-content">
|
||||
<a href="{{ data.contacts.twitter|e }}">
|
||||
<span class="short">
|
||||
{{ data.contacts.twitterLabel|e }}
|
||||
</span>
|
||||
<span class="long">
|
||||
{{ data.contacts.twitter|e }}
|
||||
</span>
|
||||
Profil Twitter
|
||||
<svg class="external-link" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
|
||||
<path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>
|
||||
</svg>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue