This module leverages the jQuery pluging Magnify to display galleries of long images by making the image container vertically scroll.

Original Problem

I wanted to display screenshots of recent website projects that the user could easily navigate. I figured a modal window would be the best tool to display these screenshots.

I really like the Magnify jQuery plugin because I can easly scroll through the images by clicking on the image itself, or easily dismiss the modal window by clicking anywhere outside the image. (As someone who has mobility challenges, large clickable areas that trigger my desired actions, rather than specific tiny icons, are very appealing.) But, in my case, I am trying to display long images ( > 2,000px high), and when displaying these images in the Magnigic popup, the image would be squished to the height of the window.

I wanted to find a way to vertically scroll these images from inside the Magnific Popup modal window.

Solution

I produced a modal window that maximizes the width of an image and allows vertical scrolling. Starting with Magnific Popup v1.1.0, I acheived my UI goals with a few extra styles and initializing the widget with a afew custom configuration options.

First, here is the Twig template used to trigger the modal window. This snippet represents one gallery of images, and here is an example data object which would be used by this template


	

		{% for screenshot in page.screenshots %}
			{% set thumbnail = page.media[screenshot.thumbnail] %} 
			{% set caption = screenshot.caption|markdown %}
			{% set full = page.media[screenshot.full] %}
			

				
					
				
			

		{% endfor %}

Next, here is how I am initializing the popup/modal. The type of the popup widget will be image, and I am customizing the HTML template by wrapping the image in a div.scrolling-viewport container.

$(function() {
	console.log('go to bed');
	$('.project-thumbnail').magnificPopup({
		type: 'image',
		mainClass: 'scrolling-image',
		image: {
			markup: '
'+
					'
'+
					'
' +
						'
'+
					'
' +
					'
'+
					'
'+
					'
'+
				'
'+
			'
', // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button

			verticalFit: false,
			titleSrc: function(item) {
				return item.el.attr('data-caption');
			}
		},
		gallery: {
			enabled: true
		}
		
	});

});

Finally, I throw on some custom styles (SASS). Most notably, I give a max-width to an outer content container (.mfp-conten`) and make the .mpf-figure container a flexbox column. The footer (.mfp-bottom-bar) is set to not flex (flex: 0). The last step is to put a max-height and an overflow-y: scroll style on our .scrolling-viewport container.

.mfp-bg {
	z-index: 5000;
}
.mfp-wrap.scrolling-image {
	z-index: 5001;
	.mfp-content {
		max-width: 90%;
		margin: 0 auto;
		
	}
	.mfp-close {
		position: relative;
		right: 0;
		height: auto;
		line-height: 1;
		font-size: 40px;
	}
	.mfp-figure {
		display: flex;
		flex-direction: column;
		&:after {
			background-color: transparent !important;
		}
	}
	.scrolling-viewport {
		max-height: 75vh;
		overflow-y: scroll;
		xmargin: 40px 0;
		img {
			padding: 0;
		}
	}
	.mfp-bottom-bar {
		position: relative;
		background: #FFF;
		padding: 15px;
		display: flex;
		margin-top: 0;
		.mfp-title, .mfp-counter {
			line-height: 1;
			color: $navy;
		}
		.mfp-title {
			padding-right: 15px;
			flex: 1;
		}
		.mfp-counter {
			font-size: 80%;
			position: relative;
			flex: 0;
		}
	}
}

Results

Look here for a working example of the solution.

View full source code.