[Tutorial] Display image with LightBox script

[FalseKnight]

Go to: "http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm"
and download lightbox.zip then unzip, upload to your hosting where zen-cart is installed

ex:

public_html/lightbox/close.gif
public_html/lightbox/lightbox.css
public_html/lightbox/lightbox.js and other files included

Then do steps following:
- open file lightbox.css >> find

#overlay{ background-image: url(yourLink); }

edit yourLink (url(http://yoursite.com/lightbox/overlay.png))
and find:

background-image: url(http://yoursite/lightbox/blank.gif);

edit it...
and

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://yoursite/lightbox/overlay.png", sizingMethod="scale");

2. open file lightbox.js
then find:

var loadingImage = 'http://yoursite/lightbox/loading.gif';
var closeButton = 'http://yoursite/lightbox/close.gif';

save it

3. still connect to your server by fpt
go to includes/templates/your-template/templates/tpl_modules_main_product_image.php
find:

<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<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>

end replace by script below

<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="'.$products_image_medium.'" rel="lightbox">'.zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT).'</a>'; ?>');
//--></script>

4. go to: includes/templates/your-template/common/html_header.php
find (before):

$directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^print/', '.css');

sort($directory_array);

while(list ($key, $value) = each($directory_array)) {

echo '<link rel="stylesheet" type="text/css" media="print" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
}

and replace =: (after)

$directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^print/', '.css');

sort($directory_array);

while(list ($key, $value) = each($directory_array)) {

echo '<link rel="stylesheet" type="text/css" media="print" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";

$link="http://yoursite/lightbox/lightbox.css";
echo '<link rel="stylesheet" type="text/css" media="screen" href="'.$link.'" />'."\n";

}

then at ahead of </head> tag
add:

<?php echo '<script src="http://yoursite/lightbox/lightbox.js"></script>' ?>

meaning:
<?php echo '<script src="http://yoursite/lightbox/lightbox.js"></script>' ?>
</head>
i hope you understand
i am trying write down by english
my english so bad
if have problem you can post it here, i will help you
you can visit following link for see demo site:
Demo: http://shoponline.com.vn/index.php?m...0f0eab2189abb4
click on television image and see

thanks