<div class="gallery-modal gallery-modal--network" data-modal-is-open="false" data-gallery-modal>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="gallery-modal gallery-modal--{{ siteUnit }}" data-modal-is-open="false" data-gallery-modal>
{% set numberOfMediaItems = component.media | length %}
{% for item in component.media %}
<div class="gallery-modal__slide-container" style="transform: translateX({{ loop.last ? -100 : not loop.first ? 100 : 0 }}vw);" data-modal-item data-carousel-index="{{ loop.index0 }}">
<button class="gallery-modal__slide-button"
aria-label="Close modal"
tabindex="0"
data-modal-slide-button="{{ loop.index0 }}">
{% include 'bits/icons/shrink.twig' %}
</button>
<div class="gallery-modal__slide">
<div
class="gallery-modal__media-container">
{% if item.media_type == 'Image' %}
<div class="gallery-modal__image-container">
{{ imageMacros.createAlwaysFullWidthNoCrop(item.media) }}
</div>
{% else %}
<div class="gallery-modal__video-container">
<div class="gallery-modal__video">
<img class="gallery-modal__video-splash-image" src="{{ item.media.thumbnail_url }}" alt="{{ item.media.caption | escape }}" data-modal-splash-image>
<iframe class="gallery-modal__video-iframe" src="" title="{{ item.media.iframeTitle }}" data-modal-video-src="{{ item.media.src }}" style="display: none;" allow="autoplay"></iframe>
<img class="gallery-modal__video-placeholder" src="{{ item.media.dimensionSizingImage }}" alt="{{ item.media.caption | escape }}">
<button class="gallery-modal__video-play" data-modal-video-play aria-label="play video">
{% include 'bits/icons/play-button/play-button.twig' %}
</button>
</div>
</div>
{% endif %}
</div>
<div class="gallery-modal__caption
gallery-modal__caption--{{ background }}"
data-modal-caption>
{{ item.media.caption | raw }}
</div>
</div>
<div class="gallery-modal__controls-container">
<div class="gallery-modal__controls">
{% if (loop.index - 1) <= 0 %}
{% set previousItemNumber = numberOfMediaItems %}
{% else %}
{% set previousItemNumber = loop.index - 1 %}
{% endif %}
{% if (loop.index + 1) > numberOfMediaItems %}
{% set nextItemNumber = 1 %}
{% else %}
{% set nextItemNumber = loop.index + 1 %}
{% endif %}
<button
tabindex="0"
class="gallery-modal__control-button-previous" type="button" aria-label="Go to previous carousel item, item {{ previousItemNumber }} of {{ numberOfMediaItems }}" data-modal-controls-prev>
{% include "bits/icons/left-chevron.twig" %}
</button>
<button
tabindex="0"
class="gallery-modal__control-button-next" type="button" aria-label="Go to next carousel item, item {{ nextItemNumber }} of {{ numberOfMediaItems }}" data-modal-controls-next>
{% include "bits/icons/right-chevron.twig" %}
</button>
</div>
</div>
</div>
{% endfor %}
</div>
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light",
"component": {
"title": null,
"body": null,
"shortDescription": null
}
}
.gallery-modal
align-items center
background-color rgba(54, 61, 68, 0.75)
display flex
height 100vh
justify-content center
left 0
overflow hidden
position fixed
top 0
width 100%
transition all 200ms ease-in-out
z-index 3
&[data-modal-is-open="false"]
visibility hidden
opacity 0
&[data-modal-is-open="true"]
visibility visible
opacity 1
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive white
--iconBackgroundColorActive illiniOrange
&--dark
--bodyColor grey
--captionColor grey
&--arch
--borderColor industrialBlue
--captionColor greyDarkest
--iconFillColor industrialBlue
--iconFillColorActive white
--iconBackgroundColorActive industrialBlue
&--art
--borderColor archesBlue
--captionColor greyDarkest
--iconFillColor archesBlue
--iconFillColorActive white
--iconBackgroundColorActive archesBlue
&--college
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconBackgroundColorActive illiniOrange
&--dance
--borderColor archesBlue
--captionColor greyDarkest
--iconFillColor archesBlue
--iconFillColorActive white
--iconBackgroundColorActive archesBlue
&--durp
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive white
--iconBackgroundColorActive illiniOrange
&--landarch
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive black
--iconBackgroundColorActive illiniOrange
&--theatre
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconBackgroundColorActive illiniOrange
&--music
--borderColor illiniOrange
--captionColor greyDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconBackgroundColorActive illiniOrange
&__video-play
@extends $video-play
&__caption
@extends $detail
border-top 2px solid var(--borderColor)
color var(--captionColor)
margin-top 24px
padding-top 8px
&__caption
min-height 35px
&__container
position relative
&__slide-container
transition all 200ms ease-in-out
position fixed
background cloud
padding-bottom 38px
width fit-content
z-index 2
&:not(:first-child)
opacity 0
&__media-container
& .captioned-image__caption
display none
& .captioned-image__image
& .captioned-image__gallery-image
& iframe
max-height 70vh
height auto
max-width 85vw
width auto
+below(1000px)
max-width 100vw
& iframe
height 100%
width 100%
max-height 100%
position absolute
top 0
left 0
+below(mediumDeviceBreakpoint)
height 30vh
width 100vw
&__image-container
&__video-container
&__video
height 100%
&__video-splash-image
height 100%
object-fit cover
object-position center
width 100%
position absolute
top 0
left 0
&__video
position relative
+below(1000px)
max-width: 100vw;
&__slide-button
background-color rgba(0, 0, 0, 0.25)
border-radius 50%
cursor pointer
height 48px
position absolute
right 16px
top 16px
width 48px
z-index 1
+below(mediumDeviceBreakpoint)
height 40px
width 40px
right 8px
top 8px
& svg
pointer-events none
+below(mediumDeviceBreakpoint)
height 12px
width 12px
&__caption
margin 24px 160px 0 24px
+below(1000px)
margin 24px 24px 0 24px
padding-bottom 8px
&__controls-container
position absolute
right 24px
bottom 24px
margin-left 0
+below(800px)
bottom 32px
+below(1000px)
position relative
margin-left 24px
bottom 0
right 0
&__control-button-previous
&__control-button-next
@extends $control-button
border solid 2px var(--borderColor)
&:focus
&:hover
background-color var(--iconBackgroundColorActive)
& ._mark
fill var(--iconFillColorActive)
& > svg
& ._mark
fill var(--iconFillColor)
&__control-button-previous
margin-right 12px
&__controls
display flex
pointer-events all
+below(768px)
margin-left auto
margin-right auto
margin-bottom -20px
width fit-content
There are no notes for this item.