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), 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\[code\]<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\]Code-behind \[code\]hlMediaImage.NavigateUrl = "~/pichandler.ashx?i=2&t=freemediadetails&s=2" MediaImage.ImageUrl = "~/pichandler.ashx?i=2&t=freemediadetails&s=1"\[/code\]pichandler.ashx\[code\]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 = http://stackoverflow.com/questions/13850669/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 = http://stackoverflow.com/questions/13850669/My.Computer.FileSystem.ReadAllBytes(context.Server.MapPath(String.Format("~/images/noimage_{0}.jpg", Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName))) Else data = http://stackoverflow.com/questions/13850669/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 = http://stackoverflow.com/questions/13850669/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 IfEnd Sub\[/code\]
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), 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\[code\]<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\]Code-behind \[code\]hlMediaImage.NavigateUrl = "~/pichandler.ashx?i=2&t=freemediadetails&s=2" MediaImage.ImageUrl = "~/pichandler.ashx?i=2&t=freemediadetails&s=1"\[/code\]pichandler.ashx\[code\]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 = http://stackoverflow.com/questions/13850669/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 = http://stackoverflow.com/questions/13850669/My.Computer.FileSystem.ReadAllBytes(context.Server.MapPath(String.Format("~/images/noimage_{0}.jpg", Threading.Thread.CurrentThread.CurrentCulture.TwoLetterISOLanguageName))) Else data = http://stackoverflow.com/questions/13850669/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 = http://stackoverflow.com/questions/13850669/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 IfEnd Sub\[/code\]