Is Fancybox possible with a httphandler?

问题

The code below works when I don't serve the images via the httphandler but just add the image URL directly in the HTML.
When I load images via the httphandler, the basic image in the control is shown correctly, but then when I click that image to load the larger image in a lightbox, I see scrambled code (wierd characters) see this image:

so I'm assuming Fancybox needs a direct URL to an image to fill the lightbox with, but I'm not sure.
How can I make sure that when the user clicks the hyperlink, fancybox shows the larger image which is served by 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>

Code-behind

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

回答1:

I assume you are using fancybox v1.3.4 because the API options in your code, aren't you?

If you are linking to an image this way :

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

... your link href doesn't have any image extension (jpg, png, gif). Because of that, fancybox doesn't know what type of content to handle. You need to force the type of content to image within your fancybox custom script. That is documented here http://fancybox.net/faq, No. 6

Then you could do :

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

来源：https://stackoverflow.com/questions/13850669/is-fancybox-possible-with-a-httphandler