如何使用colorbox與base64圖像？

我試圖用base64使用colorbox圖像，但是當我單擊以在幻燈片中打開圖像時，它無法打開。我正在使用骨幹框架。如何使用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 
});

來源

2013-03-31 Paulo Miyashiro

執行'colorbox'函數時''this。$ el.find（'ul li> a'）。length'的值是什麼？ – WiredPrairie

嗨，值是2. –

我沒有注意到這一點，但我無法想象將'href'設置爲html標籤（' WiredPrairie

嗨問題解決與庫的fancylightbox。

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

來源

2013-04-01 12:48:30

您可以在colorbox中輕鬆使用base64圖像。的base64圖像是預裝的圖像，所以只是把照片屬性，在顏色框初始化

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

來源

2014-01-09 11:50:41

如果你還是想用彩盒代替的fancybox的最簡單方法是騙彩盒，告訴它，它是一個JPG。只需在最後添加一個「＃.jpg」。例如：

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

這應該很容易工作。

來源

2014-05-10 14:46:54

是的。簡單有效的解決方案。 – Aaron

如何使用colorbox與base64圖像？

回答

相關問題