Hallo! Mein Name ist Johannes Fischer
zur StartseiteThe Nivoo-Slider is an image gallery running on Mootools, it started as a port of the jQuery Plugin NivoSlider. It currently features 18 different transition effects.
Just include NivooSider.js and the NivooSlider.css to your HTML:
<script type="text/javascript" src="NivooSlider.js"></script>
<link href="NivooSlider.css" rel="stylesheet" type="text/css" media="screen" />
And the gallery structure:
<div id="Slider" class="nivoo-slider">
<img src="images/image1.jpg" alt="" title="insert text to display a caption" />
<a href="#hyperlink">
<img src="images/iamge2.jpg" alt="" title="This image is linked to a great website" />
</a>
<img src="images/image3.jpg" alt="" />
</div>
And then initialize the slider using the domready event:
window.addEvent('domready',function(){
// The simple way
new NivooSlider($('Slider'));
// The more advanced way
new NivooSlider($('Slider'), {
animSpeed: 750,
effect: 'sliceLeftRightDown',
interval: 5000,
orientation: 'horizontal',
slices: 20
}).addEvents({
'onFinish': function(){
// fired after each transition
},
'onStart': function(){
// fired right before each transition
}
});
}
var slider = new NivooSlider(element[, options]);
preloading images, navigation
@Johannes Great! Thank you for this :)
Posted by Thomas, 04/07/2012 10:27pm (11 months ago)
Fixed it! The arrows should be shown when the nivoo-slider element is hovered.
Also using css3 transitions for the fading, instead of an js animation, animating the slices is enough already.
Posted by Johannes, 04/07/2012 7:01pm (11 months ago)
@Thomas Thank you for pointing out this issue. I will fix this within this week.
Posted by Johannes, 04/07/2012 11:13am (11 months ago)
Thanks for this great tool.
With directionNavPosition: 'outside' and directionNavHide: 1, the direction nav only show when you hover the image.
When trying to move on the direction nav, they disapear because the mouse isn't on the image anymore.
Is it possible to show the direction nav when hovering the hidden direction nav?
Posted by Thomas, 03/07/2012 10:06pm (11 months ago)
@Kelsey the image caption is pulled from the tite or longdesc of the image. But you could do the trick with a few lines of Javascript and inject content into the caption with the onFinish it's fired after the animation.
Posted by Johannes, 04/06/2012 8:51pm (12 months ago)
Is there a way to incorporate HTML elements?
I'm using this on a Joomla site, getting it to auto-populate from featured articles, but I'd like a bit of control over the text that gets displayed - separate titles, the first 20 words of the intro text, read more button, that sort of thing.
Mootools is in the core of Joomla, so I'd definitely rather keep using this than add in jquery!
Posted by Kelsey, 29/05/2012 2:25am (12 months ago)
@cyberjuls I just implemented this option, you can use disc (default), decimal (ascending numbers) or any string you like. Will commit the changes in a minute.
Posted by Johannes, 01/03/2012 8:30pm (1 year ago)
do you plan to implement this soon?
controlNavItem: 'decimal|disc|square|html-entity',
I would love the decimal one
Posted by cyberjuls, 01/03/2012 5:01pm (1 year ago)
Nice plugin this is a must.
Check contao if you can make it a module this one will be a killer one ;).
Posted by cyberjuls, 16/12/2011 12:53pm (1 year ago)
mmm nicy!!! Just integrated it to a contao based website. Work like a charm it reads my "catalog reader" images so nicely. really need that nav stuff at the bottom and please if you could just integrate numbers would be cool. You should really go for a contao plugin
Posted by cyberjuls, 13/12/2011 1:50am (1 year ago)
RSS feed for comments on this page | RSS feed for all comments