Styleguide

Image Gallery 

<div class="image-gallery">
    <div class="caption">
        At vero eos et accusam et justo duo dolores et ea rebum.
    </div>
    <div class="gallery-slider-wrapper">

        <div class="gallery-slider">
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1503428593586-e225b39bddfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
            </div>
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="">
            </div>
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1561489396-888724a1543d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
            </div>
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1472691681358-fdf00a4bfcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80" alt="">
            </div>
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
            </div>
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
            </div>

        </div>
        <div class="gallery-thumb-slider">
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1503428593586-e225b39bddfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
            </div>
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="">
            </div>
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1561489396-888724a1543d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
            </div>
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1472691681358-fdf00a4bfcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80" alt="">
            </div>
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
            </div>
            <div class="image-gallery-item">
                <img class="image" src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
            </div>

        </div>
    </div>

    <div class="gallery-overlay ">
        <div class="gallery-overlay-dimmer"></div>
        <div class="gallery-overlay-content">
            <button class="gallery-overlay-close">
                <i class="fal fa-times "></i>
            </button>
            <div class="gallery-overlay-slider">
                <div class="image-gallery-item">
                    <img class="image" src="https://images.unsplash.com/photo-1503428593586-e225b39bddfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
                </div>
                <div class="image-gallery-item">
                    <img class="image" src="https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="">
                </div>
                <div class="image-gallery-item">
                    <img class="image" src="https://images.unsplash.com/photo-1561489396-888724a1543d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
                </div>
                <div class="image-gallery-item">
                    <img class="image" src="https://images.unsplash.com/photo-1472691681358-fdf00a4bfcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80" alt="">
                </div>
                <div class="image-gallery-item">
                    <img class="image" src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="">
                </div>
                <div class="image-gallery-item">
                    <img class="image" src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
                </div>

            </div>
        </div>
    </div>

</div>
 
<div class="image-gallery">
	<div class="caption">
		{{ title }}
	</div>	
    <div class="gallery-slider-wrapper">
		  
	    <div class="gallery-slider">
		  {% for item in items %}
		  	<div class="image-gallery-item">
				<img class="image" src="{{ item }}" alt="">
			</div>
		  {% endfor %}    
	    </div>   
	    <div class="gallery-thumb-slider">
		  {% for item in items %}
		  	<div class="image-gallery-item">
				<img class="image" src="{{ item }}" alt="">
			</div>
		  {% endfor %}    
	    </div>   
    </div>
  

    {% render "@components/02-components/overlay-gallery/overlay-gallery.twig" with {
        items: items_overlay,
        is_open: false
    } %} 
</div>
 
{
  "title": "At vero eos et accusam et justo duo dolores et ea rebum.",
  "items_overlay": [
    "https://images.unsplash.com/photo-1503428593586-e225b39bddfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
    "https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
    "https://images.unsplash.com/photo-1561489396-888724a1543d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
    "https://images.unsplash.com/photo-1472691681358-fdf00a4bfcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80",
    "https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80",
    "https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
  ],
  "items": [
    "https://images.unsplash.com/photo-1503428593586-e225b39bddfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
    "https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
    "https://images.unsplash.com/photo-1561489396-888724a1543d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
    "https://images.unsplash.com/photo-1472691681358-fdf00a4bfcfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80",
    "https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80",
    "https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
  ]
}
  • Content: 
    $('.image-gallery .gallery-slider').slick({
	infinite: false,
	speed: 1000,
	slidesToShow: 1,
	slidesToScroll: 1,
  	variableWidth: false,
	mobileFirst: true,
	dots: false,
	arrows: true,
	swipe: false,
	adaptiveHeight: true,
	asNavFor: '.gallery-overlay-slider',
	prevArrow: '<button class="slider-btn-prev"><i class="fal fa-angle-left"></i></button>',
	nextArrow: '<button class="slider-btn-next"><i class="fal fa-angle-right"></i></button>',
	responsive: [
	    {
	      breakpoint: 768,
	      settings: {
	        slidesToShow: 1,
	        slidesToScroll: 1
	      }
	    },
	    {
	      breakpoint: 1024,
	      settings: {
	        slidesToShow: 1,
	        slidesToScroll: 1
	      }
	    }
	 ]	
});

$('.image-gallery .gallery-thumb-slider').slick({
	infinite: false,
	speed: 1000,
	slidesToShow: 4,
	slidesToScroll: 4,
  	variableWidth: false,
	mobileFirst: true,
	dots: false,
	arrows: true,
	swipe: false,
	prevArrow: '<button class="slider-btn-prev"><i class="fal fa-angle-left"></i></button>',
	nextArrow: '<button class="slider-btn-next"><i class="fal fa-angle-right"></i></button>',
	responsive: [
	    {
	      breakpoint: 768,
	      settings: {
	        slidesToShow: 4,
	        slidesToScroll: 4
	      }
	    },
	    {
	      breakpoint: 1024,
	      settings: {
	        slidesToShow: 4,
	        slidesToScroll: 4
	      }
	    }
	 ]
});

$('.gallery-slider .image-gallery-item').click(function clickHandler() {
    $(this).closest('.image-gallery').find('.gallery-overlay').toggleClass('is-open');
});
$('.gallery-thumb-slider .image-gallery-item').click(function clickHandler(evt) {
	var index = $(this).closest('.slick-slide').attr('data-slick-index');
	$('.gallery-slider').slick('slickGoTo', index);
});
$('.gallery-overlay-dimmer').click(function() {
    $(this).closest('.image-gallery').find('.gallery-overlay').removeClass('is-open');
});
$('.gallery-overlay-close').click(function() {
    $(this).closest('.image-gallery').find('.gallery-overlay').removeClass('is-open');
});
  • URL: /components/raw/image-gallery/image-gallery.js
  • Filesystem Path: components/02-components/image-gallery/image-gallery.js
  • Size: 2 KB
  • Content: 
    .image-gallery {
	.caption {
		@extend .text-medium;
		margin-bottom: 2rem;
	}

	.gallery-slider-wrapper {
		position: relative;
		padding-bottom: 5rem;
		display: flex;
		justify-content: center;
		flex-direction: column;

		.gallery-slider {
			width: 100%;

			.slick-slide {
				padding: 0;
			}

			.slider-btn-prev {
				right: auto;
				left: 1rem;
				background: none;
				color: #fff;
				height: 10rem;
				width: 6rem;
				cursor: pointer;

				svg {
					color: inherit;
					font-size: 10rem;
				}
			}

			.slider-btn-next {
				right: 1rem;
				left: auto;
				background: none;
				color: #fff;
				height: 10rem;
				width: 6rem;
				cursor: pointer;
				svg {
					color: inherit;
					font-size: 10rem;
				}
			}

			.image-gallery-item {
				cursor: pointer;

				img {
					width: 100%;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
				}
			}
		}

		.gallery-thumb-slider {
			max-width: 760px;
			width: 100%;
			padding: 0 6rem;
			margin: 0 auto;
			transform: translateY(-30%);
			display: none;

			@include media-breakpoint-up(lg) {
				display: block;
			}

			.slider-btn-prev {
				right: auto;
				left: 2rem;
				background: none;
			}

			.slick-slide {
				padding: 0 8px;
			}

			.slider-btn-next {
				right: 1rem;
				left: auto;
				background: none;
			}

			.image-gallery-item {
				cursor: pointer;
				width: 15rem;

				img {
					width: 100%;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					border: 1px solid #fff;
				}
			}
		}
	}
}
  • URL: /components/raw/image-gallery/image-gallery.scss
  • Filesystem Path: components/02-components/image-gallery/image-gallery.scss
  • Size: 1.6 KB
  • Handle: @image-gallery
  • Preview:
  • Filesystem Path: components/02-components/image-gallery/image-gallery.twig

There are no notes for this item.