0

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.

2
  • It should work without a problem. Since you did not provide a link to live page/demo, it is not possible to help you.
    – Janis
    Apr 23, 2020 at 6:40
  • Of course, you're right.skcollector.azurewebsites.net/Works/Details/101?pageNumber=1 This is the link to a page with the mentioned problem. The upper picture works right, the lower one does not.
    – Max Zeni
    Apr 23, 2020 at 7:56

1 Answer 1

0

The problem, as you already guessed, is that you are displaying content that is the same as the thumbnail. You are using fancybox v1 and it is not supported for a long time, I am not sure if there is a good solution for that particular version. You could duplicate base64 value and use it as target source, but that, obviously, would not be efficient.

If you, however, would be using fancybox v3, the solution would look like this:

$('[data-fancybox="images"]').fancybox({
  beforeLoad : function(instance, current) {
    if (current.src=== '#') {
    current.src = current.opts.$orig.find('img').attr('src');
    }
  }
});

You would also have to add data-fancybox="images" data-type="image" data-src="#" attributes to your link.

DEMO - https://jsfiddle.net/vng9ye06/

1
  • Thanx a lot, Janis, it works perfectly! I just added a href="#" attribute to my link in order to show the typical little-hand shaped pointer when hovering over the image.
    – Max Zeni
    Apr 23, 2020 at 9:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.