Good Point! I was getting pretty tired last night while coding this and totally overlooked this.
I revamped all the code and inserted a table to get the best results. The stylesheet mod is no longer necessary.
OK, here goes again...
To fix the problem of the drop shadow surrounding the "larger image" link text under the product image picture when using zen_lightbox:
Open your //cherry_zen/templates/tpl_modules_main_product_image.php file.
Around line 15 look for this line:
<div id="productMainImage" class="centeredContent back">
Just ABOVE this line insert this code:
<table><tr><td align="center">
Around line 35, DELETE this:
Code:
Code:
if (ZEN_LIGHTBOX_STATUS == 'true') {
echo '<script language="javascript" type="text/javascript"><!--
document.write(\'<a href="' . zen_lightbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="lightbox[gallery]" title="' . addslashes($zen_lightbox_products_name) . '">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>\')//--></script>';
} else {
echo '<script language="javascript" type="text/javascript"><!--
document.write(\'<a href="javascript popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>\')//--></script>';
}
[FONT=monospace]
AND REPLACE IT WITH THIS:[/FONT]
Code:
if (ZEN_LIGHTBOX_STATUS == 'true') {
echo '<script language="javascript" type="text/javascript"><!--
document.write(\'<a href="' . zen_lightbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="lightbox[gallery]" title="' . addslashes($zen_lightbox_products_name) . '">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '</div></a></td></tr>\')//--></script>';
} else {
echo '<script language="javascript" type="text/javascript"><!--
document.write(\'<a href="javascript:popupWindow(\\\'' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '\\\')">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '</div></a></td></tr>\')//--></script>';
}
Now look for this line:
<!-- eof Zen Lightbox v1.4 aclarke 2007-09-15 -->
Just UNDER this line insert this code:
Code:
<div id="productMainImage" class="centeredContent back">
[FONT=monospace] Insert this code at the very BOTTOM after the </div> tag:
[/FONT]
Code:
<tr><td algin="center"><span class="imgLink"><a href="<? zen_lightbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="lightbox[gallery]" title="' . addslashes($zen_lightbox_products_name); ?>">larger image</a></span></div></td></tr></table>
That's it! Your link text will now appear perfectly centered below the picture drop shadow as it should.
If you want to save time, I created a fix file that you can download here from one of my websites.
Just upload the "includes" folder to your website.
Bookmarks