CODEWITHSUNDEEP
jqueryfancybox
JoeyBagOfDonuts
JoeyBagOfDonuts

Reputation: 33

Images not showing in Fancy Box

I am trying to add fancy box to a masonry layout but the image won't open up into the fancy box styling, it just opens the up the image.

Source code:

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item">
    <a class="fancybox" href="images/lg_denali.png" width="800">
      <img src="images/denali_outfitters.jpg" width="">
    </a>
  </div>
</div>

I have followed the steps from http://fancyapps.com/ on how to link to the fancy box files that I have download, so I don't think this is the issue. I do not get any console errors when loading the page.

jQuery

$document.ready(function(){
$(".fancybox").fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    maxWidth: 800,
    maxHeight: 'auto'
});
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 200,
  });
});

Not sure what I am doing wrong here.

Here are how I have the files linked. Maybe it's how they are ordered is incorrect?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="resource-type" content="document" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="classification" content="Internet" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="ALL" />
<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script src="js/custom.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script></head>

Upvotes: 0

Views: 2235

Answers (1)

Aravind Prabash
Aravind Prabash

Reputation: 443

You need to load jquery only once. and you should load fancybox js files after jquery. this will fix the issue.

Upvotes: 0

Related Questions