|
TABLE
MAKE
CUSTOMIZE
EFFECTS
EFFECTS CYCLE
EFFECTS CYCLES
VIRTUAL BOX
PLUG-IN
GLIDER
|
Virtual.Ajax
With Virtual Ajax Boxes you can create virtual modal boxes and load a content from a server into them.
You can choose from four opening modes: open, slide horizontal, slide vertical and fix. window.addEvent('domready', function() { var virtual = new Virtual.Ajax({ enable: { arrows: true, closeButton: true, caption: true }, effect: 'slide', style: true, requestOptions: { onRequest: function() { virtual.wrapreq.set('html', '<p style="text-align:center;"><img src="/images/loading.gif" alt=""></p>'); } }, leftArrowText: '', rightArrowText: '', closeButtonText: '', captionOpacity: 0.6 }).virtualStyle('/examples/1.3.1/virtual_ajax/virtual_style.css'); /* Choose the mode */ var fix = $('fix'); var open = $('open'); var slideV = $('slideV'); var slideH = $('slideH'); fix.addEvent('click', function() { $$(fix, open, slideV, slideH).removeClass('mode_selected'); fix.addClass('mode_selected'); virtual.setEffect('fix'); }); open.addEvent('click', function() { $$(fix, open, slideV, slideH).removeClass('mode_selected'); open.addClass('mode_selected'); virtual.setEffect('open'); }); slideV.addEvent('click', function() { $$(fix, open, slideV, slideH).removeClass('mode_selected'); slideV.addClass('mode_selected'); virtual.setEffect('slide'); }); slideH.addEvent('click', function() { $$(fix, open, slideV, slideH).removeClass('mode_selected'); slideH.addClass('mode_selected'); virtual.setEffect('slide:horizontal'); }); }); |