jQuery插件2——albumPlayer

本文介绍了一个基于jQuery的相册播放器插件,支持json格式数据,可与后台结合使用数据库。提供了丰富的默认设置和示例代码,展示了如何初始化插件并配置相册数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

很久就想做一个相册播放器,学习了jQuery之后这一梦想得以实现。该播放器的特点是使用json格式的数据,可以与后台程序结合,使用数据库。使用时可以给一个产生相册数据的url或者直接生成数据提供给他,详细的demo即说明见http://suchfish.com/albumPlayer/.

 

Author:jf_dai

The "AlbumPlayer" is a plugin based on jQuery 1.4.2 which was designed to easily add an album function to my personal web site. It also can be add to yours if you like it.

The default settings of this plugin shows bellow:

        $.fn.AlbumPlayer.defaults = {
            'width':'600px',    //plugin width 
            'height':'auto',    //plugin height
            'photoMaxWidth':'600px',    //the div of photo to show 's max width,should be less than or equal to plugin width
            'photoMaxHeight':'480px',   //the div of photo to show 's max height
            'stopTime':5000,    //the time to maintain while showing a photo
            'fadeEffectTime':0  //the photo showed with a fadeIn effect,give it a duration time bigger than 0 to launch the effect
            'albumData':[], //album data, a json format
            'dataUrl':'album.aspx', //if you don't offer the album data then the plugin fetch data from the url you specified. 
            'autoPlayRest':false,   //auto play the rest album when one was completed.
            'enableClick':false,    //enable click on photo to navigate the previous or the next photo
            'playAfterClick':true,  //play the photos or not when the visitor click the album thumbnail
            'autoRun':false //auto play album(s) while the visitor open the this page
        };                
                    

More description should be given to the album data.The album data is a json format, should be an album object or an array of album objects.

The album data format is as bellow:

        var alb = {
            'ID':'album_001',
            'Name':'Beautiful beach',
            'CreatedBy':'John Smith',
            'CoverIndex':0,
            'Photos':[
                {
                    'Src':'images/DSC0201.jpg',
                    'Desc':'a beautiful shell'
                },
                {
                    'Src':'images/DSC0202.jpg',
                    'Desc':'shark comes !!'
                
                },
                ...
            
            ]
            
        }
        var albumData = [alb,alb0,alb1...];
                    

To use this plugin:

$("selector").AlbumPlayer({'albumData':alb || albs,'dataUrl':'getAlbum.aspx?uid=John Smith'});

The following is an example of using the AlbumPlayer plugin:

 

 

 
jf_dai的相册(2):
生命的尽头,落叶归根。
银杏图集(4)
帝企鹅的一家四口
企鹅(5)

 

The example above is using the following code:

    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>    <script src="jquery.picPlayer-0.1.2.js" type="text/javascript"></script>    <script type="text/javascript">        $(document).ready(            function(){                var alb =                 {                    'ID':'a11',                    'Name':'银杏图集',                    'CreatedBy':'jf_dai',                    'CoverIndex':'0',                    'Photos':[                        {                            'Src':'images/a.jpg',                            'Desc':'金色银杏,秋天美丽的风景线'                        },                        {                            'Src':'images/b.jpg',                            'Desc':'银杏绿叶,生意盎然'                        },                        {                            'Src':'images/p3.jpg',                            'Desc':'生命的尽头,落叶归根。'                        },                        {                            'Src':'images/p4.jpg',                            'Desc':'正在孕育着的果实,生命的种子'                        }                    ]                };                var albs = [                {                    'ID':'a11',                    'Name':'银杏图集',                    'CreatedBy':'jf_dai',                    'CoverIndex':'2',                    'Photos':[                        {                            'Src':'images/a.jpg',                            'Desc':'金色银杏,秋天美丽的风景线'                        },                        {                            'Src':'images/b.jpg',                            'Desc':'银杏绿叶,生意盎然'                        },                        {                            'Src':'images/p3.jpg',                            'Desc':'生命的尽头,落叶归根。'                        },                        {                            'Src':'images/p4.jpg',                            'Desc':'正在孕育着的果实,生命的种子'                        }                    ]                },                {                    'ID':'a13',                    'Name':'企鹅',                    'CreatedBy':'jf_dai',                    'CoverIndex':'3',                    'Photos':[                        {                            'Src':'images/c.jpg',                            'Desc':'队列练习,1 2 1,1 2 1。。。'                        },                        {                            'Src':'images/q4.jpg',                            'Desc':'恩爱的企鹅情侣'                        },                        {                            'Src':'images/qq.jpg',                            'Desc':'打伞的企鹅,傻乎乎的,好可爱!'                        },                        {                            'Src':'images/qq3.jpg',                            'Desc':'帝企鹅的一家四口'                        },                        {                            'Src':'images/qw.jpg',                            'Desc':'欢乐的小企鹅在滑冰'                        }                                                                    ]                }            ]            $("#albums").AlbumPlayer({'albumData':albs,'dataUrl':'http://localhost/album/default.aspx?op=getalbum&uid=32339'});                    });    </script>                    

 

Download the file jquery.albumPlayer-0.1.2.min.js(5.78Kb).

Download the albumPlayer.demo.rar(339Kb)file.

 

截图:

albumPlayer截图

 

转载于:https://www.cnblogs.com/jf_dai/archive/2010/07/26/1785539.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值