About showplusx
showplusx illustrates how to make a visually compeling slideshow using plain JavaScript and CSS3.
Features:
- Designed for modern browsers, including Chrome, Edge, Firefox and Safari.
- Fully responsive, scales to arbitrary size.
- Captions, with arbitrary HTML content.
- Performance-optimized, uses browser features (not JavaScript) for animation.
- Appearance customizable with CSS only.
- Simple API and out-of-the-box snippets how to get it working on a webpage.
- 100% CSS and pure JavaScript. No dependencies on third-party JavaScript libraries.
- Small network footprint.
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.
- fade (animate opacity)
- fold left (reveal the image starting at the left)
- fold right (reveal the image starting at the right)
- fold top (reveal the image starting at the top)
- fold bottom (reveal the image starting at the bottom)
- push left (slide in the image from the left)
- push right (slide in the image from the right)
- push top (slide in the image from the top)
- push bottom (slide in the image from the bottom)
- scan left (sliding window from the right to the left)
- scan right (sliding window from the left to the right)
- scan up (sliding window from the bottom to the top)
- scan down (sliding window from the top to the bottom)
- circle (increase aperture diameter focusing at center)
- Ken Burns top left (focus on top left corner first and gradually reveal the whole image)
- Ken Burns top right (focus on top right corner first and gradually reveal the whole image)
- Ken Burns bottom left (focus on bottom left corner first and gradually reveal the whole image)
- Ken Burns bottom right (focus on bottom right corner first and gradually reveal the whole image)
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