Modal windows became the bane of my life for the past 2 days trying to install different plugins to use modal windows suitable for the modern browser.
I’ve been using Foundation 6 framework to practice using responsive column layouts which has been great. I encourage all of you to try it. Foundation 6 comes with the option to use a modal window which they call reveal, however I’ve had a lot of trouble trying to get this to work. It may be due to my lack of expertise, but seriously, not the easiest to implement and whilst I was looking online for solutions to my problems, a lot of other people were also having issues getting reveal to work so I searched for alternatives.
Currently on my portfolio site – I use lightbox to display my images, however this has become quite old and most people these days prefer to use more lightweight plugins to display their images.
Fancybox – is another such plugin that has been used to display images in a gallery style effect, however from my experience, this is quite heavy on the browser and requires a lot of unnecessary scripts in your html.
Success at last
I came across the JQuery Modal whilst I was tearing my hair out trying to use fancybox. This required quite little scripting and mostly styling in CSS. It provides useful tips in how to implement the modal window with ease. Just download the code from Github and you’re mostly there – a few tweaks here and there and you have yourself a modal window that can help you display text or images. In my case – kitties…
The next challenge is being able to scroll through the images in the gallery smoothly via left and right buttons on desktop, and finger scrolling on mobile and tablet.
The challenge is on….