[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

[paddy_uk2007]

hi that didnt work it just messed up the layout of my page

does any one now how to add this one to your ite as its better then the first one with out messing up my page layout thanks

http://www.huddletogether.com/projects/lightbox2/

[parco inc]

thats a good post havent used it but maybe it can help some people out.