jQuery插件2——albumPlayer

最新推荐文章于 2024-10-29 09:53:19 发布

转载最新推荐文章于 2024-10-29 09:53:19 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jf_dai/archive/2010/07/26/1785539.html

文章标签：

#json #javascript #数据库 #ViewUI

本文介绍了一个基于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>