Изображение Fancybox Base64String исчезает при открытии Fancybox

Question

Fancybox отлично работает, когда я использую путь к изображению, как в примере ниже (для «отлично работает» я имею в виду, что исходное изображение не исчезает, когда я нажимаю на него, чтобы активировать 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> 

но в моем случае мои изображения хранятся в базе данных в виде байта [], поэтому мой код:

<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>

, и в этом случае мое исходное изображение исчезает при нажатии на него. Fancybox правильно отображает его на переднем плане, но оригинал больше не на своем месте. Я думаю, это связано с тем, что href указывает на img Id в моем коде, но без него изображение Base64String неправильно отображается на экране Fancybox.

В обоих случаях код jquery:

 $('.fancybox').fancybox({});

Мне не удалось найти правильное решение; Мне нужна помощь, я думаю :) Спасибо

PS: как предложено, я добавляю ссылку на тестовую страницу, показывающую проблему: https://skcollector.azurewebsites.net/Works/Details/101?pageNumber=1 Верхнее изображение работает нормально, нижнее изображение есть проблема.

Answer 1

Проблема, как вы уже догадались, заключается в том, что вы отображаете контент, который совпадает с миниатюрой. Вы используете fancybox v1, и он долгое время не поддерживается, я не уверен, есть ли хорошее решение для этой конкретной версии. Вы можете продублировать значение base64 и использовать его в качестве целевого источника, но это, очевидно, не будет эффективным.

Если вы, однако, будете использовать fancybox v3, решение будет выглядеть следующим образом:

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

Вам также необходимо добавить data-fancybox="images" data-type="image" data-src="#" атрибутов к вашей ссылке.

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