ImageViewer Examples

• Size and Fading
• Simple Header Bar
• Full Screen

Size and Fading

The size and fade_dur options allow you to specify size and image fading animation duration. In this example default size is 500x375 pixels and defalut fading duration is 1 sec.

$(function() { $('div#viewer').imageviewer('options', {'size':{'w':500, 'h':375}, 'fade_dur':1000}); $('div#viewer').imageviewer('show', path_to_image, '', ''); });

Simple Header Bar

The header, h_height, h_show and h_show_dur options allow you to control a header bar. In this example header bar contains a span element which shows image description.

$(function() { var sHeader = '<span>image_description</span>'; $('div#viewer').imageviewer('options', {'header':sHeader, 'h_height':30, 'h_show':'show', 'h_show_dur':0, 'size':{'w':500, 'h':375}, 'fade_dur':1500}); $('div#viewer').imageviewer('show', path_to_image, '', ''); });

Full Screen

The mode:popup option allow you to show image in a fullscreen mode. In this example header bar contains a "click to close" link which allows you to close fullscreen mode.

$(function() { var sHeader = '<span>image_description</span>...<a href="#" onclick="$('div#viewer').imageviewer('hide'); return false;">click to close</a>'; $('div#viewer').imageviewer('options', {'mode':'popup', 'header':sHeader, 'h_height':30, 'h_show':'show', 'h_show_dur':0, 'size':{'w':600, 'h':450}, 'fade_dur':1500}); $('div#viewer').imageviewer('show', path_to_image, '', ''); });