Fancybox works perfectly when I use a path to an image, as in the example below (for "works perfectly" I mean that the original image does not disappear when I click on it to activate fancybox):
<div class="container">
<section id="picture-container">
<div class="picture-box">
<a href="http://fancyapps.com/fancybox/demo/2_b.jpg" class="fancybox" rel="group"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>
</div>
</section>
</div>
but in my case I have my images stored in a database as byte[], so my code is:
<div class="container">
<section id="picture-container">
<div class="picture-box">
<a href="#myBase64String" class="fancybox" rel="group">
<img src="data:image/jpg;base64,@Convert.ToBase64String(Model.Image)" alt="" id="myBase64String" />
</a>
</div>
</section>
</div>
and in this case my original image disappears when clicking on it. Fancybox displays it properly in the foreground, but the original one is no more in its place. I think it's due to the href pointing to the img Id in my code, but without it the Base64String image is not properly diplayed on screen by Fancybox.
In both cases the jquery code is:
$('.fancybox').fancybox({});
I did not manage to find a proper solution; I need help, I suppose :) Thanks
PS: as suggested, I add a link to a test page showing the problem: https://skcollector.azurewebsites.net/Works/Details/101?pageNumber=1 The upper image works fine, the lower image has the problem.