Open fancybox popup with iframe from a function

13,979

Solution 1

If I understood your question correctly this should work for you:

Need to add an ID to the anchor:

<a href="#" id="showVideo">Show video</a>

The jQuery:

$("#showVideo").click(function () {
    var videourl = 'http://localhost/ptchoice-local/welcome/video/2134sdf234532sdfs324234/1';

    $("#video_link").fancybox({
        'type': 'iframe', 
        'width' : 1000,
        'height' : 600,
        'autoDimensions' : false,
        'autoScale' : false,
        'href' : videourl
    });

    $("#video_link").trigger('click');
});

Since the videoid and urlid were hard coded in your example, I did the same here. They can be variables if they need be -- just set them the same way.

Solution 2

You can do it this way.

function openVideo(videoid,urlid) {
    var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;
    $.fancybox.open({
        href: videourl,
        type: 'iframe',
        padding: 0
    });
}
Share:
13,979
Raja
Author by

Raja

Senior Front-End UI Developer with 14+ years of experience in Full-Stack web application development with LAMP Environment, Angular 6+, PHP (V 7.1 &amp; 5.6), Angular 6+, Type Script, SQL (generic SQL, MySQL, Oracle), Perl, Oracle, MongoDB, HTML5, XHTML, CSS, JavaScript (generic JS, jQuery, Ajax, cross-domain Ajax), Bootstrap, REST API, XML and JSON. Also, I have strong knowledge background in project management which includes Requirement gathering and analysis, Estimation, Design, Development, Code review, Testing and coordinating with stakeholders and off-shore team. Passionately work towards enhancing project knowledge of self and the team. Able to perform as an amicable team player as well as individual contributor. Client coordination and working closely with the project team (DEV and QA).

Updated on June 04, 2022

Comments

  • Raja
    Raja almost 2 years

    I have searched enough in the Stackoverflow and i could not able to find a thread to answer my question.

    Below is my scenario,

    function openVideo(videoid,urlid){
            var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;
    
            $("a#video_link").fancybox({
                        'type': 'iframe', 
                'width' : 1000,
                'height' : 600,
                'autoDimensions' : false,
                'autoScale' : false,
                'href' : videourl
            });
    
        $("a#video_link").trigger('click');
        return false;
    } 
    
    <a href="#" onclick="openVideo('2134sdf234532sdfs324234','1')">Show video</a>
    

    So, i would like to set href value when i click the "openVideo" function not in the anchor tag itself.

    Fancybox version: jquery.fancybox-1.3.4.pack.js

    Please suggest on this.