Fancybox seems to ignore content headers...
739 views
Skip to first unread message
s0l1dsnak3123
May 22, 2009, 3:19:06 PM5/22/09
to fancybox
Hi there, I am using Fancybox on a dynamically loaded image, and
fancybox shows its self fine (slow, but fine). the problem is,
however, that instead of showing the image, it shows the text that the
image consists of - as if it ignored the header and assumed it was
text.
The Jquery:
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#imagelala").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
$("a.group").fancybox({
'zoomSpeedIn': 300,
'zoomSpeedOut': 300,
'overlayShow': false
});
});
</script>
An example link in question:
<a id="imagelala" href="../inc/view_image.php?projectID=22">Full size
Image</a>
An example output:
http://yfrog.com/3xscreenshothszp
Any thoughts? :(
fancybox shows its self fine (slow, but fine). the problem is,
however, that instead of showing the image, it shows the text that the
image consists of - as if it ignored the header and assumed it was
text.
The Jquery:
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#imagelala").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
$("a.group").fancybox({
'zoomSpeedIn': 300,
'zoomSpeedOut': 300,
'overlayShow': false
});
});
</script>
An example link in question:
<a id="imagelala" href="../inc/view_image.php?projectID=22">Full size
Image</a>
An example output:
http://yfrog.com/3xscreenshothszp
Any thoughts? :(
Janis
May 22, 2009, 3:50:58 PM5/22/09
to fancybox
Try using links, for example, ./inc/view_image.php?
projectID=22&ext=.jpg
projectID=22&ext=.jpg
s0l1dsnak3123
May 22, 2009, 3:59:26 PM5/22/09
to fancybox
I shouldn't need to do that, as the content header is already defined
in the PHP output:
if ( @file_exists( IMAGE_UPLOAD_DIR_VIEWER . $result ) ) {
$size = getimagesize( IMAGE_UPLOAD_DIR_VIEWER . $result );
$image = fopen( IMAGE_UPLOAD_DIR_VIEWER . $result, 'rb' );
header( "Content-type: " . $size['mime'] );
fpassthru( $image );
in the PHP output:
if ( @file_exists( IMAGE_UPLOAD_DIR_VIEWER . $result ) ) {
$size = getimagesize( IMAGE_UPLOAD_DIR_VIEWER . $result );
$image = fopen( IMAGE_UPLOAD_DIR_VIEWER . $result, 'rb' );
header( "Content-type: " . $size['mime'] );
fpassthru( $image );
s0l1dsnak3123
May 23, 2009, 9:02:23 AM5/23/09
to fancybox
Well, I tried it and it worked! I guess the reason why the Javascript
behaved that way was because it was detecting filetypes by their
extension, which seems a little silly to me. Never mind though - it
works now :)
On May 22, 8:59 pm, s0l1dsnak3123 <s0l1dsnak3...@googlemail.com>
wrote:
behaved that way was because it was detecting filetypes by their
extension, which seems a little silly to me. Never mind though - it
works now :)
On May 22, 8:59 pm, s0l1dsnak3123 <s0l1dsnak3...@googlemail.com>
wrote:
Janis
May 23, 2009, 2:21:42 PM5/23/09
to fancybox
Silly? If you are so smart, why don`t you tribute code enhancement? I
really would like to see how you will be able to detect file type by
headers from javascript.
really would like to see how you will be able to detect file type by
headers from javascript.
thalis
Jun 6, 2009, 4:04:48 AM6/6/09
to fancybox
(It's a late post, but posting for future readers).
I had same problem: dynamically streaming image from DB caused a
fancybox with the garbage text of the image's content, instead of a
rendered image.
Workaround: make a separate php file which just prints an html page
with a single <img> in the <body> and call it with the same query
string as you would your view_image.php.
In your showImage.php you would have something along the lines:
<html>
<body>
<img src="../inc/view_image.php?projectID=<?php echo($_REQUEST
['projectID']);?>"/>
</body>
</html>
and open this in fancybox using an iframe i.e.:
<a class="fancybox iframe" href="showImage.php?projectID=22">link
text</a>
And your fancybox Js:
$(document).ready(function(){
$("a.fancybox").fancybox();
});
On May 23, 4:02 pm, s0l1dsnak3123 <s0l1dsnak3...@googlemail.com>
wrote:
> > I shouldn't need to do that, as thecontentheader is already defined
I had same problem: dynamically streaming image from DB caused a
fancybox with the garbage text of the image's content, instead of a
rendered image.
Workaround: make a separate php file which just prints an html page
with a single <img> in the <body> and call it with the same query
string as you would your view_image.php.
In your showImage.php you would have something along the lines:
<html>
<body>
<img src="../inc/view_image.php?projectID=<?php echo($_REQUEST
['projectID']);?>"/>
</body>
</html>
and open this in fancybox using an iframe i.e.:
<a class="fancybox iframe" href="showImage.php?projectID=22">link
text</a>
And your fancybox Js:
$(document).ready(function(){
$("a.fancybox").fancybox();
});
On May 23, 4:02 pm, s0l1dsnak3123 <s0l1dsnak3...@googlemail.com>
wrote:
> Well, I tried it and it worked! I guess the reason why the Javascript
> behaved that way was because it was detecting filetypes by their
> extension, whichseemsa little silly to me. Never mind though - it
> behaved that way was because it was detecting filetypes by their
> > I shouldn't need to do that, as thecontentheader is already defined
gunv
Jun 22, 2009, 8:40:12 AM6/22/09
to fancybox
Having the the same problem (images coming from an asset management
repository without extension), I used the type= attribute of the a
tag, which is intended to specify the MIME type of the linked resource
(e.g. <a type="image/jpeg">).
I had to change 8 lines in the js-code to add support for this
attribute:
In function _start() I added an additional property 'type' to item:
var item = {href: elem.href, title: elem.title, type: elem.type};
and
item = {href: subGroup[i].href, title: subGroup[i].title, type:
subGroup[i].type};
in function _change_item() i added
var type = opts.itemArray[ opts.itemCurrent ].type;
and changed
if (href.match(imageRegExp))
to
if (href.match(imageRegExp) || type.match(/^image/)) {
In function _preload_neighbor_images() there are 2 more occurence of
match(imageRegExp), which I changed in the same way.
I only needed this functionality for images and my changes work for
me.
Maybe support for type= can be added in future versions of fancybox as
I think it is a very clean solution the problem discussed in this
thread.
repository without extension), I used the type= attribute of the a
tag, which is intended to specify the MIME type of the linked resource
(e.g. <a type="image/jpeg">).
I had to change 8 lines in the js-code to add support for this
attribute:
In function _start() I added an additional property 'type' to item:
var item = {href: elem.href, title: elem.title, type: elem.type};
and
item = {href: subGroup[i].href, title: subGroup[i].title, type:
subGroup[i].type};
in function _change_item() i added
var type = opts.itemArray[ opts.itemCurrent ].type;
and changed
if (href.match(imageRegExp))
to
if (href.match(imageRegExp) || type.match(/^image/)) {
In function _preload_neighbor_images() there are 2 more occurence of
match(imageRegExp), which I changed in the same way.
I only needed this functionality for images and my changes work for
me.
Maybe support for type= can be added in future versions of fancybox as
I think it is a very clean solution the problem discussed in this
thread.
Reply all
Reply to author
Forward
0 new messages