Zen Lightbox addon [Support Thread]

This may have been covered elsewhere ( i seem to recall reading a headline to this effect - but cannot now refind it - if so, sorry to repost):

Is there a way to have a link to an image that has been html hard-coded into a product's description also open using the lightbox effect?

Okay, what am I doing wrong? I uploaded the Lightbox files and ran Install.txt. How do I call lightbox in an image now? I tried adding rel="lightbox" which is what I use in WordPress, but to no avail. Help please?

I see what the deal is now...it automatically does Lightbox on certain pages. Is there a way to add additional pages to this so that images on my mainpage are lightboxed?

Hi folks,

I've been trawling through this thread to try and sort this out but I'm struggling - apologies if I've missed something obvious -

I've got the lightbox installed and it's working ok for the large product images in product listings.

However, I can't get it to work with the extra images on a product - they're still using the standard popup.

I've got all the relevant images loaded to images/, images/large (with _LRG) suffix), and images/medium (with _MED suffix).

Thanks in advance.

I seem to have this problem as well. I have picture 1 as my category image then when I am on the product info page I have a different picture. When i click on the product info image to bring up the large image with lightbox it will bring up my category image instead of the product info image which I am clicking on. Did you ever get a fix for this? Does anyone know how to fix it?

I might have narrowed it down to this file attrib_prod_info.php for me at least. Since I have installed the mod to have attributes replace main images when selected. The code inside of this file looks like this...

<?php
require('includes/application_top.php');

$products_options_values_id = $_REQUEST['products_options_values_id'];
$alt = $_REQUEST['alt'];	
$width = $_REQUEST['width'];	
$height = $_REQUEST['height'];	
$products_id = $_REQUEST['products_id'];	


$sql = "select    pa.attributes_image 
from      " . TABLE_PRODUCTS_ATTRIBUTES . " pa 
where     pa.products_id = '" . (int)$products_id . "'
and       pa.options_values_id = '" . (int)$products_options_values_id ."'";

$account_query = $db->bindVars($sql, ':customersID', $_SESSION['customer_id'], 'integer');
$products_color_image = $db->Execute($sql);

$attributes_image = $products_color_image->fields['attributes_image'];
if($attributes_image!=''){
$image = zen_image('images/'.$attributes_image, $alt, $width, $height);
?>
<?php echo '<a href="javascript:popupWindow(\'' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'products_image_large_additional=' . 'images/'.$attributes_image) . '\')">' . $image . '<br /><span class="imgLink">' . zen_image('images/bigger_picture.jpg', 'larger image', '140', '44') . '</span></a>'; ?>
<?php }?>

And I am pretty sure this is the culprit. I deleted this part

<?php echo '<a href="javascript:popupWindow(\'' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'products_image_large_additional=' . 'images/'.$attributes_image) . '\')">' . $image . '<br /><span class="imgLink">' . zen_image('images/bigger_picture.jpg', 'larger image', '140', '44') . '</span></a>'; ?>
<?php }?>

and everything still worked except when i clicked on the drop down menu and chose a product. Then it gave me an error. So is there a way to change the above code to work with lightbox instead of a generic java popup window?

I am starting to see that this code is also what is causing the broken link smaller image to come up below the main image. You can see this in action here

http://www.wpc-consulting.com/~stxmill/index.php?main_page=product_info&cPath=14_3&products_id=18

The code is

[code]

[\code]

which as you can see has bigger_picture.jpg which is the path to the broken link or at least the file name if you look closely. I don't know how to fix this but I am sure it has to be this file. Anyone have any ideas? I am needing to get rid of the bigger_picture.jpg and would like lightbox to be used for the main image on attributes instead of the popup

Hello everyone,

I installed this mod on ZC 1.3.8a and nothing works. I had to revert back to my original tpl_modules_main_product_image.php.

Can someone please help me ?

thanks
callingrohit

welchyboy:

would like lightbox to be used for the main image on attributes instead of the popup

I just installed Zen Lightbox on my 1.38a cart and it worked like a charm right away. I love it so much, I'm trying to figure out how to use it on the attributes thumbnails. I figure what will get me started is to install a popup attributes module to get it to the point of being accessable or is that wrong... has anyone been able to pull the attribute images into the lightbox?

Thanks

I can't believe it. I got lightbox to work on attribute images, and include them in the gallery. I still can't believe I did it, but it works!!!!

I located this file:

includes/modules/MY_TEMPLATE/attributes.php

I took a snippet of code from "Attribute Pop-Ups" add-on:

					//find large size attribute images. Location must be in /images/large and image name must be image_LRG.ext Mike Scott 070606				
					$array_filename = split("[/\\.]", $products_options->fields['attributes_image']) ;
					$filename = $array_filename[count($array_filename)-2];
					$extension = '.'.$array_filename[count($array_filename)-1];
					$filename = $filename.'_LRG';
					$path = DIR_WS_IMAGES . 'large/attributes/';
					$attribute_image_lrg = $path . $filename. $extension;
					$selected_attrname = $products_options_names->fields['products_options_name'] . ': '.$products_options->fields['products_options_values_name'];

I pasted it into attributes.php around line 481 immediately following this line of code:

                      //              if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= '<br class="clearBoth" />' . "\n";
                        $tmp_attributes_image_row = 1;
                      }

I then modified the following line:

                      $tmp_attributes_image .= '<div class="attribImg">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . '</div>' . "\n";

to look like this:

                  ```

$tmp_attributes_image .= '<div class="attribImg"><a href="' . $attribute_image_lrg . '" rel="lightbox[gallery]">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . '</a></div>' . "\n";

Be sure to have your large attribute images in the "images/large/attributes/" folder, with _LRG as the extension like normal, and it works!

I am just offering this for what it is, something that worked for me.  I had installed the latest 138a cart, and the latest Zen Lightbox and the attributes pop-up code came from its latest version. You should work with the attributes.php file in the YOURTEMPLATE folder so that you can just delete it to uninstall this solution.

:clap:

Kristin

Sounds great congrats!!! I tried but I was unsuccessful. I have the latest zen cart and lightbox 1.4. I currently have my attribute images setup this way. I go to attribute controller and add a picture at the bottom. The images are in images/attributes/
This is to have the images change which works on all the products except for one actually. I followed your post and read over it again and again to make sure. Here is what my portion of attributes.php looks like.

     if ($products_options->fields['attributes_image'] != '') {
                      $tmp_attributes_image_row++;

                      //              if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= '<br class="clearBoth" />' . "\n";
                        $tmp_attributes_image_row = 1;
                      }
					  
					  
					  
					  
					  
					  
					  
					  //find large size attribute images. Location must be in /images/large and image name must be image_LRG.ext Mike Scott 070606				
					$array_filename = split("[/\\.]", $products_options->fields['attributes_image']) ;
					$filename = $array_filename[count($array_filename)-2];
					$extension = '.'.$array_filename[count($array_filename)-1];
					$filename = $filename.'_LRG';
					$path = DIR_WS_IMAGES . 'large/attributes/';
					$attribute_image_lrg = $path . $filename. $extension;
					$selected_attrname = $products_options_names->fields['products_options_name'] . ': '.$products_options->fields['products_options_values_name'];
					  
					  
					  
					  
					  
					  
$tmp_attributes_image .= '<div class="attribImg"><a href="' . $attribute_image_lrg . '" rel="lightbox[gallery]">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . '</a></div>' . "\n";
                    }
                  }

I then added a picture into the images/large/attributes folder with the image_LRG.jpg format. I see now difference. I am hoping I am missing something because I would really love for this to work.

Can I see a link to your site. Do you have any ideas what I could have done wrong?

I have just installed zen light box, it works fine except a slight problem with my main product image drop shadow height, it seems to have included an extra <br /> under the image...

I have been trying various test, and still could not get rid of it, does anyone know where to look to resolve this bug? i am on cherry zen template, thanks.

Test site where you can see this bug:
http://kuholdings.com/estore/index.php?main_page=product_info&cPath=3_10&products_id=17

Any suggestion would be much appreciated!!

Maybe this will help you out with the drop shadow. I found the fix on the form somewhere I forgot where...lol
lightbox_fix for cherry template

welchyboy:

Sounds great congrats!!! I tried but I was unsuccessful. I have the latest zen cart and lightbox 1.4. I currently have my attribute images setup this way. I go to attribute controller and add a picture at the bottom. The images are in images/attributes/
This is to have the images change which works on all the products except for one actually. I followed your post and read over it again and again to make sure. Here is what my portion of attributes.php looks like.

 if ($products_options->fields['attributes_image'] != '') {
                  $tmp_attributes_image_row++;

                  //              if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                  if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                    $tmp_attributes_image .= '<br class="clearBoth" />' . "\n";
                    $tmp_attributes_image_row = 1;
                  }
				  
				  
				  
				  
				  
				  
				  
				  //find large size attribute images. Location must be in /images/large and image name must be image_LRG.ext Mike Scott 070606				
				$array_filename = split("[/\\.]", $products_options->fields['attributes_image']) ;
				$filename = $array_filename[count($array_filename)-2];
				$extension = '.'.$array_filename[count($array_filename)-1];
				$filename = $filename.'_LRG';
				$path = DIR_WS_IMAGES . 'large/attributes/';
				$attribute_image_lrg = $path . $filename. $extension;
				$selected_attrname = $products_options_names->fields['products_options_name'] . ': '.$products_options->fields['products_options_values_name'];

$tmp_attributes_image .= '<div class="attribImg"><a href="' . $attribute_image_lrg . '" rel="lightbox[gallery]">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . '</a></div>' . "\n";
}
}

> 
> 
> I then added a picture into the images/large/attributes folder with the image_LRG.jpg format. I see now difference. I am hoping I am missing something because I would really love for this to work. 
> 
> Can I see a link to your site. Do you have any ideas what I could have done wrong?

With what you posted, it looks like what I did, but if you have something else affecting it like a module I do not have installed, then I don't know what to tell you... here is the staging area I am building the site on, and a product where you can see this in action, so you can see the effect of what I did (this link will only be good for another week or so while I finish building the site before I point the main domain to it):
<http://test.phylliseig.com/index.php?main_page=product_info&cPath=6_11_15&products_id=175>

Give me your URL where this is not working for you, and I can take a look at it and see if something jumps out at me. you can PM me if you want.

K

Also, welchyboy, I don't think this lightbox is compatible with your main-image-switch-on-pulldown-change module you have installed. I think you need to choose one or the other way to display your attributes. I think you'd have to write some custom code if you really find it necessary to try to use both. The lightbox needs a straight url in the a tag, it won't work if the url is written out using javascript, which is something the pop-up attributes module does (it's that last line of code I posted where all the link and image magic happens), and that is what I'm seeing on your cornmeal page:

OK I understand...I am not able to do the coding and I have come to terms with this and I am OK with having Lightbox for the main images then a pop up image for the attribute images. The majority of them do this however do you have any idea why this is happening...

http://www.wpc-consulting.com/~stxmill/index.php?main_page=product_info&cPath=14_3&products_id=15

If you go and click on an attribute and it switches which is good. Then you try and click to make it larger (the attribute image) some of them I have counted about 5 do not come up with anything. No popup of any kind. Any thoughts on this. If i can get this working then I will be happy.

I'm not using any pop-ups on my site, just Lightbox, so I don't know anything about mixing the popups and the switching attributes on pulldown change, sorry. There might be a thread that talks about doing this where other people have done it and can help.

I will look around. Thanks

OK I gave up on the lightbox function with my current mod to have the attribute images replace the main image. But I got to working on why 5 of my products weren't working. I figured out that is has to do with the name of the image. For some reason if is has an apostrophe "granny's" for example for some reason it will mess things up. Not sure why it only did it to a few of them. But with the problem products i renamed the image without the apostrophe and it fixed it. Also I had a few images named with the "&" symbol which also didn't fly so well. So now I am at least able to get all the pop ups to show up when clicked which is a GREAT thing. I am happy. Thanks for all the help. I didn't get everything I wanted but it is functional and I am happy. Again thanks for ALL the help.

:clap: Awsome Contribution! Thank you!

I was able to Install Lightbox successfully the first time :blink: . I then went ahead to install Image Handler 2. The uploading of the images with IH2 was a breeze, and the second images show up well on Lightbox. The problem that I am having, is that the IH2 rollover feature does not work. I notice that when I rollover an image I get an error ( on IE ) on the lower left browser window.
I tried Installing IH2 alone and the hover effect works fine, so it is when combining these 2 contributions when I get an issue.

Here is a link to one of my test sites. I will greatly apreciate any suggestions or links to find an appropriate solution.

http://store.fransxm.com/store/