FooGallery has two easy and quick ways to get started. There is the Full version which contains all core features and templates and then there is the Lite version which contains only a sub-set of features and templates. The third option which provides the individual components is intended for advanced users who want to pick exactly which features and/or templates they want to include. The selection of files should then be combined and/or minified for production work.
The full compiled and minified CSS and JavaScript.
A sub-set of the full compiled and minified CSS and JavaScript.
Compiled and minified CSS and JavaScript for all components of FooGallery that make up the Full and Lite versions.
FooGallery is downloadable in three forms, within each you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.
Once downloaded, unzip the compressed folder to see the structure of the Full version. You'll see something like this:
foogallery/
├── css/
│ ├── foogallery.css
│ └── foogallery.min.css
├── img/
│ └── All images required by the CSS
└── js/
├── foogallery.js
└── foogallery.min.jsThis is the easiest way to use FooGallery; precompiled files for quick drop-in usage. We provide compiled CSS and JS (foogallery.*), as well as compiled and minified CSS and JS (foogallery.*.min.*).
Once downloaded, unzip the compressed folder to see the structure of the Lite version. You'll see something like this:
foogallery/
├── css/
│ ├── foogallery.css
│ └── foogallery.min.css
├── img/
│ └── All images required by the CSS
└── js/
├── foogallery.js
└── foogallery.min.jsThis is the second easiest way to use FooGallery; precompiled files for quick drop-in usage. We provide compiled CSS and JS (foogallery.*), as well as compiled and minified CSS and JS (foogallery.*.min.*). This version does not support all the features and options the Full version does making it smaller in size.
The difference between this and the Full version is simply the number of features and templates included; For a full list of differences please see the Comparison tab.
Once downloaded, unzip the compressed folder to see the structure of the components version. You'll see something like this:
foogallery/
├── css/
│ ├── foogallery.css
│ ├── foogallery.min.css
│ ├── foogallery.image-viewer.css
│ ├── foogallery.image-viewer.min.css
│ ├── foogallery.justified.css
│ ├── foogallery.justified.min.css
│ ├── foogallery.masonry.css
│ ├── foogallery.masonry.min.css
│ ├── foogallery.portfolio.css
│ ├── foogallery.portfolio.min.css
│ ├── foogallery.responsive.css
│ └── foogallery.responsive.min.css
├── img/
│ └── All images required by the CSS
└── js/
├── foogallery.js
├── foogallery.min.js
├── foogallery.image-viewer.js
├── foogallery.image-viewer.min.js
├── foogallery.justified.js
├── foogallery.justified.min.js
├── foogallery.masonry.js
├── foogallery.masonry.min.js
├── foogallery.portfolio.js
├── foogallery.portfolio.min.js
├── foogallery.responsive.js
└── foogallery.responsive.min.jsThis is the most complicated method of using FooTable, however it provides the ability to tailor the plugin to your needs by leaving out components that you will not use. We provide compiled CSS and JS (footable.*), as well as compiled and minified CSS and JS (footable.*.min.*) of all components that make up FooTable.
When using the individual components FooTable requires footable.core.js and then either the footable.core.bootstrap.css OR footable.core.standalone.css files or there minified equivalents to be included.
When including components such as sorting its JavaScript and CSS files should be included after the core files mentioned above.
All of the features from Lite as well as the following:
Now that you have got the files and included them in your page you need to decide what type of gallery you want to create. FooGallery refers to these types as templates and has a number of them built-in for easy use. The markup required by each of these templates may change so please check its' documentation for more details.
The following shows the markup required to get the default template to initialize providing the core features of FooGallery.
<div id="[id]" class="foogallery">
<!-- repeatable items -->
</div>When supplying an items' markup it must look something like the below. For more information on the actual [values] see the items option.
<div class="fg-item" data-id="[id]">
<figure class="fg-item-inner">
<a class="fg-thumb" href="[href]">
<img class="fg-image" title="[title]" alt="[alt]" width="[width]" height="[height]" data-src="[src]" data-srcset="[srcset]" />
</a>
<figcaption class="fg-caption">
<div class="fg-caption-inner">
<div class="fg-caption-title">[caption]</div>
<div class="fg-caption-desc">[description]</div>
</div>
</figcaption>
</figure>
</div>Performs no layout of items but implements the core features such as item, paging and state management.
Uses the Masonry library to layout it's items.
Performs item layout using a justified algorithm.
Performs item layout using basic responsive CSS.
Performs item layout using a portfolio appearance with always visible captions.
The below lists various examples to help you get started using FooGallery in your projects. Keep in mind FooGallery is designed to be extended and modified to suit your projects needs.