JQuery Lightbox for OSCommerce Product Listings

Add a JQuery Lightbox to the OSCommerce OSC to CSSv2 product listings.

Products listing:
Demo

New Products listing:
Demo

  1. Add a extra field the products table in the database.
    ALTER TABLE `products` ADD `products_image_large` VARCHAR( 64 ) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL AFTER `products_image_list`

  2. Make two sets of all your product images.
    One set should be about 100px by 100px, and another set about 300px by 300px. You probably already have a set of small images in the field products.products_image. Then using phpMyAdmin or similar enter the references to the large images into the new field, p.products_image_large.
    valid email message
  3. Upoad all images to the catalog/images folder.
  4. Add these references to the head of catalog/index.php. In OSC to CSS this will be just above the references to template_top.php.

    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <!--pretty photo-->
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
    animationSpeed: 'normal',
    padding: 30,
    opacity: 0.5,
    showTitle: true,
    allowresize: true,
    counter_separator_label: '/',
    theme: 'light_rounded',
    hideflash: false,
    wmode: 'opaque',
    autoplay: true,
    modal: false,
    changepicturecallback: function(){},
    callback: function(){}
    });
    });
    </script>

    note: if you are already using JQuery you will not need to add the reference to the main JQuery file.

  5. go to Pretty Photo and down load the pretty photo package. Extract the files and upload three files and one folder to your site in the following structure:
    • js/jquery.js
    • js/jquery.prettyPhoto.js
    • css/prettyPhoto.css
    • images/prettyPhoto

  6. Open catalog index.php
    change:

    case 'PRODUCT_LIST_IMAGE':
    $select_column_list .= 'p.products_image,';
    break;

    to:

    case 'PRODUCT_LIST_IMAGE':
    // add large image field to query
    $select_column_list .= 'p.products_image, p.products_image_large,';
    break;

    This adds the new field holding the references to your large images to the existing query in index.php

  7. Open includes/modules/product_listings.php
    change

    $lc_text = '&nbsp;<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>&nbsp;';

    to

    $lc_text = '<a rel="prettyPhoto" title="'.$listing['products_name'].'" href="' . tep_href_link(DIR_WS_IMAGES . $listing['products_image_large'], $listing['products_name']) . '" >' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '<br/><span class="small">(click to enlarge)</span></a>';

  8. To add the lightbox to the new products module, open includes/module/new_products.php
    change:

    <div class="pl-image"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image_list'], $new_products['products_name']) . '</a></div>

    to:

    <div class="pl-image"><a rel="prettyPhoto" title="'.$new_products['products_name'].'" href="' . tep_href_link(DIR_WS_IMAGES . $new_products['products_image_extra'], $new_products['products_name']) . '" >' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '<br/><span class="small">(click to enlarge)</span></a></div>