<\/div>'+\n\t\t\t\t\t'

<\/div>'+\n\t\t\t\t'<\/div>'+\n\t\t\t'<\/div>', \/\/ Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button\n\n\t\t\tverticalFit: false,\n\t\t\ttitleSrc: function(item) {\n\t\t\t\treturn item.el.attr('data-caption');\n\t\t\t}\n\t\t},\n\t\tgallery: {\n\t\t\tenabled: true\n\t\t}\n\t\t\n\t});\n\n});<\/pre>\n<\/p>\n

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

.mfp-bg {\n\tz-index: 5000;\n}\n.mfp-wrap.scrolling-image {\n\tz-index: 5001;\n\t.mfp-content {\n\t\tmax-width: 90%;\n\t\tmargin: 0 auto;\n\t\t\n\t}\n\t.mfp-close {\n\t\tposition: relative;\n\t\tright: 0;\n\t\theight: auto;\n\t\tline-height: 1;\n\t\tfont-size: 40px;\n\t}\n\t.mfp-figure {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\t&:after {\n\t\t\tbackground-color: transparent !important;\n\t\t}\n\t}\n\t.scrolling-viewport {\n\t\tmax-height: 75vh;\n\t\toverflow-y: scroll;\n\t\txmargin: 40px 0;\n\t\timg {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\t.mfp-bottom-bar {\n\t\tposition: relative;\n\t\tbackground: #FFF;\n\t\tpadding: 15px;\n\t\tdisplay: flex;\n\t\tmargin-top: 0;\n\t\t.mfp-title, .mfp-counter {\n\t\t\tline-height: 1;\n\t\t\tcolor: $navy;\n\t\t}\n\t\t.mfp-title {\n\t\t\tpadding-right: 15px;\n\t\t\tflex: 1;\n\t\t}\n\t\t.mfp-counter {\n\t\t\tfont-size: 80%;\n\t\t\tposition: relative;\n\t\t\tflex: 0;\n\t\t}\n\t}\n}<\/pre>\n<\/p>\nResults<\/h3>\nLook here for a working example of the solution<\/a>.<\/p>\n
View full source code<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-338","post","type-post","status-publish","format-standard","hentry","category-development"],"_links":{"self":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts\/338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/comments?post=338"}],"version-history":[{"count":0,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/posts\/338\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/media?parent=338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/categories?post=338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jeffwilkerson.net\/wp-json\/wp\/v2\/tags?post=338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Solution<\/h3>\nI 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.<\/p>\n