0

I have two JQuery functions one to display the Fancybox and second one to create the owl-carousel, I want the awl carousel function to run after the fancybox function runs.

$(document).ready(function() {
    $(".fancybox1").fancybox({
        content : '<div  class="col-md-6"><div id="fancybox12" class="owl-carousel owl-theme"><div class="item"><img src="img/portfolio/102.jpg" class="img-responsive" alt="..."></div></div></div><div class="text-center col-md-6"><h1> T-Shirts & Fabric Printing </h1></div> '
   }),
   $("#fancybox12").owlCarousel({
          navigation : false, // Show next and prev buttons
          slideSpeed : 300,
          paginationSpeed : 400,
          singleItem:true
     });
});

But I'm am unable to get the callback to work.Please help me. Thanks

Akash Rajbanshi
  • 1,553
  • 11
  • 23
Sundar Raman Ganesh
  • 1

1 Answers1

0

Try having them in a separate function and then call that function like this:

(document).ready(function() {
    runfancybox();

    function runfancybox(){
    $(".fancybox1").fancybox({
            content : '<div  class="col-md-6"><div id="fancybox12" class="owl-carousel owl-theme"><div class="item"><img src="img/portfolio/102.jpg" class="img-responsive" alt="..."></div></div></div><div class="text-center col-md-6"><h1> T-Shirts & Fabric Printing </h1></div> '
      });
      runOwlCarousel();
    }


    function runOwlCarousel(){
        $("#fancybox12").owlCarousel({
          navigation : false, // Show next and prev buttons
          slideSpeed : 300,
          paginationSpeed : 400,
          singleItem:true
          });     
    }
 });