Modal windows…the sheer pain

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…

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….

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s