Chocolat.js使用方法

Chocolat.js 使您能够显示一个或多个图像在同一页面上。给用户展示一组图片缩略图，可以显示全页或块。Chocolat.js 可以很好地处理所有主要的浏览器。它在下面这些浏览器测试通过：IE7+，火狐，Chrome，Opera 和 Safari 浏览器。

网址: http://chocolat.insipi.de/

使用例子: 

<div id="example1" data-chocolat-title="Set title">
    <a class="chocolat-image" href="img/a.jpg" title="image caption a">
        A <!-- you can display a thumbnail here : <img src="thumb/a.jpg" /> -->
    </a>
    <a class="chocolat-image" href="img/b.jpg" title="image caption b">
        B <!-- you can display a thumbnail here : <img src="thumb/b.jpg" /> -->
    </a>
</div>

$(document).ready(function(){
    $('#example1').Chocolat();
});

参数: 

Parameters

container : default:window Sets whether viewer will open and fill the whole page (default) , or whether it should open in a particular block of the page. For example #container2 in this case the height and width of the block must be defined. values can be : window, selector, jQuery element, or a node

imageSelector : default : '.chocolat-image' Selector to find images in the parent element (on which chocolat is called)

linkImages : default : true Sets whether we can switch from one image to another, within the same call, without closing the viewer (true) , or if the images remain independent (false). Warning: if LinkImage: is false then displayAsALink must be worth false too. Otherwise we can only view the first image in the set.

setTitle : default : '' Title of the set. Can also be defined from the html, with the data-chocolat-title attribute

className : default : '' Add a custom css class to the parent of the lightbox

imageSize : default : 'default' Can be 'default', 'contain', 'native', or 'cover'. default : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's not streched, only displayed at native dimensions 'contain' : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's streched, to fit the window 'cover' : the image cover the window, no white space are displayed. more informations & exemple about contain/cover :https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images 'native' : the image is never streched nor shrinked, always displayed at native dimensions

fullScreen : default : false HTML5 new feature. Hides the browser.

loop : default : false Last image + 1 leads to first image & first image - 1 leads to last image.

duration : default : 300 Animations duration

firstImage : default : 0 Index of the image that you want to start the series.

lastImage : default : 0 Index of the image that you want to end the series.

separator2 : default : '/' Text between the number of the image and the number of images in the set, does not matter.

images : default : [] Array of object representing the set images [{src:'img1.jpg'}, {src:'img1.jpg'}, ...] You can also specify image title [{src:'img1.jpg', title: 'title'}, ..]

setIndex : default : 0 Set index. yes.