|
TABLE
MAKE
CUSTOMIZE
EFFECTS
EFFECTS CYCLE
EFFECTS CYCLES
VIRTUAL BOX
PLUG-IN
GLIDER
|
Glider Reader
This example is called Glider Reader. You can choose the sliding mode from
fix (which changes the slides immediately) and scroll
(which changes the slides with a scroll transition).
In addiction you can enter into the full-screen mode with your own overlay. window.addEvent('domready', function() { var glid = new Glider('imgs', { enable: { resizeHeight: false, thumbnails: false, arrows: true, arrowsLimits: true, autostart: false, captions: true, arrowsKeyboard: true, fullscreen: true, toFullScreenButton: true }, steps: 3000, mode: 'fix', captions: ['1/' + this.fullLength], captionWrapper: 'captions', captionHeightEffect: false, captionFadeEffect: false, scrollOptions: { duration: 1000 }, morphOptions: { transition: 'bounce:out' }, fadeOptions: { link: 'ignore', duration: 1400 }, thumbTexts: [ 'image 0' ], toNormalButtonClass: 'backToNormal', toNormalButtonText: '', toNormalButtonType: 'li', toFullScreenButtonClass: 'toFull', toFullScreenButtonText: '', toFullScreenButtonType: 'li', onNext: function(slide, length) { this.caption.set('html', slide+1 + '/' + length); }, onPrev: function(slide, length) { this.caption.set('html', slide+1 + '/' + length); }, onGoTo: function(slide, length) { this.caption.set('html', slide+1 + '/' + length); }, onFirst: function(slide, length) { this.caption.set('html', slide+1 + '/' + length); }, onLast: function(slide, length) { this.caption.set('html', slide+1 + '/' + length); }, onFullScreen: function(slide, length) { this.caption.set('html', slide+1 + '/' + length); }, onNormalScreen: function(slide, length) { this.caption.set('html', slide+1 + '/' + length); }, initialize: function() { this.caption.set('html', '1/' + this.fullLength); } }); if(Browser.Engine.trident) { $$('ul#imgs li').setStyle('margin-bottom', '-3px'); } /* Choose the mode */ var gfix = $('gfix'); var gscroll = $('gscroll'); gfix.addEvent('click', function() { $$(gfix, gscroll).removeClass('mode_selected'); gfix.addClass('mode_selected'); glid.setMode('fix'); }); gscroll.addEvent('click', function() { $$(gfix, gscroll).removeClass('mode_selected'); gscroll.addClass('mode_selected'); glid.setMode('scroll'); }); }); |