upgrading greybox with fancybox not working

StackOverflow https://stackoverflow.com/questions/23196077

  •  06-07-2023
  •  | 
  •  

Question

I was using grey box which is working fine. But I try to upgrade to fancybox but it is redirecting to the link. Any one please help

Here is my code :

  <script src="//code.jquery.com/jquery-1.8.0.min.js"></script>
 <script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.1"></script>
 <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.1" media="screen" />
     <script type="text/javascript">
        var GB_ROOT_DIR = "greybox/";
    </script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

  <script>
   $(document).ready(function(){
      $("body").on("click",".fancybox",function() {
      link=($(this).attr('href'));
            $.fancybox({
            'width'                : '1000',
            'href'                 : link,
            'height'            : '750',
            'autoScale'         : false,
            'transitionIn'        : 'none',
            'transitionOut'        : 'none',
            'type'                : 'iframe'
            }); 
       event.preventDefault();
           });
 });
</script>  
</head>
<body>
<a class="fancybox" href="detail.php">Detail</a>
</body>
</html>

Is there anything I have to add additional?

Was it helpful?

Solution

May be grey box is confilicting with fancy box. Remove the greybox scripts and try. it will work

<script src="//code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.1.1"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.1.1" media="screen" />

<!--
<script type="text/javascript">
   var GB_ROOT_DIR = "greybox/";
</script>

<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
-->
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top