Jump to content

Fancybox popups no longer working......


GuruMeditation
 Share

Recommended Posts

Hi all, I've just spent most of the night trying to debug this to no avail.

My site has been working as expected for a while now, but over the last two days I've noticed a few weird issues. The only thing I've changed is to update my foundation 5 files from 5.1.1 to 5.2.2, so I reckon it might be something to do with that? However, I was hoping you'd have a look at the following code to make sure I've not done something stupid.

The following code has been cut back to the basics for troubleshooting, and should just load the duckduckgo logo in a fancybox popup window, but it loads it as a flat page instead.

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >

	<head>
      
	 <meta charset="utf-8" />
	 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

	<link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/normalize.css">
	<link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/foundation.css">
	<link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/custom.css">
	<link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>fb/jquery.fancybox.css">

	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="<?=$config->urls->templates;?>fb/jquery.fancybox.pack.js"></script>
	<script src="<?=$config->urls->templates;?>js/vendor/modernizr.js"></script>
		
	<title><?=$pages->get("/")->site_name;?> | <?=$page->title;?></title>

	</head>

<body>

<div class="container">

<a class='th single_1' href='https://duckduckgo.com/assets/_logo_next.png' title='duck'><img src='https://duckduckgo.com/assets/_logo_next.png' alt='duck' /></a>

</div>

<script src="<?=$config->urls->templates;?>js/vendor/fastclick.js"></script>
<script src="<?=$config->urls->templates;?>js/vendor/jquery.js"></script>
<script src="<?=$config->urls->templates;?>js/foundation.min.js"></script>
	
  <script type="text/javascript">
    $(document).foundation({
	    orbit: {
		    animation: 'fade',
		    timer_speed: 8000,
		    pause_on_hover: true,
		    animation_speed: 500,
		    swipe: true,
		    resume_on_mouseout: true,
		    slide_number: false,
		    navigation_arrows: false,
		    bullets: false
			}
		});
  </script>

  <script type="text/javascript">
    $('a[href*="/assets/files/"]:has(img)').addClass('th single_1');
  </script>
  
  <script type="text/javascript">
    $(document).ready(function() {

      $(".single_1").fancybox({
            openEffect  : 'elastic',
            closeEffect : 'elastic',

            helpers : {
              title : { type : 'inside' },
              overlay : {
              locked : false
              }
            }
      });
    })
  </script>

</body>
</html>
Link to comment
Share on other sites

I guess you have a javascript error somewhere. Check the js console for errors for example with chrome's devtools or firebug.

Also I noticed that you include jquery two times.

Cheers

  • Like 2
Link to comment
Share on other sites

I guess you have a javascript error somewhere. Check the js console for errors for example with chrome's devtools or firebug.

Also I noticed that you include jquery two times.

Cheers

You are right, I removed the latter <script src="<?=$config->urls->templates;?>js/vendor/jquery.js"></script> and it worked. But what confuses me there is that I've not added that recently and it worked before. Still, thanks again for spotting that.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...