Pages

Wednesday, December 30, 2015

Making Shadowbox.js gallery plugin mobile friendly

Smaller cellphone screen - LG G Stylo


You want: to go to the Next or Previous image by clicking a larger area instead of the small buttons provided by Shadowbox.

You could modify the shadowbox_en.js code yourself or copy and replace the shadowbox_en.js with the Javascript from the following clip I uploaded to http://pastebin.com/fHHh3NCC.
There is JavaScript at the top and the necessary CSS for the media queries is at the bottom.

In small screens the tiny navigation buttons are hidden.

Simple. save and reload the page.

Thanks to http://www.joomla-css.nl/en/ for some good tips on how to make Joomla navigation menu using Bootstrap.





Larger screen - laptop