Chocolat enable you to display one or several images staying on the same page. The choice is left to the user to group together a series of pictures as a link, or let them appear as thumbnails.
The viewer may appears full-page or in the block page.
Chocolat is a Jquery plugin, so he needs the jQuery Library to work. What more, to use it easily, Chocolat’s CSS is created in a separate file.
So we have three files to join to our page:
- the jQuery library (jquery.js)
- the plugin (jquery.chocolat.js)
- the css (chocolat.css)
Between head tags :
Now we have to construct our set.
Create links to your full-sized images. You can put images thumbnails within those links, or leave them empty if you chose displayAsALink : true.
Images’ title are adressed to the title atribute, while the rel attribute, of the first image, correspond to the set title.
Between body tags (example with thumbnails):
Finally, we have to call the javascript script that will enable navigation on the image set.
The call is as follows: $('selector').Chocolat ().
Links are adressed at selector, which can take many values, such as a,. class, # id, ...(Learn more).
Several parameters can be given to chocolat, within the most useful:
container :
Sets whether the viewer will open and fill the whole page (default), or whether it should open in a particular block of the page. (optional)
displayAsALink :
Used to group images into a single link (true) or let the html as it is (to let thumbnails visible for example) (false: default). (optional)
linkImages :
Sets whether we can switch between one image to another without closing the viewer (true: by default), or if the images remain independent.(optional)
overlayOpacity, overlayColor :
Used to set the opacity and the background color. (optional)
linksContainer :
Sets the element containing the link to the series if displayAsALink is true (optional).
Even if the easiest thing is to use the sample page provided in the archive (download), full details of the parameters are in the documentation.
Now your page is ready to be displayed. If you do not understand the subtleties of the installation, try using the sample page provided in the archive.
