The Simple Image Gallery is the first module I've created. I am publishing it as a way for other Drupal developers to learn some of the basics about module development. This can be used in a production environment, but isn't recommended since it has a few redundant areas.
Upon installation it creates a Content Type with an Image field. It sets the Image Field to 'Hidden' so it doesn't show up on the node. It also sets the field's Image Style and Image Link via code, but since it's hidden, it's rather pointless. It also creates an Image Style of Scale&Crop at 75x75 pixels. Lastly, it creates a Views page to display the content at ?q=image_gallery.
You can upload an unlimited number of images when you Add New Content. When you click on a thumbnail image, it will open a larger version next to it in a display div. It uses simple Javascript to accomplish this. I was going to use AJAX but that was far more complex than it needed to be. The JS hooks into the click() event and grabs the image source from the anchor tag.
This module provides Drupal integration with Zurb's Joyride Jquery plugin in order to provide a tour of different html elements on your Drupal site. Drupal integration is done via the Context module, which provides a way to control conditional calling of the joyride plugin and copy-and-paste method for adding specific tour code.
Context Breakpoint brings CSS media queries to the server.
By using Context and Breakpoints (which will be moved into the core in Drupal 8) you can alter the page based on the visitors screen resolution, browser window size, or aspect ratio.
A new context condition "Breakpoint" is available after install.
Example use cases:
Use a special narrow template for screens smaller than 800px in width.
Add an additional block when the browser window is higher than 600px
.....
Adaping to resolution should mostly be done with CSS (and media queries),
but sometimes you just can not do everything you need to in plain CSS, and more extensive changes - like different markup - are required.
IMPORTANT NOTE:
This module detects screen and browser size with Javascript and sets a cookie accordingly.
This means that Javascript and cookies must be enabled.
Also, after changing the browser size, a reload will obviously be required
for the changes to show up. For this purpose, you can use the auto-reload feature (see below).