Question

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

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

您可以在彩盒中轻松使用base64图像。 base64图像是预加载的图像，所以只需在colorbox初始化中放置一个照片属性

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

Answer 2

如果您仍想使用Colorbox而不是Fancybox，最简单的解决方案就是找到Colorbox并告诉它它是JPG。只需添加一个＆＃34;＃.jpg和＃34;在末尾。例如：

<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();

如何使用带有base64图像的colorbox？

3 个答案: