I have searched for an answer over and over again, but I can't seem to figure this one out. I want to simply use fancybox to show an image.
This is the first time I use fancybox, so probably someone experienced will notice the problem within seconds.
I've followed the steps given at http://fancyapps.com/fancybox/.
This is the code I have in my head.php file:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<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>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
This is copied from the given website. I'm using the exact samen folder-name "fancybox", so I think that can't be the problem. In my code where I want to load an image, this is what I have:
echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';
After loading this page, I have this code (also copied from the given website):
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
Yet when I click this image, it won't open in fancybox, but it opens in a new tab instead only showing the image without any fancy styling.
Thanks for your help in advance!