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:

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();

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 });

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
});

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
    });

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
});

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)
    }
});

Documentation

Options

In pseudo-importance order.

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.