I have recently build a small page with fancybox and I have a nagging issue where fancybox hides images from my page.
So when I close my gallery(fancybox) all my thumbnails are gone.
This my html
<a class="fancybox" src="/style/images/project1/fullsize/image1.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor."><img src="/style/images/project1/thumb/image1.jpg"></a>
and the scripts i am loading.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/style/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript" src="/js/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" type="text/css" href="/style/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
The issue is created by a syntax error in your HTML code: you are using the
src
attribute in your anchors like :The correct attribute for the
<a>
element ishref
like :This JSFIDDLE reproduces the issue using the
src
attribute.Here is fixed using the correct
href
attribute