Frag Stack

Image grid stack explodes into an unlimited image gallery.

Demo

£9.99 Add To Cart

0 Likes

Instant download.
Requires: Stacks v3.5 or greater,
Version : 1.0.5
Released: 31/1/2019
Last Updated : 05/02/2020

Stack Info

Category Link Current Category

Overview

Image grid stack explodes into an unlimited image gallery.

Frag is a gallery stack which allows to display the first x (1-6) images of your gallery in a grid view as you see on the Facebook timeline. Click on a thumbnail and it will display all (unlimited hidden gallery) images in a fullscreen, navigable modal popup just like the gallery light-box.

NEW: Ability to supply a folder of warehoused images, as the source of the gallery.

You can now choose to have Frag look to a folder of images on your server, for the source of the gallery images. The images in the folder need no special naming convention. This means that you may add or remove images from this folder, and the live published Frag stack gallery will update without re-publishing the page from RapidWeaver. (Re-publishing the page will not affect any changes made to the folder of images).

Settings

In this section, we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Gallery Mode

Choose to use the standard drag and drop in gallery images method, or Supply the source images for the gallery from a remote folder on your server.

If you choose to use a remote folder of images, you link to just one image from within your folder of images, and Frag takes care of the rest. The images within the folder on your server do not even require any special naming convention, Frag will find them all anyway.

Thumbnails

You can set the desired number of thumbnail images to display in the page on each screen size (Desktop, Tablet, Mobile). Choose between 1 - 6 thumbnails for each.

Restrict Grid

When selected, you are given options to restrict the total width of the thumbnail grid within it's parent container. You will also have the option to align the restricted grid within the parent container to the left, right, or centre.

Gallery Link

There are options for the text link that can appear on the thumbnail gallery. You may never show it, Always show it, or show it only when the grid is hovered with the mouse. There are further options for the language the text link is displayed.

Color (Lightbox)

Here you can set the colours of the Lightbox overlay, as well as the colour of the Lightbox controls.

Close X

This positions the Lightbox close "x" button to the top left or top right of the screen.

Show Pagination

Pagination are the dots you see in the Lightbox, one for each image in the gallery. You can show or hide the dots with this setting.

Re-Define Breakpoints

As the stack can alter the number of thumbnails that appear in the grid at each device size, here you may redefine the actual screen size (in pixel width) that these changes happen. By default they were set to match the Stacks plugins default settings for device sizes.

Tidy Edit Mode

After adding many images to a Frag gallery, the stack can get pretty large in edit mode. Selecting this option will hide all but the first image in edit mode when you'r done. You can de-select at any time to see all the images in edit mode. This setting does not affect anything in preview or the published page.

Edit Mode

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Simply drop as many images as you like into this area to create your Frag gallery. That's all there is to it!

And in the new optional remote images mode:

You simply link to one of the images in your remote directory, This image will be used for the entire gallery within Rapidweaver. You still get an exacting representation of the gallery in preview mode, it just uses the same image throughout until published. Once published the gallery will of course display all the images from your remote directory.

FAQ

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

No known issues.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Live Demos

Default demo.

There are hidden images / Tidy mode active.

Showing just 3 thumbnails on desktop, 2 on tablet, and 1 on mobile devices.

There are hidden images / Tidy mode active.

Showing the view all text link only on hovering the thumbnail grid (single image), & restricted the maximum with of the grid to 400px (aligned left). No pagination dots in Lightbox!

There are hidden images / Tidy mode active.

Showing that a mixture of image sizes need not affect the thumbnail grid adversely, & restricted to 800px (aligned centre). Lightbox overlay colour, controls colour, and opacity changed.