Changeset 1517


Ignore:
Timestamp:
12/22/10 14:39:14 (2 years ago)
Author:
jeroen
Message:

initial copy of lightbox plugin

Location:
plugins/lightbox/js
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • plugins/lightbox/js/jwplayer.lightbox.js

    r1516 r1517  
    66 
    77 
    8                 var _options = options; 
    9                 var _container = document.getElementById(options.id); 
    10                 var _wrapper = document.createElement('div'); 
     8                var _container; 
     9                var _wrapper; 
    1110                var _sheet; 
    1211                var _preview; 
    … …  
    1413                var _image; 
    1514 
     15                _wrapContainer(); 
     16                _drawSheet(); 
     17                _drawImage(); 
     18                _toggle(); 
    1619 
    17                 _css(_wrapper,{ 
    18                         position: 'relative' 
     20                jwplayer(options.id).onReady(function(playlist) { 
     21                        this.play(); 
    1922                }); 
    20                 _css(_container, { 
    21                         position: 'fixed', 
    22                         zIndex: 999, 
    23                         webkitBoxShadow:'0px 0px 10px #333', 
    24                         MozBoxShadow:'0px 0px 10px #333' 
    25                 }); 
    26                 _wrap(_container,_wrapper); 
    27                 _drawSheet(); 
    28                 jwplayer().onPlaylist(function(playlist) { 
    29                         var image = this.getPlaylistItem(0).image; 
    30                         _css(_container,{ 
    31                                 left: Math.round(document.body.clientWidth/2 - this.getWidth()/2) + 'px', 
    32                                 top: Math.round(document.body.clientHeight/2 - this.getHeight()/2) + 'px' 
    33                         }); 
    34                         if(_preview) { 
    35                                 jwplayer().play(); 
    36                         } else { 
    37                                 _drawImage(image); 
     23 
     24 
     25                function _css(element, styles) { 
     26                        for (var style in styles) { 
     27                                element.style[style] = styles[style]; 
    3828                        } 
    39             document.body.clientHeight 
    40                 }); 
     29                }; 
    4130 
    4231 
    … …  
    4433                        _preview = document.createElement('div'); 
    4534                        _css(_preview,{ 
    46                                 height: _options.height+'px', 
    47                                 width: _options.width+'px', 
     35                                height: options.height+'px', 
     36                                width: options.width+'px', 
    4837                                border: '1px solid #CCC', 
    4938                                padding: '1px' 
    … …  
    5140                        _wrapper.appendChild(_preview); 
    5241                        _image = document.createElement('img'); 
    53                         _image.setAttribute('src',source); 
     42                        _image.setAttribute('src',options.image); 
    5443                        _css(_image,{ 
    55                                 height: _options.height+'px', 
    56                                 width: _options.width+'px', 
     44                                height: options.height+'px', 
     45                                width: options.width+'px', 
    5746                                display: 'block' 
    5847                        }); 
    … …  
    6756                                position: 'absolute', 
    6857                                top: '0px', 
    69                                 width: _options.width+'px', 
    70                                 height: _options.height+'px' 
     58                                width: options.width+'px', 
     59                                height: options.height+'px' 
    7160                        }); 
    7261                        _wrapper.appendChild(_icon); 
    … …  
    7463                                _toggle(); 
    7564                        } 
    76                         _toggle(); 
    7765                }; 
    7866 
    … …  
    8977                                padding: '0px', 
    9078                                backgroundColor: '#000', 
    91                                 opacity: 0.25, 
     79                                opacity: 0, 
    9280                                webkitTransitionProperty: 'opacity', 
    9381                                webkitTransitionDuration: '500ms', 
    … …  
    10694                                _sheet.style.display = 'block'; 
    10795                                _container.style.display = 'block'; 
     96                                _css(_sheet,{opacity:0.5}); 
    10897                        } else { 
    109                                 _sheet.style.display = 'none'; 
    11098                                _container.style.display = 'none'; 
     99                                _css(_sheet,{opacity:0}); 
     100                                setTimeout(_toggleTimeout,1000); 
    111101                        }  
    112102                }; 
    113103 
    114104 
    115                 function _wrap(element, wrapper) { 
    116                         element.parentNode.replaceChild(wrapper,element); 
    117                         wrapper.appendChild(element); 
    118                 }; 
     105                function _toggleTimeout() { 
     106                        _sheet.style.display = 'none'; 
     107                } 
    119108 
    120109 
    121                 function _css(element, styles) { 
    122                         for (var style in styles) { 
    123                                 try { 
    124                                         element.style[style] = styles[style]; 
    125                                 } catch (err) { 
    126                                         alert('applying style '+style+' failed'); 
    127                                 } 
    128                         } 
     110                function _wrapContainer() { 
     111                        _container = document.getElementById(options.id); 
     112                        _wrapper = document.createElement('div'); 
     113                        _css(_wrapper,{ 
     114                                position: 'relative' 
     115                        }); 
     116                        _css(_container, { 
     117                                position: 'fixed', 
     118                                zIndex: 999, 
     119                                webkitBoxShadow:'0px 0px 10px #333', 
     120                                MozBoxShadow:'0px 0px 10px #333', 
     121                                left: Math.round(document.body.clientWidth/2 - _container.clientWidth/2) + 'px', 
     122                                top: Math.round(document.body.clientHeight/2 - _container.clientHeight/2) + 'px' 
     123                        }); 
     124                        _container.parentNode.replaceChild(_wrapper,_container); 
     125                        _wrapper.appendChild(_container); 
    129126                }; 
    130127 

  • plugins/lightbox/js/test/index.html

    r1516 r1517  
    2121    <script type="text/javascript"> 
    2222        jwplayer("container").setup({ 
    23             file: 'http://content.bitsontherun.com/videos/nPripu9l-327.mp4', 
     23            file: 'http://content.bitsontherun.com/videos/nPripu9l-329.mp4', 
    2424            flashplayer: "jwplayer.swf", 
    25             height: 405, 
    26             image:'http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg', 
     25            height: 406, 
     26            image:'http://content.bitsontherun.com/thumbs/nPripu9l-720.jpg', 
    2727            width: 720 
    2828        }); 
    2929        jwplayer.lightbox({ 
     30            height: 135, 
    3031            id: 'container', 
    31             width: 240, 
    32             height: 135 
     32            image:'http://content.bitsontherun.com/thumbs/nPripu9l-320.jpg', 
     33            width: 240 
    3334        }); 
    3435         
Note: See TracChangeset for help on using the changeset viewer.