Simple horizontal-showcase
(jQuery plugin)

This no-frills horizontal-showcase want to be styled as YOU want (not as I want). So it has only 3-4 CSS rules.

The idea is to work without clown clothes.

Examples

In these examples the HTML markup is really clean:

<div class="showcase" id="example-something">
    <button class="show-back float-left">Back</button>
    <div class="show-window float-left">
        <div class="show-container">
            <div class="show-el">A</div>
            <div class="show-el">B</div>
            <div class="show-el">C</div>
            </div>
        </div>
    <button class="show-forward float-left">Forward</button>
</div>

The float-left is here only as "extra" in e.g. so you can also remove it.

Example 1 - No option

This is the default behavior.

The width is fixed to a default value (as you see). Instead, the height grows to the max height in the elements.

Called using:
$("#example-1").horizontalShowcase();

GNU

«Ghnoo»

The first Free as in Freedom UNIX-like operating system. It was created by Richard Stallman in 1984.

Linux

«Linocs»

The most widely used kernel for UNIX-like operating systems (as GNU). Created by Linus Torvalds in 1991.

GNU/Linux

«Ghnoo plus Linocs»

In the 99.99% of cases, when you're talking about "Linux", you are talking about GNU/Linux.
But nobody give a fu** to this clarification.

But please think about it: Can a penguin contain a gno? Nope. So Debian, Ubuntu, OpenSuse, etc. are GNU/Linux distributions.

Hurd

The Hurd project was started by Richard Stallman in 1990, to develop a microkernel harchitecture. It's a very technically interesting project but its development proceeds very slowly.

Mainly only exists Debian/Hurd as usable GNU/Hurd distribution.

Example 2 -Specified n° of elements

You can set the n° of elements in the single "window". As default, the scroll scrolls as this value (so here two-by-two).

Called using:
$("#example-2").horizontalShowcase({ els: 2 });

Mozilla Firefox

Package: firefox

Chromium

Package: chromium-browser

Iceweasel

A Mozilla Firefox fork. 100% Free as in Freedom.

Package: iceweasel

Epiphany

Package: epiphany

Surf

Package: surf

Example 3 - Interval, delay, ..

You can set an interval. You can also set a step (step: elements to scroll. It can also be float!).

The interval fires only if the user "sleep". This is reeeeeeeeeeeeally friendly.

Called using:
$("#example-3").horizontalShowcase({
    els: 2,
    interval: 3000,
    delay:1000,
    overflowDelay:1000
});

F-Droid

A Free as in Freedom app-repository for Android.

BusTO in F-Droid!

Arrival times for all public transport in Turin

by Valerio Bozzolan & contributors.

MineSweeper in F-Droid!

A JavaScript implementation of what you think.

by Valerio Bozzolan & contributors.

Fennec in F-Droid!

A fork of Mozilla Firefox to be 100% Free as in Freedom.

Acrylic Paint in F-Droid!

Simple painting for Android smartphones.

by Valerio Bozzolan & contributors.

Example 4 - Element's size, step, ..

You can set the width of your elements (it will be the same for every element...). The height is automatically calculated, but you can also set it manually.

In this example I've also set a float step (here ~1/3=0.3333 peridic, plus a little to turn around at the end of the last element, instead of turn around at the end of the unexisting element after the last element). I've added some colors to show how step works.

Called using:
$("#example-4").horizontalShowcase({
    elWidth: 40,
    elHeight: 40,
    step: 0.333334
    });

A
B
C
D
E

Example 5 - Adapting to Custom CSS, custom actions, ..

You can set padding and border directly to your .show-el but you have to explain them via options.

In this example I've used this CSS rule: #example-5 .show-el {border:10px dashed black; padding:30px 40px;}, so if I know CSS, I have to explain that there are 20px (10*2) as horizontal border plus 80px (40*2) as horizontal padding = elInterWidth: 100. Also there are 20px (10*2) as vertical border plus 60px (30*2) as vertical padding = elInterHeight: 80. It's really simple.

I've also used custom links instead of buttons, so I've set preventDefault: true in order to avoid addresses.

Note: it does not matter a f**k how you style your action links/buttons.

Called using:
$("#example-5").horizontalShowcase({
    elInterWidth: 100,
    elInterHeight: 80,
    preventDefault: true
});

A
B
C
D
E

Example 6 - Custom callbacks

E.g. you can disable buttons when animation is running.

Note: in callbacks $(this) will be the action link/button clicked. The first argument will be the showcase element.

Called using:
$("#example-6").horizontalShowcase({
    click: function() {
        $(this).prop("disabled", true)
    },     done: function() {
        $(this).prop("disabled", false)
    }
});

A
B
C
D
E

Documentation

Options

In pseudo-importance order.

Option Type Default Description
els int 1 How many elements to show? As default it is the width of the showcase (elWidth * els).
step float = els How many elements to scrolls each time.
width pixels undefined If specified, is the showcase width. It override els.
elWidth pixels 250 Element width (so without border and padding). It is REALLY important to DON'T consider border and padding.
elHeight pixels automagically calculated Element height (so without border and padding). As default it is pretty good but it can't calculate border and padding.
elInterWidth pixels undefined border-left + padding-left + border-right + padding-right of every element. It is NOT graphically applyed: It's only to follow your CSS!
elInterHeight pixels undefined border-top + padding-top + border-bottom + padding-bottom of every element (this override the above. It is NOT graphically applyed: It's only to follow your CSS!
delay milliseconds 200 For the scroll animation.
overflow boolean true Turn around when the last element is shown.
overflowDelay milliseconds 500 For the scroll animation when it turn around.
interval milliseconds undefined Set a scroll interval.
click callback function(orizhontalShowcase) {} This function is called when clicking on the scroll back / scroll forward action. $(this) is the action (the button or the link) clicked. $(orizhontalShowcase) is the entire showcase.
done callback function(orizhontalShowcase) {} This function is called after a click when the scroll animation finishes. $(this) is the action (the button or the link) clicked. $(orizhontalShowcase) is the entire showcase.
preventDefault boolean false If you use a link instead of a button probably you don't want that the link is really followed. So set this to true.
preventFlood boolean true Prevent the user to scroll during the animation.
windowSelector CSS selector ".show-window" Why you have to change this?
containerSelector CSS selector ".show-container" Why you have to change this?
elSelector CSS selector ".show-el" Why you have to change this?
actionBackSelector CSS selector ".show-back" Why you have to change this?
actionForwardSelector CSS selector ".show-forward" Why you have to change this?

Setting global default options

It's a fu***ng jQuery plugin, so you have to take advantage of the ability to set global parameters. Like this:
$.fn.horizontalShowcase.defaults.els = 2;
$(".lot-of-showcases").horizontalShowcase(); // It has els: 2

It's interesting to see that you can create multiple horizontal showcases at once, simply getting a non-single element from the jQuery selector.

Copyright © 2015 Valerio Bozzolan - Examples under CC-By-Sa. Plugin under GNU Affero General Public License.