Zen Lightbox addon [Support Thread]

[Quimbly]

Hoping someone can help me here...

I'm just putting together a super simple implementation of this add-on on my own. I suspect, that the problem I'm having would have had to be resolved by others, so I'm hoping they can help.

I tried Lightbox, but am now using Slimbox, as it's smaller, and displays long title text nicer in the popups than LightBox.

The only changes I made were as follows:

In html_header.php, I added:

<link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="slimbox/js/mootools.js"></script>
<script type="text/javascript" src="slimbox/js/slimbox.js"></script> 

And my tpl_modules_main_product_image.php file now looks like:

<?php require(DIR_WS_MODULES . zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?> 
<div id="productMainImage" class="centeredContent back">

<?php
  echo '<a rel="lightbox" href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '</a>';
?>
</div>

Couldn't really get much simpler. When I click on the image, the Slimbox popup appears, but it just wait indefinitely. The exactly same thing happened when I used LightBox instead.

Does anyone know why the image is NOT loading?

[lina0962]

Right now I have product image named as test.jpg. and additional image as test_demo.jpg.

Lightbox works perfect for test.jpg, but when I click the small image of test_demo.jpg, a pop up window showed up and showed the full-size image of test_demo.jpg.

How to make lightbox work on additional images? Thanks!

[lina0962]

I copied 'additional_images.php' from the lightbox installation and place it under includes/modules/your-template.

I do see the additional images on the product pages but not with the Lightbox.

Please help me - I have tried to find any solution in this thread but didn't find a clear answer...

[davewest]

Right now I have product image named as test.jpg. and additional image as test_demo.jpg.

Aditional images work by adding a number to them, test.jpg, test_01.jpg, test_02.jpg and so on...

I do see the additional images on the product pages but not with the Lightbox.

Please help me - I have tried to find any solution in this thread but didn't find a clear answer...

follow the tutorial on creating and using images
https://www.zen-cart.com/tutorials/index.php?article=58

[smartauto24]

The main product images popups twice, ready frustrating.
I checked this post and found many people have the same situation.
Anybody help

[rhydo]

i would like to know, how can i preload the product image to cache on page load itself. So when the user click ,it will show the image immediatly even on slow internet connection.

[creation]

Morning,

I have just downloaded the ZEn lightbox / I use 1.9.3c also just upgraded.

I think/hope I have carried out the installation correctly.. the line is in the config etc but there is no actiona t all. Images still open in the typical new window.

Appreciate if some kind soul could have alook as I am new at all this. Thanks in advance.

(By the way, do we all have ....sideboxes/tpl_links_select.php because I cannot find it anywhere.

www.creationsdelphine.com/catalogue/

[DarkAngel]

Morning,

I have just downloaded the ZEn lightbox / I use 1.9.3c also just upgraded.

I think/hope I have carried out the installation correctly.. the line is in the config etc but there is no actiona t all. Images still open in the typical new window.

what do you mean it is in config.....do you mean the admin section?

did you upload the files to the exact same place as where the zip had them?

(By the way, do we all have ....sideboxes/tpl_links_select.php because I cannot find it anywhere.

www.creationsdelphine.com/catalogue/

you have that file if you have the link manager installed...otherwise I don't have it either...lol

what template are you using?

[DarkAngel]

The main product images popups twice, ready frustrating.
I checked this post and found many people have the same situation.
Anybody help

when mine opens up from the small image it shows that same image as the first one to allow viewers to see the larger size.

otherwise you might try admin/configuration/lightbox and uncheck the setting to show the first image in slidewhow....something like that. see if that works

[DarkAngel]

Right now I have product image named as test.jpg. and additional image as test_demo.jpg.

Lightbox works perfect for test.jpg, but when I click the small image of test_demo.jpg, a pop up window showed up and showed the full-size image of test_demo.jpg.

How to make lightbox work on additional images? Thanks!

if you are speaking of the two stores in your signature then....

you also have image handler installed.

both of these items have the same additional images file but with their own information.

copy the following code into a file then save it and replace the one you have (in your override folder --- the folder with your templates name in includes/modules/your template folder)...it should give you the lightbox and still have the IH2 working right.

<?php
/**
 * additional_images module
 *
 * Prepares list of additional product images to be displayed in template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: additional_images.php 6132 2007-04-08 06:58:40Z drbyte $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
if (!defined('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE')) define('IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE','Yes');
$images_array = array();

if ($products_image != '') {
  // prepare image name
  $products_image_extension = substr($products_image, strrpos($products_image, '.'));
  $products_image_base = str_replace($products_image_extension, '', $products_image);

  // if in a subdirectory
  if (strrpos($products_image, '/')) {
    $products_image_match = substr($products_image, strrpos($products_image, '/')+1);
    //echo 'TEST 1: I match ' . $products_image_match . ' - ' . $file . ' -  base ' . $products_image_base . '<br>';
    $products_image_match = str_replace($products_image_extension, '', $products_image_match) . '_';
    $products_image_base = $products_image_match;
  }

  $products_image_directory = str_replace($products_image, '', substr($products_image, strrpos($products_image, '/')));
  if ($products_image_directory != '') {
    $products_image_directory = DIR_WS_IMAGES . str_replace($products_image_directory, '', $products_image) . "/";
  } else {
    $products_image_directory = DIR_WS_IMAGES;
  }

  // Check for additional matching images
  $file_extension = $products_image_extension;
  $products_image_match_array = array();
  if ($dir = @dir($products_image_directory)) {
    while ($file = $dir->read()) {
      if (!is_dir($products_image_directory . $file)) {
        if (substr($file, strrpos($file, '.')) == $file_extension) {
          //          if(preg_match("/" . $products_image_match . "/i", $file) == '1') {
          if(preg_match("/" . $products_image_base . "/i", $file) == 1) {
            if ($file != $products_image) {
              if ($products_image_base . str_replace($products_image_base, '', $file) == $file) {
                //  echo 'I AM A MATCH ' . $file . '<br>';
                $images_array[] = $file;
              } else {
                //  echo 'I AM NOT A MATCH ' . $file . '<br>';
              }
            }
          }
        }
      }
    }
    if (sizeof($images_array)) {
      sort($images_array);
    }
    $dir->close();
  }
}

// Build output based on images found
$num_images = sizeof($images_array);
$list_box_contents = '';
$title = '';

if ($num_images) {
  $row = 0;
  $col = 0;
  if ($num_images < IMAGES_AUTO_ADDED || IMAGES_AUTO_ADDED == 0 ) {
    $col_width = floor(100/$num_images);
  } else {
    $col_width = floor(100/IMAGES_AUTO_ADDED);
  }

  for ($i=0, $n=$num_images; $i<$n; $i++) {
    $file = $images_array[$i];
    $products_image_large = str_replace(DIR_WS_IMAGES, DIR_WS_IMAGES . 'large/', $products_image_directory) . str_replace($products_image_extension, '', $file) . IMAGE_SUFFIX_LARGE . $products_image_extension;
    // bof Zen Lightbox 2008-12-11 aclarke
    if (function_exists('handle_image')) {
      $flag_has_large = true;
    } else {
    // eof Zen Lightbox 2008-12-11 aclarke
    $flag_has_large = file_exists($products_image_large);
    // bof Zen Lightbox 2008-12-11 aclarke
    }
    // eof Zen Lightbox 2008-12-11 aclarke
    $products_image_large = ($flag_has_large ? $products_image_large : $products_image_directory . $file);
    $flag_display_large = (IMAGE_ADDITIONAL_DISPLAY_LINK_EVEN_WHEN_NO_LARGE == 'Yes' || $flag_has_large);
    $base_image = $products_image_directory . $file;
    $thumb_slashes = zen_image($base_image, addslashes($products_name), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
    // bof Zen Lightbox 2008-12-11 aclarke
    if (function_exists('handle_image')) {
    // remove additional single quotes from image attributes (important!)
    $thumb_slashes = preg_replace("/([^\\\\])'/", '$1\\\'', $thumb_slashes);
    }
    // eof Zen Lightbox 2008-12-11 aclarke
    $thumb_regular = zen_image($base_image, $products_name, SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT);
    $large_link = zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large);

    // Link Preparation:
    // bof Zen Lightbox 2008-12-11 aclarke
    if (ZEN_LIGHTBOX_STATUS == 'true') {
      if (ZEN_LIGHTBOX_GALLERY_MODE == 'true') {
        $rel = 'lightbox-g';
      } else {
        $rel = 'lightbox';
      }
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="' . zen_lightbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="' . $rel . '" title="' . addslashes($products_name) . '">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
    } else {
    // eof Zen Lightbox 2008-12-11 aclarke
    $script_link = '<script language="javascript" type="text/javascript"><!--' . "\n" . 'document.write(\'' . ($flag_display_large ? '<a href="javascript:popupWindow(\\\'' . $large_link . '\\\')">' . $thumb_slashes . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>' : $thumb_slashes) . '\');' . "\n" . '//--></script>';
    // bof Zen Lightbox 2008-12-11 aclarke
    }
    // eof Zen Lightbox 2008-12-11 aclarke

    $noscript_link = '<noscript>' . ($flag_display_large ? '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'pID=' . $_GET['products_id'] . '&pic=' . $i . '&products_image_large_additional=' . $products_image_large) . '" target="_blank">' . $thumb_regular . '<br /><span class="imgLinkAdditional">' . TEXT_CLICK_TO_ENLARGE . '</span></a>' : $thumb_regular ) . '</noscript>';

    //      $alternate_link = '<a href="' . $products_image_large . '" onclick="javascript:popupWindow(\''. $large_link . '\') return false;" title="' . $products_name . '" target="_blank">' . $thumb_regular . '<br />' . TEXT_CLICK_TO_ENLARGE . '</a>';

    $link = $script_link . "\n      " . $noscript_link;
    //      $link = $alternate_link;

    // List Box array generation:
    $list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
    'text' => "\n      " . $link);
    $col ++;
    if ($col > (IMAGES_AUTO_ADDED -1)) {
      $col = 0;
      $row ++;
    }
  } // end for loop
} // endif

?>

hope it helps