EverWeb Codebox

Website Slideshows

Galleria

Sliders come in many variations. A lot of website slideshows use a javascript framework with jQuery being the most popular. This is begining to change with the adoption of HTML5 and the advances in CSS.


The EverWeb default slider is based on Galleria. It is versatile with a large range of options. These options are just the tip of the iceberg and the slider can be further customized by restyling and adding more functions to the setup javascript.

The example shown below uses a custom theme and demonstrates how Galleria handles images with different heights and widths. The Galleria stage is set to a maximum width and height in the javascript setup which can be seen furthe down the page.

The functions in Galleria are contained in a javascript which can be pasted into the Footer Code box in the Page inspector.

Javascript

<script type="text/javascript">

            Galleria.loadTheme('themes/carousel/galleria.carousel.min.js');

            $("#gallery").galleria({

                autoplay: false,

                transition: 'fade',

                thumbnails: true,

                imageCrop: false,

                swipe: true,

                width: 800,

                height: 700,

                showCounter: false,

                transitionSpeed: 1500,

                trueFullscreen: false

            });

        </script>

A complete list of options can be found HERE

The styles for the default theme can be overwritten using internal styles by those who have a basic grounding in CSS.

The slider on this page has two themes which can be switch by making minor changes to three file paths.

There are a number of paid themes for Galleria which can probably be substituted for the default one in EverWeb. See them on THIS PAGE of the developer's site.

Themes