使用二进制数组和FancyBox插件(jQuery)显示图像

时间:2012-01-28 15:44:08

标签: jquery fancybox

<img>属性是二进制数组(ASP.NET MVC 3)时,我需要一些帮助或信息在src标记中显示图像:

https://stackoverflow.com/a/2644598/106616

这是我使用的解决方案。 (目的是,我不想向用户显示物理图像路径)

好的,然后我想使用FancyBox插件来显示该图片:

<link href="@Url.Content("~/Content/jquery.fancybox-1.3.4.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.fancybox-1.3.4.js")" type="text/javascript"></script>

 <a id="book-cover-hl" href="@path">
    <img alt='' class='book-cover-details' src="@path" />
  </a>

  $(function () {
         $("a#book-cover-hl").fancybox({
             'overlayShow': false,
             'transitionIn': 'elastic',
             'transitionOut': 'elastic'
         });
   });
  

但是,我注意到如果我将@path变量放在<a [...] href="@path">插件无法正常工作 - 如果我点击   图像,只显示加载动画,但不显示我的图像。有没有人   知道如何解决它?或许还有另一个想法?让我听听   来自你的。

1 个答案:

答案 0 :(得分:2)

根据that回答,它有效:

  

如果你想使用fancybox和数据uri图像,如。

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//
gA8Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NzApLCBxdWFsaXR5ID0gMTAwCv/
bAEMAAQEBAQEBAQEBAQEB......
     

你需要在jquery fancybox脚本中改变一些东西。

     

1)基于版本:1.3.4(11/11/2010)2)更改第23行。

     

ajaxLoader = null,imgPreloader = new Image(),imgRegExpdatauri = /   (data:image)/ i,imgRegExp = /.(jpg | gif | png | bmp | jpeg)(。)?$ / i,   swfRegExp = / [^。]。(swf)\ s $ / i,

     

3)为这些更改第113-117行

     

if(href.match(imgRegExpdatauri)){type ='image2';

     

}否则if(href.match(imgRegExp)){type ='image';

     

4)休息后插入这条线;在第197行

     

案例'image2':busy = false;

     

$ fancybox.showActivity();

     

imgPreloader = new Image();

     

imgPreloader.onerror = function(){   _错误(); };

     

imgPreloader.onload = function(){busy = true;

     

imgPreloader.onerror = imgPreloader.onload = null;

     

_process_image(); };

     

imgPreloader.src = href;打破;

     

现在应该可以了。