1.0.32 • Published 7 years ago
colby-slideshow v1.0.32
Colby Slideshow
A slideshow class built on React and Slick Carousel, using the WordPress REST API for media.
Usage
Install with NPM:
npm install --save colby-slideshow
Import the Sass file:
// Use path to node_modules in current project.
@import '../../node_modules/colby-slideshow/src/sass/main.scss';
Import it into the JavaScript project, and use ReactDOM to hook it into one or more DOM elements:
import React from 'react';
import { render } from 'react-dom';
import Slideshow from 'colby-slideshow';
window.addEventListener('load', () => {
const slideshows = document.querySelectorAll('.colby-slideshow');
if (!slideshows) {
return;
}
[].forEach.call(slideshows, renderSlideshow);
});
function renderSlideshow(slideshowElement) {
const props = {};
// Convert the element's data attributes to props.
[].forEach.call(slideshowElement.attributes, attribute => {
if (attribute.name.indexOf('data-') === 0) {
props[attribute.name
.replace('data-', '')
.replace(/-/g, '_')] = attribute.value;
}
});
if (!props.ids) {
return;
}
// Requires current site URL, by wp_localize_script or otherwise.
props.url = `${wpData.bloginfoUrl}/wp-json/wp/v2/media?include=${props.ids}`;
render(<Slideshow {...props} />, slideshowElement);
}
In WordPress
One approach is to add a special attribute to a built-in WordPress gallery shortcode, e.g.:
[gallery ids="2789,2790,2791,2792,2793,2794" colby-slideshow="1"]
add_filter( 'post_gallery', function( $output, $atts ) {
if ( ! isset( $atts['colby-slideshow'] ) || ! isset( $atts['ids'] ) ) {
return '';
}
$ids = esc_attr( $atts['ids'] );
return "<div class=colby-slideshow data-ids=\"$ids\"></div>";
}, 10, 2 );
1.0.32
7 years ago
1.0.31
7 years ago
1.0.30
7 years ago
1.0.29
7 years ago
1.0.28
7 years ago
1.0.27
7 years ago
1.0.26
7 years ago
1.0.25
7 years ago
1.0.24
7 years ago
1.0.23
7 years ago
1.0.22
7 years ago
1.0.21
7 years ago
1.0.20
7 years ago
1.0.19
7 years ago
1.0.18
7 years ago
1.0.17
7 years ago
1.0.16
7 years ago
1.0.15
7 years ago
1.0.14
7 years ago
1.0.13
7 years ago
1.0.12
7 years ago
1.0.11
7 years ago
1.0.10
7 years ago
1.0.9
7 years ago
1.0.8
7 years ago
1.0.7
7 years ago
1.0.6
7 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago