PictureSlider allows you to create an unobtrusive and easy-to-control picture preview box, controlled by two arrows on the sides, or by keyboard. Optional caption is displayed in a panel at the bottom of the box.
A div element can be turned into a picture slider by creating an instance of the PictureSlider class, supplying an array of entries describing the image source and an optional caption:
<head> ... <script src="mootools.js"></script> <script src="mootools-more.js"></script> <script src="picture-slider/Source/picture-slider.js"></script> <link rel="stylesheet" type="text/css" href="picture-slider/Source/picture-slider.css" /> </head> ... <div id="picture-slider" style="width: 900px; height: 600px"></div> <script> document.addEvent('domready', function() { var pc = new PictureSlider($('picture-slider'), [ { src: 'image1.jpg', caption: 'Description of image1.', }, { src: 'image2.jpg', caption: 'Description of image2.', }, ]); }); </script>
In addition to images, you can also supply HTML content:
var pc = new PictureSlider($('picture-slider'), [ { content: 'Text to appear inside the frame.', } ]);
The images can be switched by the left and right keyboard arrows, providing the MooTools More Keyboard component is loaded.
The picture slider can be styled by amending or extending the CSS defined in Source/picture-slider.css.
Options can be supplied as the third argument to the constructor. The options available are described in the reference below.
var pc = new PictureSlider($('picture-slider', [ { src: 'image1.jpg', caption: 'Description of image1.', }, { src: 'image2.jpg', caption: 'Description of image2.', }, ], { arrows: 'small', duration: 'long', center: false, controls: { opacity: 0.5, duration: 500, }, caption: { opacity: 0.5, duration: 'long', }, text: { duration: 500, }, });
Animated picture slider.
var ps = new PictureSlider(obj, images[, options])
The duration property can also be one of:
Fired when the slider is switched to another image.
onChange(image)
var pc = new PictureSlide(obj, images); pc.addEvent('change', function(image) { if (image.src) console.log('Switched to the image ' + image.src); });
Switch to the image number n.
pc.switchTo(n);
var pc = new PictureSlider(obj, [ {'src': 'img1.jpg', caption: 'First image.' }, {'src': 'img2.jpg', caption: 'Second image.'}, ]); pc.switchTo(1) // Switch to the second image.
Switch to the image on the left.
pc.left()
Switch to the image on the right.
pc.right()
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus