PDA

View Full Version : LightBox issue with IE



rpboer
11-22-2009, 08:33 PM
Hello I'm new to this forum and struggling with an issue with Lightbox.

Problem : Light Box only shows1/3rd of the picture, rest is black. And it hangs also. It seems to focus around IE7 users.
Version used : Lightbox v2.03.2
Site where the problem occurs : www.villasud.nl. For viewing the Lightbox please follow :http://www.villasud.nl/vakantiehuis/44/aquarius and click on the Villa image.

Some of our visitors have problems with viewing the lightbox we've implemented for quite some years now. It happend suddenly and seems to grow...maybe an IE update? The problem is that I'm not able to troubleshoot the issue because I do NOT have this problem anywhere on my computers, browsers or different OS (mac, linux, Vista, XP etc).

I've did some research already but and added code to rule out the IE problem...no luck so far.
Please advice. If you need css/js code please let me know I'll post it.
Thanks in advance.

jscheuer1
11-23-2009, 04:56 AM
These images appear to be generated by the server:


http://www.villasud.nl/includes/make_image.php?id=704&style=image

If that's new, that might be the problem.

Even so, it appears that once the image is cached it works OK. To that end, you can try making an absolutely positioned hidden division above and to the left of the page that will load these images:


<div style="position:absolute;top:-3000px;left:-3000px;visibility:hidden;">
<img src="http://www.villasud.nl/includes/make_image.php?id=704&style=image" alt="">
<img src="http://www.villasud.nl/includes/make_image.php?id=781&style=image" alt="">
<!-- and so on, list all the images used -->
</div>

Once you have all of the images in there, place it as the very first thing after your opening <body> tag.

Or, you can try upgrading to v2.04a of lightbox:

http://www.dynamicdrive.com/forums/showthread.php?p=163470#post163470

But that may have the same problem.

I'll do some tests, if I can (server side code isn't always portable to a local mock up, which is what I will have to use) to see if I can duplicate the problem and/or eliminate it.

It may also help if I could see the PHP source code of the:

http://www.villasud.nl/includes/make_image.php

file.

The main problem appears to be the server side image generation. If you could switch back to actual images, and optimize those, that would be the best chance at fixing this.

rpboer
11-23-2009, 09:26 AM
Thanks for the swift reply. If server side image generation seems to be the problem could it be a bandwith issue to/ from the server or a setting on the server itself. eg a slow connection ?

The code make_image is below :
<?php

require_once($_SERVER['DOCUMENT_ROOT'] . "/includes/db_connection.php");
require_once($_SERVER['DOCUMENT_ROOT'] . "/classes/imageeditor.class.php");

$style = (isset($_GET['style'])) ? $_GET['style'] : NULL;
$id = (isset($_GET['id'])) ? $_GET['id'] : NULL;
$width = (isset($_GET['width'])) ? $_GET['width'] : 0;
$height = (isset($_GET['height'])) ? $_GET['height'] : 0;
$url = (isset($_GET['url'])) ? $_GET['url'] : "";

// Maak plaatje
$image = new ImageEditor();

// Aanbiedingen
if ($style == "aanbieding")
{
$image->getAanbiedingImg($id);
}

// Specials
elseif ($style == "special")
{
$num = (isset($_GET['num'])) ? $_GET['num'] : 1;

$image->getSpecialImg($id, $num);
}

// Omgevingen
elseif ($style == "omgeving")
{
$num = (isset($_GET['num'])) ? $_GET['num'] : 1;

$image->getOmgevingImg($id, $num);
}

// Villa images
elseif ($style == "image" || $style == "print")
{
$image->getVillaImg($id);
}

// Plaats images
elseif ($style == "plaats")
{
$num = (isset($_GET['num'])) ? $_GET['num'] : 1;

$image->getPlaatsImg($id, $num);
}

// Directe filename
elseif ($style == "file")
{
$url = $_SERVER['DOCUMENT_ROOT'] . str_replace('./', '/', $url);
$pos = strrpos($url, '/') + 1;

$path = substr($url, 0, $pos);
$filename = substr($url, $pos);

unset($image);

$image = new ImageEditor($filename, $path);
}

// Secties
elseif ($style == "sectie")
{
$url = $_SERVER['DOCUMENT_ROOT'] . '/img/fotoselectie/' . str_replace(array('./', '/'), array('', ''), $url);
$pos = strrpos($url, '/') + 1;

$path = substr($url, 0, $pos);
$filename = substr($url, $pos);

unset($image);

$image = new ImageEditor($filename, $path);
}

// Resize het plaatje
if ($width > 0 || $height > 0)
{
$image->resize($width, $height);

// Maximale hoogte van 0.7 keer breedte
if ((($image->y) > ($image->x * 0.75)) && $style != "print")
{
if ($image->y < (($image->x * 0.7) + 30))
$image->crop(0, 0, $image->x, ($image->x * 0.7));
else
$image->crop(0, 30, $image->x, ($image->x * 0.7));
}
}

// Zet vergrootglas in de image
if (isset($_GET['vergroot']) && !$image->error)
{
$vergroot_link = $_SERVER['DOCUMENT_ROOT'] . "/img/lightbox/vergroot.png";
$vergroot = @imagecreatefrompng($vergroot_link);

$image->image_overlap($vergroot, $_GET['pos'], $_GET['offset']);
}

if (($image->x >= 300) && ($style == "image" || $style == "print"))
{
$watermerk_link = ($image->x < 500) ? $_SERVER['DOCUMENT_ROOT'] . "/img/watermerk/watermerk_klein.png" : $_SERVER['DOCUMENT_ROOT'] . "/img/watermerk/watermerk_klein.png";
$watermerk = @imagecreatefrompng($watermerk_link);

$image->add_watermark($watermerk);
}

// Teken het plaatje
if (!$image->error)
{
$image->outputImage();
}

?>

jscheuer1
11-23-2009, 11:28 AM
Thanks for the swift reply. If server side image generation seems to be the problem could it be a bandwith issue to/ from the server or a setting on the server itself. eg a slow connection ?

Bandwidth is unlikely to be the problem but I suppose it could be. If so, that's beyond your control. However, unless there is some better way to code make_image (I'm no expert at PHP) that would make absolutely certain that the browser could not under any circumstances stop waiting for the image until it is finished, I think you need to go back to actual images. What I think is happening is that the load on the server is such that it just doesn't complete the image in time. As a result the browser receives a corrupt version of the image.

You could ask in the PHP forum to see if anyone there knows about this issue in IE and can offer either a solution, or confirmation of my suspicion that it just isn't going to work reliably unless real images are used.

In any case, the image fies themselves are rather large byte wise, and should be optimized.