Using Fancybox single image box, the image is not completely loaded in IE. Chrome loads the image perfectly, but on IE it looks like as the loading is cut short somehow. The image itself comes from DB as byte array and loads just fine on IE when set as an ordinary html image.
This is what I get on Fancybox:
Any pointers on how to force the loading to continue until the whole image is sent?
Edit
JQuery for fancybox:
$("a#single_image").fancybox({
'type': 'image',
'hideOnContentClick' : 'true'
});
Image:
<a id="single_image" href="<%= Source %>"><img runat="server" id="largeImg" /></a>
Where "Source" is a string containing the image data.
Fixed it myself after scratching my head for a really long time.
Turns out the request grows too long for IE to handle (or something like it) when the image data is read twice from the code-behind.
Instead I removed the href attribute from the <a>-tag and added it again with jQuery, so that it's read from the <img>-tag's src attribute, like so:
$(document).ready(function () {
var src = $("#<%: largeImg.ClientID %>").attr("src");
$("#largeImgLink").attr("href", src);
});
This also keeps the request shorter and reduces traffic load on the server.
On a footnote, this was not a Fancybox-specific issue. The problem was the same with Lightbox also, and only on IE and EDGE. Chrome loaded the image correctly from the beginning.
Related
I'm trying to figure out how to get an image added to the clipboard with an associated URI.
Adding a link to text is easy:
string html = #"Version:0.9
StartHTML:<<<<<<<1
EndHTML:<<<<<<<2
StartFragment:<<<<<<<3
EndFragment:<<<<<<<4
SourceURL: <<<<<<<5
<html>
<body>
<!--StartFragment-->
<a href='aria: 73571 73570'>test 73571 73570</a>
<!--EndFragment-->
</body>
</html>";
string link = html;
Clipboard.SetText(link, TextDataFormat.Html);
but its not obvious what to do with a picture such as a bitmap.
Has anyone done this?
--- additional info ---
Just to clarify - the image I need to use is a bitmap generated by the program. I need to associate the image with a URI so that when pasted into something like Word, the user can click on the image to go to the link. Adding the bitmap to the clipboard on its own I can do, but its the URI part with it that I'm not sure of.
---- Another edit -----
I've tried going the embedded encoded image route by creating a string with the following in it:
Version:0.9
StartHTML:000089
EndHTML:9575818
StartFragment:000242
EndFragment:9575780
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML clipboard</title>
</head>
<body>
<!--StartFragment--><a href='aria: 73571 73570'><img src='data:image/png;base64,### Encoded Image removed for brevity ##'>
<!--EndFragment-->
</body>
</html>
if saved as an HTML file, this opens in a browser perfectly and the image lets me click on the link with no problem.
When I tried to use the clipboard:
DataObject obj = new DataObject();
obj.SetData(DataFormats.Html, new MemoryStream(encoding.GetBytes(htmlResult)));
Clipboard.SetDataObject(obj, true);
htmlresult is the string containing the html fragment as shown before. When I try to paste into word, I can't get anything out of it.
I'm now running out of ideas..
You can put multiple items on the clipboard simultaneously. Currently, you're only putting the html content on the clipboard, but not an actual image, and thus, applications pasting it will most likely not see it as image. You'll need to put both into the DataObject before putting it on the clipboard.
One thing I can see is an issue is the fact that the html fragment does not contain a url at all. It contains a raw data block as Base64. If you want it to point to a url, then you should give it a real url, rather than the data:image/png;base64, block. The html block you put on the clipboard is supposed to be additional metadata to go alongside an image, not the image itself.
Also, what is that aria: 73571 73570? That's not a url either.
Anyway, the proper way to put things onto the clipboard from stream is the following:
using (MemoryStream htmlStream = new MemoryStream(encoding.GetBytes(htmlResult)))
{
DataObject obj = new DataObject();
// The html content.
obj.SetData(DataFormats.Html, htmlStream);
// As standard bitmap
obj.SetData(DataFormats.Bitmap, image);
// The 'copy=true' argument means any streams that are used
// can be safely disposed after the operation.
Clipboard.SetDataObject(obj, true);
}
The mentioned image is the image. I'm not sure if this works the same way in wpf though; I've been doing this kind of stuff with the System.Drawing classes.
Do note that this kind of clipboard handling has no transparency support. Technically, the clipboard has no image transparency support, but certain programs can read other formats (like png) from the clipboard to get around that. See this answer for more information on that, though do note that that answer is not written for wpf.
I am storing the content for my page in a sql server database. When i load the content onto the page i have a tag:
<img src="~/Images/Course/html.jpg" />
The html is being rendered using #Html.Raw(content).
when the page loads i get the error:
GET http://localhost:51249/Course/Index/~/Images/Course/html.jpg 404 (Not Found)
I dont know why it does this. Is there any way to have images stored in files within the project, then when loading the html from the db the local linking works? Do I have to host the images somewhere and link to them via https? Any help would be great.
Fixed it - just remove the tilda from the value in the database. Here's a small sample code in the HTML to reproduce the same problem:
<img src="~/images/house.jpg" />
#{
var something = "<img src='/images/house.jpg' />";
}
#Html.Raw(something)
The first line displays the image direct from the location, using the tilda, which .net resolves to the root of your project.
The second line doesn't use the tilda, which automatically comes from the root of the project, but leaving the tilda in messes up.
Fix: delete one character from the HTML stored in the database.
im doing a project using .net MVC web Application.
i recently used a code to create a new thumbnail to photos (re defining the sizes of a photo) . and now i'm trying to print the photos using the 'img' tag of HTML but without success.
the thumbnail creating code :
Image thumbnail = Image.FromFile(destPath);
thumbnail = (Image)(new Bitmap(thumbnail, new Size(this.m_thumbnailSize, this.m_thumbnailSize)));
thumbnail.Save(destPathThumb);
now for the img printing :
#Html.DisplayFor(modelitem=>item)
<img class="img-rounded" style="border-radius:50%" src=#item alt="">
item is the path to the picture and it is currect (ive checked serveral times).
any ideas what i could be ?
thank you for helping me ! :)
EDIT: the img tag prints normal pictures -> pictures that my program did not create(as i said,my program created thumbnail pictures)
I wonder if it is not releasing the file lock on the image, I have had that problem in the past. You have to be very careful about releasing those Image and Bitmap objects.
Something like this might work, as it will dispose the image before the page starts using it:
using(Image thumbnailoriginal = Image.FromFile(destPath)){
using(Image thumbnail = (Image)(new Bitmap(thumbnailoriginal, new Size(this.m_thumbnailSize, this.m_thumbnailSize)))){
thumbnail.Save(destPathThumb);
}
}
It seems like a lot of brackets on the end but thats ok.
If it still does not work, can you post the html that is sent to the browser, you can do that using "View page source" from the right-click menu in Chrome.
Now we have the html that is going to the browser, we can see that the src attribute is pulling directly from the C drive, rather than from a web url:
<img class="img-rounded" style="border-radius:50%" alt="" src="C:\Users\Operu\Desktop\dest\Thumbnails\2018\6\Sasuke.png">
Normally we would want to see something more like this:
<img class="img-rounded" style="border-radius:50%" alt="" src="\Thumbnails\Sasuke.png">
Could you post the model and controller files next please, so we can see what type of object the #item is when it hits your view. Then we can hopefully get it to pull the relative url address instead of the file location.
I have an asp.net page, with couple of Divs, some of these div's get the image path from database and show the image in a smaller version (thumbnail). and as soon as user click on thumbnail, I use ajax Modal popup to show the full size image, what I need to have is to have a progree image(gif), on every thumbnail image while loading the asp.net page for the first time, I konw that it is possible to use UpadePanel, but I need the actual working code,or any other way to achieve this,
Thanks in advance
Well, if you are posting back, udpate panel can work; but you can programmably in JS do this yourself, or also consider using a JS plugin like lightbox: http://www.huddletogether.com/projects/lightbox2/
Which has that feature and looks very cool.
I am using a generateimage.aspx page which is used as an image source for an image.
When this page is called i am passing a querystring and then using a Session["abc"] var whoes value is being retruned as a jpg image.
The GenerateImage page is called from another page test.aspx like GenerateImage.aspx?text=P as image source under the img tag .And the value returned is then dislayed i the form of image.
PROBLEM: some time this page is called and some time not.
Thus when the page is not called then the image value that is being returned is that which is assigned to the Session["abc"] var in previous Session.
Please let me know what might be the reason that the page is called sometime and sometime not
And how can I handle this problem.
I think this is a caching issue. By appending a timestamp or a random number to the end of the request url as a querystring will solve this.
Something like
GenerateImage.aspx?text=P&dynstr=" + (new Date()).getTime();
You can disable caching this way:
Response.Cache.SetExpires(DateTime.Now.AddDays(-1));
I agree with #pulse, HTML images are commonly cached by most browsers. So you have two options: 1. Append a random string to the source (not my favorite as it's just a hack) 2. Set the page to force no cache by setting a response header (much better IMO).
Another thing is that I would switch to a handler (ashx page) instead of a standard aspx page for image handling as it has a much lighter footprint/lifecycle and can be easily reused.