jquery - 如何使用带有 base64 图像的颜色框？

Question

我正在尝试将 colorbox 图像与 base64 一起使用，但是当我单击以在幻灯片中打开图像时，它不会打开。我正在使用骨干框架。

<!-- html code -->
<a href="<img src="data:image/png;base64,<%= image %>"/>" title="<%= description %>"> 
    <img src="data:image/png;base64,<%= image %>" alt="" />
</a>

//javascript code
this.$el.find('ul li > a').attr('rel', 'gallery').colorbox({
   maxWidth     : '80%',
   maxHeight    : '80%',
   opacity      : '0.1',
   inline       : true,
   html         : true,
   loop         : true,
   slideshow    : true,
   slideshowAuto: false,
   fixed        : true
 });

Answer 1

您可以轻松地在 colorbox 中使用 base64 图像。base64 图像是预加载的图像，因此只需在您的颜色框初始化中添加一个照片属性

$('a.img_box').colorbox({'photo':true});

Answer 2

如果您仍想使用 Colorbox 而不是 Fancybox，最简单的解决方案是对 Colorbox 撒谎并告诉它是 JPG。只需在末尾添加“#.jpg”即可。例如：

<a href="<img src="data:image/png;base64,<%= image %>#.jpg"/>" title="<%= description %>">
    <img src="data:image/png;base64,<%= image %>" alt="" />
</a>

这应该很容易工作。

Answer 3

嗨问题用库 fancylightbox 解决了。

this.$el.find('ul li > a').fancybox();