oscommerce2

Lightbox for 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.
  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 Photoand 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><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><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>

Related Posts


7 thoughts on “Lightbox for Product Listings

  1. best blackhat tools

    I’m still learning from you, while I’m making my way to the top as well. I certainly enjoy reading everything that is written on your site.Keep the information coming. I enjoyed it!

    Reply
  2. http://www.thomascharmssaleonline.com/earrings

    Heya i am for the first time here. I came across this board and I find It really useful & it helped me out a lot. I hope to give something back and aid others like you aided me.

    Reply
  3. wedding announcements

    Hi I love your post and it had been therefore informational and I am gonna save it. One factor to mention the Indepth analysis you’ve got done is trully remarkable. Who goes that further mile these days? Well Done Smile simply another tip you canget a Translator for your Worldwide Audience

    Reply
  4. guild wars 2 gold

    Hi my friend! I want to say that this post is awesome, nice written and come with approximately all vital infos. Iˇd like to see more posts like this .

    Reply
  5. A Guide To

    Definitely consider that that you stated. Your favorite justification seemed to be at the net the easiest factor to take into accout of. I say to you, I certainly get irked at the same time as people think about concerns that they just do not recognise about. You controlled to hit the nail upon the top and outlined out the entire thing with no need side effect , people can take a signal. Will probably be back to get more. Thank you

    Reply
  6. Guild Hosting

    Thanks for every other wonderful post. Where else may anyone get that type of info in such an ideal way of writing? I have a presentation next week, and I am at the search for such info.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*