jQuery Capty 图片标题插件

jQuery Capty是可以为图片添加漂亮的字幕的插件

文件包含：

 

<link type="text/css" rel="stylesheet" href="/capty/css/jquery.capty.css"/>
<script type="text/javascript" src="/capty/js/jquery.js"></script>
<script type="text/javascript" src="/capty/js/jquery.capty.min.js"></script>

调用方法：

 

实例1：图片的alt标签默认被应用于标题内容

 

<img id="default" src="image.jpg" alt="Super Mario Bros.®" width="342" height="262"/> 

 

 

 

 

$('#default').capty();

 

实例2：自定义动画和速度

 

<img id="animation" src="image.jpg" alt="Super Mario Bros.®" width="342" height="262"/>

 

 

 

$('#animation').capty({
  animation: 'fade',
  speed:     400
});

 

实例3：固定标题

 

<img id="fixed" src="image.jpg" alt="Super Mario Bros.®" width="342" height="262"/>

$('#fixed').capty({
  animation: 'fixed'
});

实例4：自定义标题与外部扩展内容

 

 

<img id="content" src="image.jpg" name="#content-target" width="342" height="262"/>

<div id="content-target">
  <span style="color: #F00;">Mario</span> - Super Mario Bros.®<br/>
  <a href="javascript:void(0);">http://www.mariobros.com</a>
</div>

$('#content').capty({
  height:   46,
  opacity:  .6
});

 

实例5：用后缀,前缀和一个自定义的风格应用于一组元素

 

<img src="image-1.jpg" class="fix" width="240" height="161"/>
<img src="image-2.jpg" class="fix" width="240" height="161"/>
<img src="image-3.jpg" class="fix" width="240" height="161"/>

$('.fix').capty({
  cWrapper:  'capty-tile',
  prefix:    '<span style="color: #35BB87">Luigui</span>',
  sufix:     'Super Mario Bros.®'
});

默认设置选项

 

 

animation:    'slide'
The captions animation type: 'slide', 'fade' or 'fixed'.
cCaption:     'capty-caption'
The class name of the wrapper caption.
cImage:       'capty-image'
The class name of the wrapper image.
cWrapper:     'capty-wrapper'
The class name of the wrapper image and caption.
height:       30
The height of the caption.
opacity:      .7
The opacity of the caption.
prefix:       ''
The text/html that will be applied at the beginning of the legend.
speed:        200
The speed in which caption will appear and disappear.
sufix:        ''
The text/html that will be applied at the end of the caption.