About showplusx

showplusx illustrates how to make a visually compeling slideshow using plain JavaScript and CSS3.

Features:

Examples

Slideshow with random transition effect

This example shows transition animation effects fade (animates opacity), fold (animates proportion of image visible), push (animates image position), circle (animates lens diameter viewing the image), and Ken Burns (animates pan and zoom), selected randomly.

JavaScript code

new ShowPlusXSlideshow(document.getElementById('sample-slideshow'), {
    items: [
        { src: 'images/gyurgyalag.jpg' },
        { src: 'images/fenyorigo.jpg' },
        { src: 'images/cinke.jpg' }
    ]
});

Slideshow with captions

This example demonstrates how to assign captions to images. Captions can contain arbitrary HTML code, including formatting and links.

JavaScript code

new ShowPlusXSlideshow(document.getElementById('sample-slideshow-captions'), {
    items: [
        { src: 'images/gyurgyalag.jpg', title: 'European bee-eater (Lat. <i>Merops apiaster</i>)<br>Photo © <a href="http://peterfidaniel.hu">Dániel Péterfi</a>' },
        { src: 'images/fenyorigo.jpg', title: 'Fieldfare (Lat. <i>Turdus pilaris</i>)' },
        { src: 'images/cinke.jpg', title: 'Chickadee nestling', caption: 'top' }
    ],
    defaults: { caption: 'bottom' }
});

Slideshow with links

This example demonstrates how to link images to external pages. You can also specify a link target or use _blank to open a new tab or window. The section defaults specifies attributes to use in case some of them are missing for a specific item.

JavaScript code

new ShowPlusXSlideshow(document.getElementById('sample-slideshow-links'), {
    items: [
        { src: 'images/gyurgyalag.jpg', thumb: 'thumbs/gyurgyalag.jpg', href: 'https://en.wikipedia.org/wiki/European_bee-eater' },
        { src: 'images/fenyorigo.jpg', thumb: 'thumbs/fenyorigo.jpg', href: 'https://en.wikipedia.org/wiki/Fieldfare' },
        { src: 'images/cinke.jpg', thumb: 'thumbs/cinke.jpg' }
    ],
    defaults: { href: 'http://peterfidaniel.hu/portfolio/madarak', target: 'showplusx' },
    order: 'random',
    navigation: 'bottom'
});

Experts' corner

Slideshow with specific transition effects

Choose one or more animation effects to be (randomly) applied to image transitions.

JavaScript code

function createSlideshow(effects) {
    return new ShowPlusXSlideshow(document.getElementById('sample-slideshow-effect'), {
        items: [
            { src: 'images/gyurgyalag.jpg' },
            { src: 'images/fenyorigo.jpg' },
            { src: 'images/cinke.jpg' }
        ],
        effects: effects
    });
}

var slideshow = createSlideshow();
var checkboxes = document.querySelectorAll('input[name=slideshow-effect]');
function onCheckboxCheckedChanged(event) {
    slideshow.destroy();

    var effects = [].filter.call(checkboxes, function(el) {
        return el.checked;
    }).map(function(el) {
        return el.value;
    });

    slideshow = createSlideshow(effects);
}
[].forEach.call(checkboxes, function (checkbox) {
    checkbox.addEventListener('change', onCheckboxCheckedChanged);
});

Changing slideshow size dynamically

Set explicit sizes or grab the UI handle in the bottom right corner to see how the slideshow responds.

Size: x px maintain original aspect ratio

Slideshow with right-to-left languages

This example illustrates that the slideshow works in the context of right-to-left languages that are written from the right to the left (like Hebrew and Arabic): the position of the navigation arrows and the order of items on the quick-access navigation bar are reversed.

JavaScript code

new ShowPlusXSlideshow(document.getElementById('sample-slideshow-rtl'), {
    items: [
        { src: 'images/gyurgyalag.jpg' },
        { src: 'images/fenyorigo.jpg' },
        { src: 'images/cinke.jpg' }
    ],
    'navigation': 'top',
    'dir': 'rtl'
});

Download

JavaScript: For production | For development
CSS: For production | For development