Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
magnific-gallery.html.twig
magnigic-custom.scss
main.js
readme.md
screenshots.md

readme.md

Scrollable Images with Magnify

This module leverages the jQuery pluging Magnify to display galleries of long images.

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.

Results

Look here for a working example of the solution.

Read the blog post here.

You can’t perform that action at this time.