JHU India Component Library

Gallery 

<!-- Gallery -->
<div class="gallery">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
            <div class="gallery_inner">
                <div class="gallery_header">
                    <h2 class="gallery_title">Ipsum Fermentum Tristique</h2>
                    <div class="gallery_description">
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                    </div>
                </div>
                <div class="gallery_body">
                    <div class="js-carousel gallery_items" role="region" aria-label="Ipsum&#x20;Fermentum&#x20;Tristique Gallery" data-carousel-options='{"contained":false,"labels":{"controls":"Ipsum Fermentum Tristique carousel controls","pagination":"Ipsum Fermentum Tristique carousel pagination"}}'>
                        <div class="gallery_item">
                            <figure class="gallery_item_figure" aria-label="Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.">
                                <span class="gallery_item_media">
                                    <span class="lazy_image_wrapper gallery_item_image_wrapper">
                                        <img class="js-lazy js-lazyload gallery_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x169/1" data-src="//images.fastspot.com/johns-hopkins-india-institute/1220x686/1" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/1220x686/1 1220w, //images.fastspot.com/johns-hopkins-india-institute/980x552/1 980w, //images.fastspot.com/johns-hopkins-india-institute/740x416/1 740w, //images.fastspot.com/johns-hopkins-india-institute/500x282/1 500w, //images.fastspot.com/johns-hopkins-india-institute/300x169/1 300w" alt="">
                                    </span>
                                    <noscript>
                                        <img class="gallery_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x169/1" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x169/1 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x282/1 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x416/1 740w, https://images.fastspot.com/johns-hopkins-india-institute/980x552/1 980w, https://images.fastspot.com/johns-hopkins-india-institute/1220x686/1 1220w" sizes="100vw" alt="">
                                    </noscript>
                                </span>
                                <figcaption class="gallery_details">
                                    <span class="gallery_index">
                                        <span class="gallery_index_number">1</span>
                                        <span class="gallery_index_label">of</span>
                                        <span class="gallery_index_number">5</span>
                                    </span>
                                    <p class="gallery_item_caption">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec <a href='#'>ullamcorper nulla non metus auctor fringilla</a>.</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="gallery_item">
                            <figure class="gallery_item_figure" aria-label="Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.">
                                <span class="gallery_item_media">
                                    <span class="lazy_image_wrapper gallery_item_image_wrapper">
                                        <img class="js-lazy js-lazyload gallery_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x169/2" data-src="//images.fastspot.com/johns-hopkins-india-institute/1220x686/2" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/1220x686/2 1220w, //images.fastspot.com/johns-hopkins-india-institute/980x552/2 980w, //images.fastspot.com/johns-hopkins-india-institute/740x416/2 740w, //images.fastspot.com/johns-hopkins-india-institute/500x282/2 500w, //images.fastspot.com/johns-hopkins-india-institute/300x169/2 300w" alt="">
                                    </span>
                                    <noscript>
                                        <img class="gallery_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x169/2" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x169/2 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x282/2 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x416/2 740w, https://images.fastspot.com/johns-hopkins-india-institute/980x552/2 980w, https://images.fastspot.com/johns-hopkins-india-institute/1220x686/2 1220w" sizes="100vw" alt="">
                                    </noscript>
                                </span>
                                <figcaption class="gallery_details">
                                    <span class="gallery_index">
                                        <span class="gallery_index_number">2</span>
                                        <span class="gallery_index_label">of</span>
                                        <span class="gallery_index_number">5</span>
                                    </span>
                                    <p class="gallery_item_caption">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="gallery_item">
                            <figure class="gallery_item_figure" aria-label="Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.">
                                <span class="gallery_item_media">
                                    <span class="lazy_image_wrapper gallery_item_image_wrapper">
                                        <img class="js-lazy js-lazyload gallery_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x169/3" data-src="//images.fastspot.com/johns-hopkins-india-institute/1220x686/3" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/1220x686/3 1220w, //images.fastspot.com/johns-hopkins-india-institute/980x552/3 980w, //images.fastspot.com/johns-hopkins-india-institute/740x416/3 740w, //images.fastspot.com/johns-hopkins-india-institute/500x282/3 500w, //images.fastspot.com/johns-hopkins-india-institute/300x169/3 300w" alt="">
                                    </span>
                                    <noscript>
                                        <img class="gallery_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x169/3" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x169/3 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x282/3 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x416/3 740w, https://images.fastspot.com/johns-hopkins-india-institute/980x552/3 980w, https://images.fastspot.com/johns-hopkins-india-institute/1220x686/3 1220w" sizes="100vw" alt="">
                                    </noscript>
                                </span>
                                <figcaption class="gallery_details">
                                    <span class="gallery_index">
                                        <span class="gallery_index_number">3</span>
                                        <span class="gallery_index_label">of</span>
                                        <span class="gallery_index_number">5</span>
                                    </span>
                                    <p class="gallery_item_caption">Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="gallery_item">
                            <figure class="gallery_item_figure" aria-label="Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.">
                                <span class="gallery_item_media">
                                    <span class="lazy_image_wrapper gallery_item_image_wrapper">
                                        <img class="js-lazy js-lazyload gallery_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x169/4" data-src="//images.fastspot.com/johns-hopkins-india-institute/1220x686/4" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/1220x686/4 1220w, //images.fastspot.com/johns-hopkins-india-institute/980x552/4 980w, //images.fastspot.com/johns-hopkins-india-institute/740x416/4 740w, //images.fastspot.com/johns-hopkins-india-institute/500x282/4 500w, //images.fastspot.com/johns-hopkins-india-institute/300x169/4 300w" alt="">
                                    </span>
                                    <noscript>
                                        <img class="gallery_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x169/4" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x169/4 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x282/4 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x416/4 740w, https://images.fastspot.com/johns-hopkins-india-institute/980x552/4 980w, https://images.fastspot.com/johns-hopkins-india-institute/1220x686/4 1220w" sizes="100vw" alt="">
                                    </noscript>
                                </span>
                                <figcaption class="gallery_details">
                                    <span class="gallery_index">
                                        <span class="gallery_index_number">4</span>
                                        <span class="gallery_index_label">of</span>
                                        <span class="gallery_index_number">5</span>
                                    </span>
                                    <p class="gallery_item_caption">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="gallery_item">
                            <figure class="gallery_item_figure" aria-label="Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.">
                                <span class="gallery_item_media">
                                    <span class="lazy_image_wrapper gallery_item_image_wrapper">
                                        <img class="js-lazy js-lazyload gallery_item_image" data-sizes="auto" src="//images.fastspot.com/johns-hopkins-india-institute/300x169/1" data-src="//images.fastspot.com/johns-hopkins-india-institute/1220x686/1" data-srcset="//images.fastspot.com/johns-hopkins-india-institute/1220x686/1 1220w, //images.fastspot.com/johns-hopkins-india-institute/980x552/1 980w, //images.fastspot.com/johns-hopkins-india-institute/740x416/1 740w, //images.fastspot.com/johns-hopkins-india-institute/500x282/1 500w, //images.fastspot.com/johns-hopkins-india-institute/300x169/1 300w" alt="">
                                    </span>
                                    <noscript>
                                        <img class="gallery_item_image" src="https://images.fastspot.com/johns-hopkins-india-institute/300x169/1" srcset="https://images.fastspot.com/johns-hopkins-india-institute/300x169/1 300w, https://images.fastspot.com/johns-hopkins-india-institute/500x282/1 500w, https://images.fastspot.com/johns-hopkins-india-institute/740x416/1 740w, https://images.fastspot.com/johns-hopkins-india-institute/980x552/1 980w, https://images.fastspot.com/johns-hopkins-india-institute/1220x686/1 1220w" sizes="100vw" alt="">
                                    </noscript>
                                </span>
                                <figcaption class="gallery_details">
                                    <span class="gallery_index">
                                        <span class="gallery_index_number">5</span>
                                        <span class="gallery_index_label">of</span>
                                        <span class="gallery_index_number">5</span>
                                    </span>
                                    <p class="gallery_item_caption">Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Gallery -->
 
{%
	set carousel_options = {
		contained: false
	}
%}

{% if title %}
	{%
		set carousel_options = carousel_options|merge({
			labels: {
				controls: title|replace({"'": "&#39;"}) ~ " carousel controls",
				pagination: title|replace({"'": "&#39;"}) ~ " carousel pagination"
			}
		})
	%}
{% endif %}

{% set carousel_options = carousel_options|json_encode %}

<!-- Gallery -->
<div class="gallery">
	<div class="fs-row">
		<div class="fs-cell {{ cell }}">
			<div class="gallery_inner">
				{% if title or description %}
					<div class="gallery_header">
						{% if title %}
							<h2 class="gallery_title">{{ title }}</h2>
						{% endif %}
						{% if description %}
							<div class="gallery_description">
								<p>{{ description }}</p>
							</div>
						{% endif %}
					</div>
				{% endif %}
				<div class="gallery_body">
					<div class="js-carousel gallery_items" role="region" aria-label="{{ title|e('html_attr') }} Gallery" data-carousel-options='{{ carousel_options }}'>
						{% for item in items %}
							<div class="gallery_item{% if item.caption is empty %} no_caption{% endif %}">
								<figure class="gallery_item_figure" {% if item.caption %} aria-label="{{ item.caption|striptags }}" {% endif %}>
									<span class="gallery_item_media">
										{% include "@partial-image" with {
											class: "gallery_item",
											alt: "",
											image: item.image,
											sources: [
												img.wide.lrg,
												img.wide.med,
												img.wide.sml,
												img.wide.xsml,
												img.wide.xxsml
											]
										} %}
										{% if item.video.service == "youtube" %}
											<iframe class="gallery_item_iframe" width="560" height="315" src="https://www.youtube.com/embed/{{ item.video.id }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"{% if item.video.title %} title="{{ item.video.title }}"{% endif %} allowfullscreen></iframe>
										{% elseif item.video.service == "vimeo" %}
											<iframe class="gallery_item_iframe" src="https://player.vimeo.com/video/{{ item.video.id }}?color=ffffff&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen"{% if item.video.title %} title="{{ item.video.title }}"{% endif %} allowfullscreen></iframe>
											<script src="https://player.vimeo.com/api/player.js"></script>
										{% endif %}
									</span>
									<figcaption class="gallery_details">
										<span class="gallery_index">
											<span class="gallery_index_number">{{ loop.index }}</span>
											<span class="gallery_index_label">of</span>
											<span class="gallery_index_number">{{ loop.length }}</span>
										</span>
										{% if item.caption %}
											<p class="gallery_item_caption">{{ item.caption }}</p>
										{% endif %}
									</figcaption>
								</figure>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Gallery -->

No notes defined.