dallasmorningnews / easyslide Goto Github PK

Easyslide is a jQuery plugin for use within the DMN interactives template. It was designed specifically for use with the interactives template, but could be used in other non-templated projects as well. It allows you to quickly build out slideshow components that use responsive image syntax and lazyload images in as you progress through the slideshow.

• Easyslide requires jQuery to work. It was built using the jQuery 2.2.3 library, but should work fine with the last stable 1. version.
• You'll also need the custom slideshow html template. You can get the html you need generated for you by filling out the form on this page. There's also a sample block of code included in the index.html file. But really, use the form. It's easier.
• Install the imagesloaded plugin via npm install imagesloaded --save.
• Be sure to include swipe support. Do this however you want, but the plugin uses Hammer.js. To use within the current interactive build system, npm install Hammer.js in your project by typing npm install hammerjs --save in your terminal.

To use the Easyslide plugin, include the easyslide.js in your js file within your project. For example, in your scripts.js file import easyslide with import './easyslide';.

In addition, create your custom slideshow html by using the form linked above, and place that code wherever you'd like within your html document. If you're using the interactives template, the css and slide buttons for the slideshow are included within the template files. Include the css in your styles.scss via @import 'components/_slideshows'; For those not using the template, the css and button images are included within this repo.

In your scss, be sure to import the styles for slideshow blocks. If using the interactives starterkit, add this to the top of your styles.scss file:

@import 'components/_slideshows';

In your html for your slideshow, generated by the link above, give your slideshow div a unique id. Then, to use Easyslide.js simply call the easyslide function on that id within your scripts.js. For example:

$('#my-slideshow').easyslide();

If you have multiple slideshows, give each slideshow div an id, and repeat:

$('#my-first-slideshow').easyslide();
$('#my-second-slideshow').easyslide();