Open your //cherry_zen/templates/tpl_modules_main_product_image.php file.
Around line 35, DELETE this:
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="javascriptopupWindow(\\\'' . 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>';
}
AND REPLACE IT WITH THIS:
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>\')//--></script>';
} else {
echo '<script language="javascript" type="text/javascript"><!--
document.write(\'<a href="javascriptopupWindow(\\\'' . 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>\')//--></script>';
}
Around line 41 look for this line:
<!-- eof Zen Lightbox v1.4 aclarke 2007-09-15 -->
On the next line insert this code:
Code:
<div id="productMainImage" class="centeredContent back">
Insert this code at the very BOTTOM after the </div> tag:
Code:
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><br />
<div id="productMainImage2" class="centeredContent back"><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>
Now open your //cherry_zen/css/stylesheet.css and insert this into your stylesheet:
Code:
#productMainImage2 {
float:left;
margin: -5px 0 0 10px !important;
margin: -5px 0 0 5px;
}
The first margin entries (-5px) above will move the text up or down relative to the picture depending on the number you use.
Bookmarks