Pop up to display a video with datalife engine tags

Question

i need some help with javascript and datalife engine.

I have a youtube video on my posts, that are displayed calling on the .tpl files(template files) the tag

[xfvalue_treyler]

Basicly this fetches the info that is on the field "treyler" on that specific post. In my case, that value is the iframe code to the youtube video.

I have been researching and i found this javascript code for what i want to use.

<script type="text/javascript">
    var self = $(this) //button
    , content = $('.content'); 

    $('element_to_pop_up').bPopup({
        onOpen: function() {
            content.html(self.data('bpopup') || '');
        },
        onClose: function() {
            content.empty();
        }
    });
</script> 

and i call it by using

<div class="element_to_pop_up">[xfvalue_online]</div>

I gave some random css just to define the class "element_to_pop_up", but for some reason this doesn't seem to work. Can you give me a example of this code working on a jsfiddle page please?

Answer 1

Ok, by the looks of things you are having trouble with jQuery.bPopup.js, so here is a basic example which should hopefully point you in the right direction.

HTML:

<button class="trailerbutton" data-trailerid="whatever">Pop Trailer</button>
<div class="hiddenTrailer" id="whatever">
    <iframe width="560" height="315" src="//www.youtube.com/embed/jGGIgcFgnOk?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<div id="my-popup">
    <div class="content"></div>
</div>

JavaScript:

$(function() {
    $('.trailerbutton').click(function(e) {

        e.preventDefault();
        var content = $('.content');
        var trailerid = $(this).data('trailerid');
        var trailerhtml = $('#' + trailerid).html();

        $('#my-popup').bPopup({
            onOpen: function() {
                content.html(trailerhtml || '');
            },
            onClose: function() {
                content.empty();
            }
        });
    });    
});

CSS:

.hiddenTrailer {
    display: none;
}

#my-popup { 
    display:none;    
    background-color: #2B91AF;
    border-radius: 10px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
    color: #FFF;
    cursor: pointer;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
}

In my example, I have chosen to popup trailers via a button with a common class of trailerbutton. This allows me to use common JS code for all trailerbutton click events.

I have also chosen to hide my YouTube iframe inside a div just below the button. Note that this has a class of hiddenTrailer which is hidden via the CSS.

As you can see, I store the ID of the trailer div I want to show for each button in the data-trailerid attribute.

I also have a hidden "popup" placeholder, called my-popup, which again is hidden with CSS.

When the user clicks the button, the JS event is fired, and the correct trailer is loaded into the content div in the ready and waiting popup, based on that all important data attribute.

Here is a JSFiddle. Note that I've had to paste the entire jQuery.bPopup.min.js into the JavaScript window, so scroll down to check out the real content.

EDIT:

Should you wish this to work for multiple posts, you can do something like this:

HTML:

<button class="trailerbutton">Pop Trailer</button>
<div class="hiddenTrailer">
    <iframe width="560" height="315" src="//www.youtube.com/embed/jGGIgcFgnOk?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<button class="trailerbutton">Pop Trailer</button>
<div class="hiddenTrailer">
    <iframe width="560" height="315" src="//www.youtube.com/embed/fZ_JOBCLF-I" frameborder="0" allowfullscreen></iframe>
</div>

<div id="my-popup">
    <div class="content"></div>
</div>

JavaScript:

$(function() {
    $('.trailerbutton').click(function(e) {

        e.preventDefault();
        var content = $('.content');
        var trailerhtml = $(this).next('.hiddenTrailer').html();

        $('#my-popup').bPopup({
            onOpen: function() {
                content.html(trailerhtml || '');
            },
            onClose: function() {
                content.empty();
            }
        });
    });    
});

The updated line here is var trailerhtml = $(this).next('.hiddenTrailer').html(); - I am now using jQuery to select the next hiddenTrailer element (i.e. - the one just under the button you pressed).

See this updated Fiddle.