I am trying to use fancybox to display images. My images are blobs inside a mysql db.
Here is the html/php I am using:
<a class="fancybox-buttons" data-fancybox-group="g1" href="data:image/jpeg;base64,<?php echo base64_encode($pic['screenshot']); ?>"><img src="data:image/jpeg;base64,<?php echo base64_encode($pic['screenshot']); ?>" width="150px" height="250px"/></a>
this works but I have this weird flickering ghost image problem when the page loads and when I move my mouse over the image.
I didn't even know what you did was possible. I think a better approach would be to create a script to dynamically server your images...
so the image src would be "image.php?id=123" and then you would have the image.php serving script ie...
Serve image with PHP script vs direct loading an image
I don't know enough about your app but is storing images in the db a good idea..seems like they are going to make the db big fast.
Image display section:
<a class="fancybox fancybox.iframe" href="blob:http://localhost:8080/a71e1fb6-8482-49cf-88fa-a29dfc71e39e">
<img src="blob:http://localhost:8080/a71e1fb6-8482-49cf-88fa-a29dfc71e39e"/>
</a>
Set document type for fancybox by this way (When page load):
jQuery(document).ready(function() {
$(".fancybox").fancybox({type : 'image'});
}
And success come.
When using fancy box with pdf or other filetypes (not image), we set other appropriate value.
I don't have enough points to comment so I'm going to put my 2 cents here. Hope it helps.
blob storage may not be fully supported on mobile devices. https://developer.mozilla.org/en-US/docs/Web/API/Blob
so the image src would be "image.php?id=123" and then you would have the image.php serving script ie...
That's a really good idea except for in my case we are using Web API with MVC/ADFS authentication model. Web API is a stateless web service so that option doesn't always work everywhere. To make it work we would have to allow anonymous access to that API call and that could be a security risk depending on the data.