Fancybox可能與一個httphandler？

Question

下面的代碼在我不通過httphandler提供圖片的情況下工作，只是直接在HTML中添加圖片URL。
當我通過httphandler加載圖像時，控件中的基本圖像顯示正確，但是當我單擊該圖像以在lightbox中加載較大圖像時，我看到了混亂代碼（奇怪字符），請參閱此圖像：

所以我假設Fancybox需要一個圖片的直接URL來填充燈箱，但我不確定。
如何確保當用戶單擊超鏈接時，fancybox會顯示由pichandler.ashx提供的較大圖像？

HTML

<script type="text/javascript" language="javascript"> 

$(document).ready(function() { 
    $(".fancylink").click(function() { 
     var cuRRent = $("a.advance-link img").attr("src"); 
     cuRRent = cuRRent.replace('largethumbs/', ''); 
     $.fancybox({ 
      'href': cuRRent, 
      // other API options etc 
      'overlayColor': '#000', 
      'opacity': true, 
      'transitionIn': 'elastic', 
      'transitionOut': 'none' 
     }); //fancybox 
    }); //click 

    $("a.freemediaimage").fancybox({ 
     'transitionIn': 'elastic', 
     'overlayColor': '#000', 
     'opacity': true, 
     'transitionOut': 'elastic', 
     'speedIn': 600, 
     'speedOut': 200, 
     'overlayShow': true 
    }); 

}); // ready 


</script> 



<asp:HyperLink ID="hlMediaImage" CssClass="freemediaimage" runat="server">  
    <asp:Image ID="MediaImage" runat="server" /> 
</asp:HyperLink> 

代碼隱藏

hlMediaImage.NavigateUrl = "~/pichandler.ashx?i=2&t=freemediadetails&s=2" 
MediaImage.ImageUrl = "~/pichandler.ashx?i=2&t=freemediadetails&s=1" 

pichandler.ashx

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest 
    Dim data As Byte() 


    Dim i As Integer = CInt(context.Request.QueryString("i")) 

    Dim type As String = context.Request.QueryString("t") 

    Dim fName As String = String.Empty 

    If i = 0 Then 
     data = My.Computer.FileSystem.ReadAllBytes(context.Server.MapPath(String.Format("~/images/noimage_{0}.jpg", Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName))) 
    Else 


     Select Case type 
      Case "freemedia" 
       Using w As New generaltablesTableAdapters.freemediaTableAdapter 
        fName = w.GetDataById(i)(0).medialink.ToString            
       End Using 
       If fName = "" Or fName.Contains("soundcloud.com") Or fName.Contains("youtube.com") Then 
        data = My.Computer.FileSystem.ReadAllBytes(context.Server.MapPath(String.Format("~/images/noimage_{0}.jpg", Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName))) 
       Else 
        data = My.Computer.FileSystem.ReadAllBytes(context.Server.MapPath("~/images/freemedia/thumbs/" & fName)) 
       End If 
      Case "freemediadetails" 

       Dim searchquery As New StringBuilder 
       searchquery.Append(ConfigurationManager.AppSettings("freemedia_solrUrl")) 
       searchquery.Append("select/?indent=on&facet=true") 
       searchquery.Append("&fq=id:""" + i.ToString + """") 
       searchquery.Append("&fl=id,medialink,copyrighttext&q=*:*") 
       searchquery.Append("&facet.mincount=1") 'dont show facets which have no value 
       searchquery.Append(searchquery.ToString) 

       Dim req As HttpWebRequest 
       Dim Resp As HttpWebResponse 
       Dim reader As StreamReader 
       Dim responseString As String 
       Dim XPath As String = "response/result" 

       req = HttpWebRequest.Create(searchquery.ToString) 
       Resp = req.GetResponse() 
       reader = New StreamReader(Resp.GetResponseStream) 
       responseString = reader.ReadToEnd() 

       Dim objXML As New XmlDocument 

       objXML.LoadXml(responseString) 
       XPath = "response/result" 

       Dim root As XmlNode = objXML.DocumentElement 
       Dim nodeList As XmlNodeList = root.SelectNodes("descendant::doc") 

       fName = nodeList(0).SelectSingleNode("str[@name=""medialink""]").InnerText 
       Dim watermarkText As String = nodeList(0).SelectSingleNode("str[@name=""copyrighttext""]").InnerText 

       Dim size As String = context.Request.QueryString("s") 

       ' Create image directly from the path 

       dim fpath as string 
       If size = "1" Then 
        fpath = "~/images/freemedia/largethumbs/" 
       ElseIf size = "2" Then 
        fpath = "~/images/freemedia/" 
       End If 

       Dim image = Drawing.Image.FromFile(context.Server.MapPath(fpath & fName)) 
       Dim font As New Font("Tahoma", 16, FontStyle.Regular, GraphicsUnit.Pixel) 

       'Adds a transparent watermark 
       Dim color As Color = color.White 
       Dim brush As New SolidBrush(color) 
       Dim gr As Graphics = Graphics.FromImage(image) 

       ' Measure the watermark text so we can offset it's width and height 
       Dim watermarkSize = gr.MeasureString(watermarkText, font) 

       ' Create the point where the watermark text should be printed 
       Dim point As New Point(image.Width - watermarkSize.Width, image.Height - watermarkSize.Height) 

       gr.DrawString(watermarkText, font, brush, point) 
       gr.Dispose() 

       image.Save(context.Response.OutputStream, ImageFormat.Jpeg) 


      Case Else 'its a general object 
       Using w As New genobjectsTableAdapters.genobjects_photosTableAdapter 
        fName = w.GetPhotoById(i)(0).locpath.ToString 
       End Using 
       data = My.Computer.FileSystem.ReadAllBytes(context.Server.MapPath("~/images/objphotos/thumbs/" & fName)) 


     End Select 
    End If 


    context.Response.ContentType = "image/jpeg" 

    If type <> "freemediadetails" Then 
     context.Response.BinaryWrite(data) 
    End If 
End Sub 

Answer 1

我假設你是使用fancybox v1.3.4是因爲代碼中的API選項，是不是？

如果您鏈接到了像這樣：

/pichandler.ashx?i=2&t=freemediadetails&s=2 

...您的鏈接href沒有任何圖像擴展名（JPG，PNG，GIF）。因此，fancybox不知道要處理的內容是什麼type。您需要在您的fancybox自定義腳本中強制type的內容到image。也就是說這裏http://fancybox.net/faq記載，第6號

然後，你可以這樣做：

$("a.freemediaimage").fancybox({ 
    // other API options 
    "type": "image" 
});