[SalesForce] fancyBox jQuery for video pop up not working

I have written code so that i can embed videos in a visualforce page. However, I want the video to pop up in an aesthetic way. For that I am using fancyBox, which is not working. The details regarding fancyBox can be found here[ http://fancyapps.com/fancybox/ ]. I have uploaded the zip file as a static resource and renamed it as "fancybox". I am getting no errors in the developer console.

Here is the code:

<apex:page standardController="Training__c" sidebar="false" tabStyle="Training__c">

    <apex:includeScript value="http://code.jquery.com/jquery-latest.min.js" />
    <apex:includeScript value="{!URLFOR($Resource.fancybox, '/source/jquery.fancybox.pack.js?v=2.1.5')}" />
    <apex:stylesheet value="{!URLFOR($Resource.fancybox,'/source/jquery.fancybox.css?v=2.1.5')}" />      
<script type="text/javascript">
var j$ = jQuery.noConflict();    
        $j(document).ready(function() {
            $j(".fancybox").fancybox();
        });
    </script>


    <apex:pageBlock title="New User Training Module">
    <apex:pageBlockSection title="Videos" >
     <apex:iframe width="400" height="300" src="https://www.youtube.com/embed/SGPvYQ1o2x4" rendered="true" frameborder="true"/>
     <a class="fancybox" rel="group" href="https://www.youtube.com/watch?v=y3ZUwPVnDWs">Link</a>
    </apex:pageBlockSection>  
    </apex:pageBlock>
    <apex:pageBlock title="Advanced User Training Module">
    <apex:pageBlockSection title="Videos" >
     Welcome!
    </apex:pageBlockSection>  
    </apex:pageBlock>


</apex:page>

Best Answer

enter image description hereThere were some errors in the code.

  • You were loading http in https (Security issue in browser)
  • some typos (like j$ vs $j)
  • Add "fancybox.iframe" class to the link to make it an iframe

I think this should do it for you.

<apex:includeScript value="https://code.jquery.com/jquery-latest.min.js" />
<apex:includeScript value="{!URLFOR($Resource.fancybox, '/source/jquery.fancybox.pack.js?v=2.1.5')}" />
<apex:stylesheet value="{!URLFOR($Resource.fancybox,'/source/jquery.fancybox.css?v=2.1.5')}" />
var $j = jQuery.noConflict(); $j(document).ready(function() { $j(".fancybox").fancybox(); }); 
<apex:pageBlock title="New User Training Module">
<apex:pageBlockSection title="Videos" >
 <apex:iframe width="400" height="300" src="https://www.youtube.com/embed/SGPvYQ1o2x4" rendered="true" frameborder="true"/>
 <a class="fancybox fancybox.iframe"  href="https://www.youtube.com/embed/y3ZUwPVnDWs">Link</a>
</apex:pageBlockSection>  
</apex:pageBlock>
<apex:pageBlock title="Advanced User Training Module">
<apex:pageBlockSection title="Videos" >
 Welcome!
</apex:pageBlockSection>  
</apex:pageBlock>

Related Topic