SwipeGallery is ideal if you want to quickly deploy a basic, responsive image gallery in your website. This stack has possible uses in many different projects and is definitely a stack you can use time and time again! Many of the features and settings present in the original Viewr stack have been migrated over into SwipeGallery. A lot improvements have been made, including the use of SVG icons in the lightbox to ensure the completed gallery looks professional on retina displays. Images can be sourced locally (by dragging and dropping them into the stack) or you can use warehoused images that are already stored online.

The setup of SwipeGallery involves no use of complicated code, making this a perfect gallery solution for both novice RapidWeaver users and experts alike! Locally sourced thumbnail images of irregular shapes can be automatically cropped square, to create a more consistent grid layout. Additionally, powerful CSS filters and animation effects are available for quick selection in the stack settings, to apply to your thumbnail images. A free demo version can be downloaded using the button above, so you can experiment with SwipeGallery in RapidWeaver and test it with your own images.

If you require a more powerful image gallery stack, the ProGallery stack is a strong contender.

Example

This is a working example of SwipeGallery, published using the default settings. We are using images stored in a folder online, but equally you can use images dragged and dropped directly into the stack.
 

Setup

Using SwipeGallery is simple. Follow these steps to get a SwipeGallery working in your webpage
  1. Once installed into Stacks 3, drag and drop an SwipeGallery stack from your stack elements library into your Stacks page
  2. In edit mode, click the blue '+' button to add images. Each time you add a new image, settings on the right let you choose between a local image or a warehoused (online) image
  3. Drag and drop the images into any order you want
  4. Select the main SwipeGallery stack in edit mode, to access the customisable settings for the thumbnail grid and lightbox. Change any applicable settings you prefer
  5. Preview the page in RapidWeaver. Try previewing the page at different screen sizes and click the thumbnail images to see SwipeGallery in action. Publish when done

SwipeGallery contains a generous array of customisable settings. Hovering your mouse cursor over individual settings will display informational tooltips about what each setting does. Spend some time playing with SwipeGallery and experimenting with the different options available to you. Many users have been genuinely surprised at what SwipeGallery can achieve.

Optimising images

Ideally all images you add to SwipeGallery should be optimised, for improved performance. Images must be in either JPG, GIF or PNG format, saved at exactly 72 dpi. Aim towards keeping each individual image less than 200 kilobytes in size (this will avoid rendering / memory issues on lower-powered, handheld devices like smartphones).

When using locally sourced images, we automatically generate a scaled thumbnail image, from the full-size image. If you are sourcing images from an online (warehouse) location, you can specify separate thumbnail and full-size images of your own. The example posted above is using 400px images for the thumbnails and 1200px full-sized images for the lightbox.

Although there are no limits imposed on the number of images you can add to a SwipeGallery stack, obviously it is wise to play things safe and not go crazy with SwipeGallery stacks containing many hundreds of images! It is far better (from both a performance and usability perspective) to create an index page, and then split your large gallery into categories, spread over several different pages.

Customising SwipeGallery further

We've purposefully engineered the HTML markup in SwipeGallery with plenty of class and ID selector names. If you have knowledge of HTML and CSS markup, then this opens a lot of possibilities to further enhance and embellish the appearance of SwipeGallery. However it should be stressed again that code is not required to get normal SwipeGallery stacks configured and published.

Thumbnail special effects

These special image effects can be selected in the stack settings and use CSS filters and transitions. Special effects will work on most newer web browsers, and will degrade gracefully in older web browsers that do not support them (like Internet Explorer 10 and less). Using CSS instead of Javascript for the effects means that the markup is extremely small and we can take advantage of hardware-acceleration for smoother effects.