当前位置:首页 > 插件工具 > jQuery插件 >

一款让你的网页中的图片变换为相册的jQuery插件

时间:2013-11-25 14:05 来源:互联网 作者:源码搜藏

Albumize是一个jQuery插件,可以让你在网页中的相册管理收集的图像。随着albumize,您可以浏览相册,添加封面图片到相册和相册之间进行切换。
      
1)下载并解压缩albumize插件包。
2)添加jQuery库的网页。
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </ SCRIPT>
这个例子使用jQuery库从谷歌的CDN。您也可以添加自己的最新的jQuery库的副本或添加的js文件夹。
3)添加albumize.js从文件的js文件夹。
 <script src="js/albumize.js"> </ SCRIPT>
<div class="albumize" title="Album title"> 
<a href = "large-image-1.jpg" title="image title"> 
<img src="thumbnail-1.jpg"> </img>
</a>
<a href = "large-image-2.jpg" title="image title"> 
<img src="thumbnail-2.jpg" class="albumize-cover"> </img>
</a>
 </div>
      1)添加 类=“albumize”的div保持图像的集合,显示为一个专辑。
2)添加标题=“专辑标题”来的格类=“albumize”添加相册标题。专辑标题是可选的。
3)添加标题=“图片标题”到锚元素以添加图像的标题。图片标题是可选的。
4)添加类=“albumize覆盖”到图像元素锚内,添加相应的缩略图作为封面的专辑。如果有一个以上的图像被赋予类=“albumize覆盖”,那么第一个图像元素与类的albumize盖'将被用于专辑封面。在给出的例子中的标记,第二图像的缩略图将作为专辑封面。专辑封面是可选的。
给定的标记是一个单一的专辑所需要的结构。要添加多个相册,重复相同的结构,其他的收集图像。例如,如果你想显示5张专辑,那么你的HTML将有5 类=“albumize”的div 。
激活


点击图像时 上面的标记自动激活albumize的的插件。但是,如果你想有一个自定义按钮,以显示你的相册列表(如图先前的例子),你应该通过程序触发是这样的:
 / /这里,$是jQuery的别名 $('#秀 - 我 - 相册 - 按钮')。点击(函数(){ $ albumize();
 }); / /替换“#秀 - 我 - 相册 - 按钮”用自己的按钮/元素的id。 
这种方法可以方便,如果你不想在你的网页显示的图像,只是想有一个按钮,以显示您的所有专辑。在这种情况下,你可以隐藏图像,并触发albumize插件与点击一个按钮编程。
Albumize是一个开源项目,免费的个人和商业项目中使用。如果您想报告一个问题或一个问题,请提出一种在GitHub上的问题。
















本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

jQuery插件下载排行

最新文章