jQuery Capty 图片标题插件

时间:2022-09-27 20:48:30

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="data:image.jpg" alt="Super Mario Bros.®" width="342" height="262"/> 
$('#default').capty();

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

<img id="animation" src="data:image.jpg" alt="Super Mario Bros.®" width="342" height="262"/>
$('#animation').capty({
animation: 'fade',
speed: 400
});

实例3:固定标题

<img id="fixed" src="data:image.jpg" alt="Super Mario Bros.®" width="342" height="262"/>
$('#fixed').capty({
animation: 'fixed'
});

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

<img id="content" src="data: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="data:image-1.jpg" class="fix" width="240" height="161"/>
<img src="data:image-2.jpg" class="fix" width="240" height="161"/>
<img src="data: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.