Creating a Photo Gallery with Django and jQuery

Ajax, Django, JQuery, Python

As part of the Mobile Theme Generator, I had to create a Photo Gallery in order to display the header images. As stated in previous post, I created the Mobile Theme Generator using Django and jQuery Mobile. Although there are probably plenty of Django-based Photo Gallery apps, I thought that it would be easier to integrate a custom Photo Gallery into a generator, so I decided to build it myself.

Continue reading

Checkout My New Site - T-shirts For Geeks

jQuery Mobile Plugin: gpMobileMenu

Ajax, JQuery, jQuery Mobile, Mobile

While developing the Mobile Theme Generator, I decided to allow the user to display a menu above the content. After the site was launched, I decided to create a plugin with the menu functionality. With the gpMobileMenu plugin, you have the ability to dynamically display menus on your site using jQuery Mobile’s Listview. I also enhanced the functionality so that the menus can be displayed above the content, split-view mode, or within a container.

gpMobileMenu Icon

When a user clicks on the menu icon, the menu will be displayed. The menu icon can be placed anywhere on the page. Although the menu icon uses jQuery Mobile’s data-theme, attribute, it is actually a 15-color sprite.

icon_data_theme option

Use the icon_data_theme option to set the color of the icon menu.

icon_data_theme: ‘c’

The data-themes colors are:
a – black
b – light blue
c – grey
d – white (default)
e – yellow
f – orange
g – red
h – navy blue
i – lime green
j – purple
k – pink
l – brown
m – gold
n – dark green
o – dark grey

icon_position option

Use the icon_position option to place the icon on the left or right.

icon_position: ‘right’

The default position is left. When this option is set, the plugin will add either the ui-btn-right or ui-btn-left class to the menu icon.

Menu Items

The menu items should be contained within a JSON object. Use either the menu_items (static) option or the menu_items_url (dynamic) option to load the menus. Use the menu_items_url to load the menu items ajaxally. The JSON object can contain a few options. The most common:

url: The url of the menu item (when clicked).
label: The display text.

{"url": "", "label": "GrasshopperPebbles"}

In addition, you can set the following options:

isDivider: Use this option if you want the menu item to be a divider (not a link). The plugin will set the menu item with jQuery Mobile’s data-divider-theme attribute so that it can be style separately.

{"isDivider": "true", "label": "My Menu"}

In order to style the data-divider-theme, use the menu_data_divider_theme option. The default for this option is ‘b’.

menu_data_divider_theme: ‘a’

dataAjax: Use this option to set the data-ajax attribute for the menu item. The default is ‘false’.

{"url": "#mycontent", "label": "GrasshopperPebbles", “dataAjax”:true}

callFunc: Use this option if you want to call a Javascript function when user clicks on a menu item (The url option will not be used). To pass parameters to the function use the params option. The parameters will be sent to the Javascript function as an array.

{"callFunc": "bobMarley", "params": [{"param":"song"}, {"param": "jammin"}], "label": "Bob Marley Lyric"}

ajaxCall: Use this option to make an Ajax call when the menu item is clicked. When using this option, you must also supply an ajaxCallSuccess option. This is the Javascript function that should be called when the ajax call is successfully completed.

{"ajaxCall": true, "url": "/assets/js/jquerymobile/gpmobilemenu/get_data.php", "ajaxCallSuccess": "showLyric", "label": "Ajax Call"}

Menu Items Style

To style the menu items, use the menu_data_theme option. This will set jQuery Mobile’s data-theme attribute to the menu items. You can change the style using jQuery Mobile’s Theme Roller. The default value for this option is ‘a’.

menu_data_theme: 'c'

gpMobileMenu Modes

The gpMobileMenu will display menus using 3 separate modes:

Above Content: The menu will display above your content. This is the default option.

		icon_data_theme: 'e',
		menu_items: [{"url": "", "label": "GrasshopperPebbles"}, 
					 {"url": "", "label": "Follow Me"}, 
					 {"url": "", "label": "Facebook"}]

Split View: The menu will display on the left of the content (the content will be pushed to the right, partially off of the screen). With the split-view option, you have the option of displaying the menu using animation by setting the animate_transition option. This option is set to false by default.

		mode: 'split-view',
		icon_position: 'right',
		menu_data_theme: 'c',
		animate_transition: true,
		menu_items: [{"isDivider": "true", "label": "My Menu"}, 
					 {"url": "", "label": "GrasshopperPebbles"}, 
					 {"url": "", "label": "Follow Me"}, 
					 {"url": "", "label": "Facebook"}]

Slide: The menu will slide into down into view. You control where the menu should display. Just create the menu container anywhere in your template and set the menu_cntnr option to the id
of you menu container. You don’t have to style the container because it will get replaced with another container.

		mode: 'slide',
		icon_position: 'right',
		menu_data_theme: 'b',
		menu_data_divider_theme: 'a',
		menu_items_url: '/assets/js/jquerymobile/gpmobilemenu/menu.php'

Additional Menu Style Options

The menu items can be set with additional jQuery Mobile style attributes.

menu_inset: By default, the menu items will set with the data-inset attribute set to ‘true’.
menu_mini: By default, the menu items will be set with the data-mini attribute to set ‘true’.
menu_corners: By default, the menu items will be set with the data-corners attribute set to ‘false’ (no curved corners).

Using gpMobileMenu without jQuery Mobile.

Although the plugin was created to be used with jQuery Mobile, the plugin can be used without it by setting the jquery_mobile option to ‘false’. Without jQuery Mobile’s styling, you will have to style the menus yourself. The following are some basic styling:

#gp-mobile-menu-icon.ui-btn-right {
    margin-top: 6px;
#gp-mobile-menu-items li {
	border-bottom:solid thin white;
#gp-mobile-menu-items li a {

That’s it. The gpMobileMenu can be downloaded from github. Demos can be found on the demos section of my site. Enjoy.

Checkout My New Site - T-shirts For Geeks

Setting Checkbox State with jQuery Mobile

Ajax, Javascript, JQuery, jQuery Mobile, Pebblet

I used jQuery Mobile to create the UI for the Mobile Theme Generator. One of the processes that had to be frequently coded was setting the state of the jQuery Mobile checkbox. Because of the many classes associated with displaying a mobile checkbox, the code was more involved that I first anticipated.

To set checkbox state to ‘on’:

var c = $('#mycheckbox');
$(c).attr({'checked': true, 'data-icon': 'checkbox-on'}).siblings('label').removeClass('ui-checkbox-off').addClass('ui-checkbox-on');
c = $(c).siblings('label').children('span').children('span')[1];

I first set the “checked” attribute to true and also set the “data-icon” attribute to ‘checkbox-on’.
I changed the class for the checkbox label from ‘ui-checkbox-off’ to ‘ui-checkbox-on’.
I then get the sibling label for the checkbox so that I can get the second ‘grand-child’ of the label. I change the class of the span from ‘ui-icon-checkbox-off’ to ‘ui-icon-checkbox-on’.

<div class="ui-checkbox">
    <label for="mycheckbox" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="a" data-mini="true" class="ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-checkbox-off ui-btn-up-a">
        <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text">Menu Items Mini:</span>
            <span class="ui-icon ui-icon-shadow ui-icon-checkbox-off">&nbsp;</span>
    <input type="checkbox" name="mycheckbox" id="mycheckbox" data-mini="true">

That’s it. Of course, to turn it back off, I just to change to classes back (and removed the ‘checked’ attribute).

Checkout My New Site - T-shirts For Geeks

Mobile Theme Generator for WordPress and Tumblr

Ajax, Django, Javascript, JQuery, Mobile

A few months ago, I downloaded a mobile theme for WordPress in order to create a mobile site for GrasshopperPebbles. While updating the template, I thought about automating the development process so that future releases would be easier. So I decided to create an open source project – the mobile theme generator. The generator displays mobile sites using jQuery Mobile. In fact, the generator itself was developed using Django and jQuery Mobile (the original theme used jQuery Mobile). I did think that it an odd solution to create PHP files using Python, but it turned out to be a great solution.

Continue reading

Checkout My New Site - T-shirts For Geeks