Par défaut les images sont liées, et le html n'est pas modifié.
On peut donc faire apparaitre des miniatures sous chaque lien.

				$(function() {
					$('#demo a').Chocolat();
				});
		

Par défaut les images sont liées, cette fois le html est modifié:
Le HTML (les liens vers les images) cède la place à un lien par série qui ouvre la visionneuse.(displayAsALink : true)
Ces liens sont crées à l'intérieur de l'ul #linksContainer : (linksContainer : 'linksContainer')
La première série a un fond noir, et des fleches blanches.

				$(function() {
					$('#demoA a').Chocolat({displayAsALink : true,
											linksContainer : 'linksContainer',
											overlayColor:'#000',
											leftImg:'images/leftw.gif',
											rightImg:'images/rightw.gif',
											closeImg:'images/closew.gif'
											});
					$('#demoB a').Chocolat({displayAsALink : true, linksContainer : 'linksContainer'});
				});
		

Comme pour l'exemple 2: les images sont liées et le HTML est modifié.
Le HTML (les liens vers les images) cède la place à un lien par série qui ouvre la visionneuse.(displayAsALink : true)
Aucun container pour ces liens n'est définit, chocolat en créé donc un automatiquement.
La visionneuse s'ouvre à l'intérieur d'un bloc de dimensions connues (relatives ou absolues).(container : $('#visContainer'))
L'opacité du fond est réduite à 0.5.(overlayOpacity:0.5)

				$(function() {
					$('#demoC a').Chocolat({displayAsALink : true, container : $('#visContainer'),overlayOpacity:0.5});
					$('#demoD a').Chocolat({displayAsALink : true, container : $('#visContainer'),overlayOpacity:0.5});
				});
		

Ici les images ne sont pas liées : une fois la visionneuse ouverte, on ne peut pas passer d'une image à l'autre.(linkImages : false)
Pour ce qui est du reste, la configuration reste celle par défaut.

				$(function() {
					$('#demoE a').Chocolat({linkImages : false});
				});