Zen Lightbox addon [Support Thread]

Hi, ZC user,
How to configure the Zen Lightbox to show images in the full size when somebody click on the smaller picture?
:blush:

You just need to follow the install instructions contained in the package.

I correctly install a Zen Lightbox, byt I can't configure to show my images in try size! Hay to do thet???
:no:

Hi

Has anyone used zen lightbox to display attribute images - they are currently displayed in a pop up box ? LB works nicely with main image and additional product images but we want to display attribute images (colour variants of main product) - I'm guessing that its a coding change to remove the call to display the popup box and replace with the LB - any clues?

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?

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!

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...

lina0962:

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...

lina0962:

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

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

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.

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.

https://www.creationsdelphine.com/catalogue/

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.

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?

smartauto24:

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

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

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!

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

Firstly I am using classic as the basis of my template. Am upgraded to 1.9.3c. I have checked the upload and to the nest of my limited knowledge, the files are correct.

The Zen lightbox heading was added to admin>config.

There are now a number of issues developing:

1. on some prodcut info sections, more than one image is coming up - in category/Green Leaves.. two have three or more. The first item in category/Autumn... has two. The original image still opens on command to anew window as before. The others open to a full new page.
   In the html page it shows these images as 'additional images' how generated I do not know.
   Deleting the images and deleting all images off the server then reloading the images thru admin>products>categories has no effect.

2. None of the images open with the usual Lightbox style at all.

Appreciate some assistance.

Thanks in advance.

John

i have sent you a personal message John.

thanks
Mary

I am using Zenlightbox with 1.37 , i would like to know, how can i preload the Main image (Product info page) to the cache on page-load itself. So when the user click on the image ,image will pop-up in lightbox immediatly even on slow internet connection.

rhydo:

I am using Zenlightbox with 1.37 , i would like to know, how can i preload the Main image (Product info page) to the cache on page-load itself. So when the user click on the image ,image will pop-up in lightbox immediatly even on slow internet connection.

not real sure what you mean but when lightbox works it automatically opens up when you click the image, not before.

you can set some settings in admin section (configuration)

a link would be great to see what you experience

DarkAngel:

not real sure what you mean but when lightbox works it automatically opens up when you click the image, not before.

you can set some settings in admin section (configuration)

a link would be great to see what you experience

Dark angel,

Yes, Normally when the user click on the image , image start to download from the server - so delay is there to pop up the image.

Instead , i would like to download the main image automatically on page load and keep it ready for user click. So on user click , it will show the image very fast.

I think Sparkfun is using this method to speed up the loading .

http://www.sparkfun.com/commerce/product_info.php?products_id=9823

kindly test it.

rhydo:

Dark angel,

Yes, Normally when the user click on the image , image start to download from the server - so delay is there to pop up the image.

Instead , i would like to download the main image automatically on page load and keep it ready for user click. So on user click , it will show the image very fast.

I think Sparkfun is using this method to speed up the loading .

http://www.sparkfun.com/commerce/product_info.php?products_id=9823

kindly test it.

try this:

go to your admin part of the store then

go under configuration to zen lightbox

once you get to that window change the setting in "overlay fade duration" it is normally set at 400 but lower it to 200 and it pops quicker.

play with the number until you find the right one for you

also try the "resize Duration" setting too