IE Error with Lightbox

mongomike · February 16, 2009

Hi there,

I have just installed lightbox on my site, the problem is it doesn't work correctly.

I get this error in IE but not firefox:

Internet Explorer cannot open the Internet site - Operation aborted

It is something to do with this code:

I believe the reason it isn't working is because of another contribution I have installed.

Lightbox works when I remove The Java Script for that contribution.

Anyone experienced the same problem before?

Many Thanks in advance

liranaz · February 17, 2009

any one please help us

i have that same problem

please is very critical

railroadguy · March 2, 2009

any one please help us
i have that same problem

please is very critical

I have the same problem but in IE 6 it is says that there are secure and nonsecure items on the page, do you want to display both. I answer Yes or No and the page looks normal. It's in the lightbox code but nothing points to the non-secure side of the store. (The whole cart is on https)

Dan

Whiskers · March 9, 2009

If you guys haven't sorted this yet, I just had the same problem on installation. I found that by putting the latest update on the add-on list it fixed it. Have a look here:

http://addons.oscommerce.com/info/6517

It's just a slight change to the way the lins of text were set out.

I stand corrected. It just seems to work randomly now!? Sorry. Back to the drawing board!

May 29, 2009

Here is what I found out about the problem:

Official Microsoft Statement

Why do I receive the following error message when I visit a Web page in Internet Explorer?
Internet Explorer cannot open the Internet site http://<Web site>.com. Operation aborted.

Answer: Internet Explorer 7 cannot display a particular element on a Web page on that Web site.

More information for developers:

This problem occurs because a child container HTML element contains script that...This problem occurs because a child container HTML element contains script that tries to modify the parent container element of the child container. The script tries to modify the parent container element by using either the innerHTML method or the appendChild method.

For example, this problem may occur if a DIV element is a child container in a BODY element, and a SCRIPT block in the DIV element tries to modify the BODY element that is a parent container for the DIV element.

Workaround 1

To work around this problem, write script blocks that modify only closed containers or that modify only the script's immediate container element. To do this, you can use a placeholder to close the target container, or you can move the script block into the container that you want to modify.

To resolve this problem, use one of the following methods.

Method 1: Modify the parent element

Move the SCRIPT block into the scope of the BODY element. This is the container that the script is trying to modify.
<html>
 <body>
  <div>
  </div>
  <script type="text/Javascript">
	   document.body.innerHTML+="sample text";
  </script>
 </body>
</html>
Method 2: Modify a closed container element

Add a closed container as a placeholder in the parent container element. Then, modify the new closed container with a script block.
<html>
 <body>
  <div id="targetContainer">
  </div>
  <div>
  <script type="text/Javascript">
	   document.getElementById('targetContainer').innerHTML+="sample text";
  </script>
  </div>
 </body>
</html>
Back to the top

Example 2

In this example, a SCRIPT block that is inside a deeply nested TD container element tries to modify a parent container BODY element by using the appendChild method.
<html>
 <body>
  <table>
			<tr>
					 <td>
							 <script type="text/Javascript">
											  var d = document.createElement('div');
											  document.body.appendChild(d);
							 </script>
					 </td>
			 </tr>
  </table>
 </body>
</html>
To resolve this problem, move the SCRIPT block into the BODY element.
 
<html>
 <body>
  <table>
			<tr>
					<td>
				   </td>
			 </tr>
  </table>
  <script type="text/Javascript">
							  var d = document.createElement('div');
							  document.body.appendChild(d);
				 </script>
 </body>
</html>
Back to the top

Source for full post + suggested workarounds: Article ID: 927917 Why do I receive an "Operation aborted" error message when I visit a Web page in Internet Explorer?

2nd Source: IE MS Blog

Dealing with IE "Operation Aborted". Or, how to Crash IE
It's easy to create runtime errors in JavaScript. But it's not every day you find a way to crash the runtime entirely.

The problem is you can't append to the BODY element from script that isn't a direct child to the BODY element.

If you research it enough, you will find that some people ran into this when they had script inside a <table>. The proposed fix was to move the script outside the <table> element. But that would only work if the <table> was a direct child to the body! If the table is inside yet another element, it will still fail.

And of course, it's ok if your script isn't a direct child of BODY as long as it doesn't execute inline while the page is being parsed. So for our example here, you could fix it by moving the script to the top or bottom of the body, moving it after the body, or putting it in a function and calling it from window.onload or in response to some other event.

With AJAX apps becoming ever more popular, DOM manipulation is becoming more commonplace, and I fear more and more people may run into this. Hopefully this helps.

Source for full post: infinitiesloop

So if I understand correctly, the lightbox script refers to some lines between <body> tags, and when the body part is not yet fully loaded, you get the operation aborted error.

There are a number of solutions around the web that should fix the problem:

1) Put defer tags in the script: defer='defer'

I have tried this, but by doing so my productpage locks up. I don't know if what I have done was correct so I do not know if it can work.

Here is what I tried with various lines:

2) Move script from the <header> to near the end of bodytag </body>

Have tried this but it does not work. The layout of the page completely dissappears, as does the image/lightbox module.

3) windows.onload

I have not tried this because I don't know how this works or how I should go about it.

From the comments on infinitiesloop blog

# re: Dealing with IE "Operation Aborted". Or, how to Crash IE
Friday, November 03, 2006 7:02 PM by InfinitiesLoop

frb -- waiting for window.onload is a safe bet. However there are times when that is not good enough. The DOM itself is ready for manipulation before window.onload, because window.onload waits for all binary content to also be downloaded. Imagine you have some huge picture to download or sound file -- the page will sit there, ready for manipulation while it downloads. So certainly sometimes window.onload isn't soon enough.

Some browsers have a non standard event that states the dom is ready (IE does not, but putting code at the bottom of the body or using a script defer tag are just some of the tricks you can use to simulate one).

I have added the content from my productinfo.php page and highlighted the lightbox items in red.

The above solutions and ms workarounds may or may not work, my knowledge is far too limited to work with this.

The solution may be easy for someone who knows what he is doing.

By outlining the problem I hope someone with more experience and knowledge will know how to make this work.

product_info.php contents:

<?php
/*
 $Id: product_info.php 1739 2007-12-20 00:52:16Z hpdl $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

 require('includes/application_top.php');

 require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_INFO);

 $product_check_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
 $product_check = tep_db_fetch_array($product_check_query);
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<?php
/*** Begin Header Tags SEO ***/
if ( file_exists(DIR_WS_INCLUDES . 'header_tags.php') ) {
 require(DIR_WS_INCLUDES . 'header_tags.php');
} else {
?>
 <title><?php echo TITLE; ?></title>
<?php
}
/*** End Header Tags SEO ***/
?>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript"><!--
function popupWindow(url) {
 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
izable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,le
ft=150')
}
[color="#FF0000"]//--></script>
<? /*
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
*/ ?>
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>[/color]

</head>
<body>
<?php /*** Begin Header Tags SEO ***/ ?>
<a name="<?php echo $header_tags_array['title']; ?>"></a>
<?php /*** End Header Tags SEO ***/ ?>
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->

<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">
 <tr>
<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
</table></td>
<!-- body_text //-->
<td width="100%" valign="top"><?php echo tep_draw_form('cart_quantity', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params(array('action')) . 'action=add_product')); ?><table border="0" width="100%" cellspacing="0" cellpadding="0">
<?php
 if ($product_check['total'] < 1) {
?>
  <tr>
	<td><?php new infoBox(array(array('text' => TEXT_PRODUCT_NOT_FOUND))); ?></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <!--- BEGIN Header Tags SEO Social Bookmarks -->
  <?php if (HEADER_TAGS_DISPLAY_SOCIAL_BOOKMARKS == 'true')
   include(DIR_WS_MODULES . 'header_tags_social_bookmarks.php');
  ?>
  <!--- END Header Tags SEO Social Bookmarks -->
  <tr>
	<td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
	  <tr class="infoBoxContents">
		<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
		  <tr>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			<td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></td>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
		  </tr>
		</table></td>
	  </tr>
	</table></td>
  </tr>
<?php
 } else {
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
$product_info = tep_db_fetch_array($product_info_query);

tep_db_query("update " . TABLE_PRODUCTS_DESCRIPTION . " set products_viewed = products_viewed+1 where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and language_id = '" . (int)$languages_id . "'");

if ($new_price = tep_get_products_special_price($product_info['products_id'])) {
  $products_price = '<s>' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</s> <span class="productSpecialPrice">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';
} else {
  $products_price = $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id']));
}

if (tep_not_null($product_info['products_model'])) {
  $products_name = $product_info['products_name'] . '<br><span class="smallText">[' . $product_info['products_model'] . ']</span>';
} else {
  $products_name = $product_info['products_name'];
}
?>
  <tr>
	<td><table border="0" width="100%" cellspacing="0" cellpadding="0">
	  <tr>
		<?php /*** Begin Header Tags SEO ***/ ?>
		<td valign="top"><h1><?php echo $products_name; ?></h1></td>
		<td align="right" valign="top"><h1><?php echo $products_price; ?></h1></td>
		<?php /*** End Header Tags SEO ***/ ?>

	  </tr>
	</table></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td class="main">
<?php
if (tep_not_null($product_info['products_image'])) {
//++++ QT Pro: Begin Changed code
?>
	  <table border="0" width="100%" cellspacing="0" cellpadding="2">
		<tr>
		  <td class="smallText">
<?php
//++++ QT Pro: End Changed Code
?>
	  <table border="0" cellspacing="0" cellpadding="2" align="right">
		<tr>
		  <td align="center" class="smallText">



<? /*		

[color="#FF0000"]<script type="text/javascript"><!--
document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>[/color]
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
</noscript>
*/ ?>
<script type="text/javascript"><!--
document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
</noscript>


		  </td>
		</tr>
	  </table>
<?php
}
?>
	  <p><?php echo stripslashes($product_info['products_description']); ?></p>
<?php
//++++ QT Pro: Begin Changed code
if (tep_not_null($product_info['products_image'])) {
?>
		  </td>
		</tr>
	  </table>
<?php
}
//++++ QT Pro: End Changed Code
$products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");
$products_attributes = tep_db_fetch_array($products_attributes_query);
if ($products_attributes['total'] > 0) {
//++++ QT Pro: Begin Changed code
  $products_id=(preg_match("/^\d{1,10}(\{\d{1,10}\}\d{1,10})*$/",$HTTP_GET_VARS['products_id']) ? $HTTP_GET_VARS['products_id'] : (int)$HTTP_GET_VARS['products_id']); 
  require(DIR_WS_CLASSES . 'pad_' . PRODINFO_ATTRIBUTE_PLUGIN . '.php');
  $class = 'pad_' . PRODINFO_ATTRIBUTE_PLUGIN;
  $pad = new $class($products_id);
  echo $pad->draw();
}

//Display a table with which attributecombinations is on stock to the customer?
if(PRODINFO_ATTRIBUTE_DISPLAY_STOCK_LIST == 'True'): require(DIR_WS_MODULES . "qtpro_stock_table.php"); endif;

//++++ QT Pro: End Changed Code

?>
<?php

if (OPTIONS_AS_IMAGES_ENABLED == 'false'){	//mh if statement options as images

$products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");
$products_attributes = tep_db_fetch_array($products_attributes_query);
if ($products_attributes['total'] > 0) {
?>
	  <table border="0" cellspacing="0" cellpadding="2">
		<tr>
		  <td class="main" colspan="2"><?php echo TEXT_PRODUCT_OPTIONS; ?></td>
		</tr>
<?php
  $products_options_name_query = tep_db_query("select distinct popt.products_options_id, popt.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
  while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
	$products_options_array = array();
	$products_options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_name, pa.options_values_price, pa.price_prefix from " . TABLE_PRODUCTS_ATTRIBUTES . " pa, " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pa.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pa.options_id = '" . (int)$products_options_name['products_options_id'] . "' and pa.options_values_id = pov.products_options_values_id and pov.language_id = '" . (int)$languages_id . "'");
	while ($products_options = tep_db_fetch_array($products_options_query)) {
	  $products_options_array[] = array('id' => $products_options['products_options_values_id'], 'text' => $products_options['products_options_values_name']);
	  if ($products_options['options_values_price'] != '0') {
		$products_options_array[sizeof($products_options_array)-1]['text'] .= ' (' . $products_options['price_prefix'] . $currencies->display_price($products_options['options_values_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) .') ';
	  }
	}

	if (isset($cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']])) {
	  $selected_attribute = $cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']];
	} else {
	  $selected_attribute = false;
	}
?>
		<tr>
		  <td class="main"><?php echo $products_options_name['products_options_name'] . ':'; ?></td>
		  <td class="main"><?php echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute); ?></td>
		</tr>
<?php
  }
?>
	  </table>
<?php
}
}//mh options as images	ednds if statement
?>

<?php
//Options as Images. This whole php clause needs to be added
if (OPTIONS_AS_IMAGES_ENABLED == 'true') include ('options_images.php'); 
?>
	</td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
<?php
$reviews_query = tep_db_query("select count(*) as count from " . TABLE_REVIEWS . " where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "'");
$reviews = tep_db_fetch_array($reviews_query);
if ($reviews['count'] > 0) {
?>
  <tr>
	<td class="main"><?php echo TEXT_CURRENT_REVIEWS . ' ' . $reviews['count']; ?></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
<?php
}

if (tep_not_null($product_info['products_url'])) {
?>
  <tr>
	<td class="main"><?php echo sprintf(TEXT_MORE_INFORMATION, tep_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($product_info['products_url']), 'NONSSL', true, false)); ?></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
<?php
}

if ($product_info['products_date_available'] > date('Y-m-d H:i:s')) {
?>
  <tr>
	<td align="center" class="smallText"><?php echo sprintf(TEXT_DATE_AVAILABLE, tep_date_long($product_info['products_date_available'])); ?></td>
  </tr>
<?php
} else {
?>
  <tr>
	<td align="center" class="smallText"><?php echo sprintf(TEXT_DATE_ADDED, tep_date_long($product_info['products_date_added'])); ?></td>
  </tr>
<?php
}
?>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
	  <tr class="infoBoxContents">
		<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
		  <tr>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			<td class="main"><?php // echo '<a href="' . tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()) . '">' . tep_image_button('button_reviews.gif', IMAGE_BUTTON_REVIEWS) . '</a>'; ?></td>
			<td class="main" align="right"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_image_submit('button_in_cart.gif', IMAGE_BUTTON_IN_CART); ?></td>
			<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
		  </tr>
		</table></td>
	  </tr>
	</table></td>
  </tr>
  <tr>
	<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
	<td>
<?php
if ((USE_CACHE == 'true') && empty($SID)) {
  echo tep_cache_also_purchased(3600);
} else {
  include(DIR_WS_MODULES . FILENAME_ALSO_PURCHASED_PRODUCTS);
}
 }
?>
	</td>
  </tr>
  <?php /*** Begin Header Tags SEO ***/ ?>
  <tr>
   <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
  </tr>
  <tr>
   <td class="smallText" align="center"><?php echo TEXT_VIEWING; ?> 
   <?php echo '<a title="' . $header_tags_array['title'] . '" href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $product_info['products_id'], 'NONSSL') . '"/# ' . $header_tags_array['title'] . '">' . $header_tags_array['title']; ?></a></td>
  </tr>
  <?php /*** End Header Tags SEO ***/ ?>
</table></form></td>
<!-- body_text_eof //-->
<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_BOXES . 'youtube.php'); ?>
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
</table></td>
 </tr>
</table>
<!-- body_eof //-->

<!-- footer //-->
<//?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
<!-- footer_eof //-->
<br>


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8204194-3");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

lucasabogado · May 29, 2009

You tried to include the content of href="lightbox/lightbox.css" <link rel="stylesheet" type="text/css" media="screen">

within <link rel="stylesheet" type="text/css" href="stylesheet.css"> and leave this alone?

on mine woks fine

sorry for my english regards

May 29, 2009

You tried to include the content of href="lightbox/lightbox.css" <link rel="stylesheet" type="text/css" media="screen">
within <link rel="stylesheet" type="text/css" href="stylesheet.css"> and leave this alone?

on mine woks fine

sorry for my english regards

I have now tried the following:

1) I have moved complete lightbox script just below href="lightbox/lightbox.css" <link rel="stylesheet" type="text/css" media="screen"> like this:

<link rel="stylesheet" type="text/css" href="stylesheet.css">
//--></script>
<? /*
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
*/ ?>
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
<script type="text/javascript"><!--
function popupWindow(url) {
 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
izable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,l
e
ft=150')
}

2) I copied the contents of lightbox.css into stylesheet.css like this:

stylesheet.css:

/*** Begin Header Tags SEO ***/
h1 {
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
color: #000;
}
h2 {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
margin-bottom: 0;
padding-bottom: 0;
color: #000;
}
/*** End Header Tags SEO ***/

/*** Lightbox ***/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/*** Lightbox ***/

When this alone did not work, I tried removing the line href="lightbox/lightbox.css" <link rel="stylesheet" type="text/css" media="screen">, and moved the script lines:

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
<script type="text/javascript"><!--
function popupWindow(url) {
 window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
izable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,l
e
ft=150')
}

Maybe if you would explain step-by-step what should be done or give an example. This is because I don't have much understanding on how to manipulate code. I am willing to try.

lucasabogado · May 30, 2009

in stylesheet make this

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}

#lightbox img{ width: auto; height: auto;}

#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#imageContainer>#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }

#imageData #caption{ font-weight: bold; }

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }

#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 10%; height: 500px; background-color: #000; }

I think it's good

and in product_info.php make this changes

to

/catalog/product_info.php

2. Copy the info from lightbox.css to stylesheet.css Microsoft Explorer dont like two css files in one go.

Take away the line

3. Take away the old popupscript in /catalog/product_info.php

at line 27

remove

function popupWindow(url) {

window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res

izable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,le

ft=150')

}

//--></script>

at line 108

remove

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id']) . '\\\')">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

//--></script>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

</noscript>

and replace with

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>

Hope this will help

regards

May 31, 2009

Thank you for giving me step-by-step instructions.

First I followed the steps and used the lines from your post. By doing this lightbox did not work anymore. I think it is because our script lines are a bit different, for example, I have the <script type="text/javascript" src="lightbox/builder.js"></script>, and when I remove this, lightbox does not function anymore.

So, then I followed the steps again, and used the script that was originally in my product_info.php.

?>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>

</head>

Further down in productinfo.php left it like this.

<? /*		

<script type="text/javascript"><!--
document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
</noscript>
*/ ?>
<script type="text/javascript"><!--
document.write('<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="lightbox" title="'.$product_info['products_name'].'" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');
</noscript>

This made Lightbox work again, but I still get the error in internet explorer. And now firefox seems to have trouble, because it opens the image on the bottom of the page. I really appreciate the effort you put into writing these steps. I am not sure if merging lightbox.css into stylesheet.css works in my case, unless I am doing something wrong.

June 2, 2009

I solved the issue by moving the script displayed below just before </body> tag.

This removes the 'operation aborted' error you get in IE.

<? /*
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
*/ ?>
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects"></script>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="lightbox/builder.js"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>

</body>

IE Error with Lightbox

Recommended Posts

mongomike

Link to comment

Share on other sites

liranaz

Link to comment

Share on other sites

railroadguy

Link to comment

Share on other sites

Whiskers

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

lucasabogado

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

lucasabogado

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Archived

Browse

Activity