Creating mobile friendly themes

Exclusive offer: get 50% off this eBook here
Instant Galleria How-to [Instant]

Instant Galleria How-to [Instant] — Save 50%

Recipes to make you an expert user of the Galleria JavaScript framework with this book and ebook

$9.99    $5.00
by Nathan Van Gheem | March 2013 | Java Web Development

Creating mobile friendly themes will help the gallery switch seamlessly between different devices, landscape and portrait mode, and other device screen sizes. Responsive web design is a very powerful technique to style websites for various screen sizes. It allows you to provide CSS rules that are only applied when certain media queries match. Use this article by Nathan Van Gheem, authors of Instant Galleria How-to to modify settings for Galleria to utilize responsive web techniques.

(For more resources related to this topic, see here.)

Getting ready

Before we start working on the code, we'll need to copy the basic gallery example code from the previous example and rename the folder and files to be pre fixed with mobile. After this is done, our folder and file structure should look like the following screenshot:

How to do it...

  1. We'll start off with our galleria.mobile.js theme JavaScript file:

    (function($) { Galleria.addTheme({ name: 'mobile', author: 'Galleria How-to', css: 'galleria.mobile.css', defaults: { transition: 'fade', swipe: true, responsive: true }, init: function(options) { } }); }(jQuery));

    The only difference here from our basic theme example is that we've enabled the swipe parameter for navigating images and the responsive parameter so we can use different styles for different device sizes.

  2. Then, we'll provide the additional CSS file using media queries to match only smartphones. Add the following rules in the already present code in the galleria. mobile.css file:

    /* for smartphones */ @media only screen and (max-width : 480px){ .galleria-stage, .galleria-thumbnails-container, .galleria-thumbnails-container, .galleria-image-nav, .galleria-info { width: 320px; } #galleria{ height: 300px; } .galleria-stage { max-height: 410px; } }

    Here, we're targeting any device size with a width less than 480 pixels. This should match smartphones in landscape and portrait mode. These styles will override the default styles when the width of the browser is less than 480 pixels.

  3. Then, we wire it up just like the previous theme example. Modify the galleria. mobile-example.html file to include the following code snippet for bootstrapping the gallery:

    <script> $(document).ready(function(){ Galleria.loadTheme('galleria.mobile.js'); Galleria.run('#galleria'); }); </script>

    We should now have a gallery that scales well for smaller device sizes, as shown in the following screenshot:

How to do it...

The responsive option tells Galleria to actively detect screen size changes and to redraw the gallery when they are detected.

Then, our responsive CSS rules style the gallery differently for different device sizes. You can also provide additional rules so the gallery is styled differently when in portrait versus landscape mode. Galleria will detect when the device screen orientation has changed and apply the new styles accordingly.

Media queries

A very good list of media queries that can be used to target different devices for responsive web design is available at http://css-tricks.com/snippets/css/media-queriesfor-standard-devices/.

Testing for mobile

The easiest way to test the mobile theme is to simply resize the browser window to the size of the mobile device. This simulates the mobile device screen size and allows the use of standard web development tools that modern browsers provide.

Integrating with existing sites

In order for this to work effectively with existing websites, the existing styles will also have to play nicely with mobile devices. This means that an existing site, if trying to integrate a mobile gallery, will also need to have its own styles scale correctly to mobile devices. If this is not the case and the mobile devices switch to zoom-like navigation mode for the site, the mobile gallery styles won't ever kick in.

Summary

In this article we have seen how to create mobile friendly themes using responsive web design.

Resources for Article :


Further resources on this subject:


Instant Galleria How-to [Instant] Recipes to make you an expert user of the Galleria JavaScript framework with this book and ebook
Published: February 2013
eBook Price: $9.99
See more
Select your format and quantity:

About the Author :


Nathan Van Gheem

Nathan Van Gheem primarily works on Python web solutions. He also has extensive experience with JavaScript and integrating JavaScript solutions in web applications. He is involved with the Plone Python CMS open source community where he is the UI team leader and he is also a member of the security team.

Books From Packt


 Learning jQuery, Third Edition
Learning jQuery, Third Edition

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

jQuery Mobile Web Development Essentials
jQuery Mobile Web Development Essentials

WordPress Mobile Web Development: Beginner's Guide
WordPress Mobile Web Development: Beginner's Guide

Joomla! Mobile Development Beginner’s Guide
Joomla! Mobile Development Beginner’s Guide

Drupal 7 Themes
Drupal 7 Themes

WordPress Mobile Applications with PhoneGap
WordPress Mobile Applications with PhoneGap

jQuery Mobile First Look
jQuery Mobile First Look


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
T
Z
C
t
X
5
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software