Thursday, December 3, 2009

[jQuery] jquery [multi] overlay plugin and identifiers

I'm using the jquery overlay plugin to launch a video using flowplayer.

I want to pass dynamic text to the script so that I only have to use 1 script for all the videos on one page.

I have the following code but am having trouble getting the identifier relative to the current overlay.

Does anyone have any ideas?


<p><a rel="#overlay4" href="#" cta='<p><a href="http://domain.com/">Visit this trial</a></p>'></p> 
 
<div class="overlay" id="overlay4"><div class="player"> 
<a class="fplayer" href="path/to/video.flv"> </a> 
</div></div> 

<script type="text/javascript" language="javascript"
$(function() {         
    $("a[rel]").overlay({ 
        closeOnClick: true,  
        finish:  {  
            top: 30 
           },  
        onBeforeLoad: function() { 
            this.getBackgroundImage().expose({color: '#444'}); 
            cta = $(this); 
            console.log(cta); 
            this.getContent().find("a.fplayer").flowplayer(0).load(); 
        }, 
        onLoad: function(content) {  
             
        },  
        onClose: function() { 
            $.expose.close(); 
            $f().unload();  
        } 
    });   
    flowplayer("a.fplayer","/flowplayer/flowplayer.commercial-3.1.0.swf", {  
                   key: '#@a5e90fa94bbc2d7d51a',  
                clip: {  
                    scaling: 'fit'
                    onCuepoint: [[2000], function() {   
                        //if (this.attr("cta")) { 
                            var myContent = this.getPlugin("myContent");  
                            myContent.show();   
                            myContent.setHtml(cta);   
                        //} 
                    }] 
                },  
                canvas: {  
                    background: '#000000',  
                     backgroundGradient: 'none'
                }, 
                plugins: {  
                     myContent: {  
                     url: '/flowplayer/flowplayer.content-3.1.0.swf',  
                     top: 20,  
                    width: 300,  
                     borderRadius: 10
                    display: 'none' 
                    }  
                } 
    });     
}); 
</script> 
 

My question is, how can I retrieve the attribute "cta" of the current overlay? I know how to do this if it was just using the onclick even in jquey (it would be as simple as $(this) but that doesnt seem to be the case with the overlay script. Returns an "object" as the value of $(this).

Thanks
Brian

No comments:

Post a Comment