Zen Lightbox addon [Support Thread]

mc12345678:

Gotcha. There is LOTS of code involved to give us this highly useful, functional, open source product. Bound to be something minor somewhere that could be different/incorrectly present something. Being a questioning type individual, still wonder if there is something in ZLB that should be modified to allow capturing of that change to the core/default code.

I guess though, with the above fix, the problem that many have lived with will go away, and if someone really wants the model info to show up adjacent to the product name in ZLB while on the review page or elsewhere, then they can add that variable if they so desire.

Good catch everyone, good code review, and glad to see the community pitch in.

Why??? This issue REALLY ISN'T a ZLB issue.. Activating ZLB simply reveals an issue in Zen Cart's core code. The core code used to manage the display of the product name and model number on the "read reviews" page SHOULD match the code used for the "write reviews" page. If it does, then ZLB won't behave incorrectly on the "read reviews" page. The ONLY thing ZLB should do on ANY of the reviews pages (and does do) is to display the product image inside a lightbox. There's no change to ZLB required.. a change to the Zen Cart core code IS needed, and the only change to ZLB should be an instruction in the ZLB readme that this change needs to be made ONLY if the shopowners uses reviews and model numbers on their products..

The code change I posted SHOULD be included in the Zen Cart core, and I will report my findings on this to the admin to that effect.

DivaVocals:

Not a ZLB issue or TPP issue.. See my post above this.. It's a Zen Cart core code issue which is "aggravated" by ZLB..

Ultimately ZLB code messed with Zen Stock Code :P

rbarbour:

change the code:

/includes/modules/pages/product_reviews/header_php.php

find:

if (zen_not_null($review->fields['products_model'])) {
$products_name = $review->fields['products_name'] . '<br /><span class="smallText">[' . $review->fields['products_model'] . ']</span>';
} else {
$products_name = $review->fields['products_name'];
}

> 
> change to:
> ```php
  
  $products_name = $review->fields['products_name'];

  if ($review->fields['products_model'] != '') {
    $products_model = '<br /><span class="smallText">[' . $review->fields['products_model'] . ']</span>';
  } else {
    $products_model = '';
  }

You apparently missed where I already posted this EXACT same change..:smile: (see a few posts above yours on this page: http://www.zen-cart.com/showthread.php?45314-Zen-Lightbox-addon-Support-Thread&p=1216069#post1216069)

I also included a detailed explanation for the change..

DivaVocals:

You apparently missed where I already posted this EXACT same change..:smile: I also included a detailed explanation for the change..

Yep sure did, back to the Jack and tables for me!

rbarbour:

Ultimately ZLB code messed with Zen Stock Code :P

Because the stock code is incorrect to begin with..

DivaVocals:

and here is the corrected class code.. Tested this and it works perfectly..

jQuery(function($) {
$("a[rel^='lightbox']").slimbox({<?php require_once(DIR_FS_CATALOG . DIR_WS_CLASSES . 'zen_lightbox/options.php'); ?>}, function(el)
{
return [el.href, el.title /* + '<br /><a href="' + el.href + '">Download this image</a>'*/];
}, function(el) {
[B] $("#productMainImageReview a").removeAttr("rel");[/B]
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
<?php if (ZEN_LIGHTBOX_CLOSE_IMAGE == 'true' || ZEN_LIGHTBOX_PREV_NEXT == 'true') { echo ("$('#lbPrevLink').addClass('prevNoHover'); $('#lbNextLink').addClass('nextNoHover');");}?>
});
//--></script>

> 
> **What this change does:**
> IF you are using TPP and have the reviews tab turned on, this will  prevent the reviews page default image from treated like an additional  product image and being grouped in with the rest of your product images  in the lightbox.
> 
> The issue is MUCH MORE obvious when you have a main product image and no  additional images.. Because the reviews page image is being treated as  an additional image, the net effect is that the lightbox will show 1 of 2  images. (the "second" image being the product reviews page image)

Sadly there's an addendum to this... so while YES this code stops ZLB from treating the image on the "read reviews" and "write reviews" pages as an additional images so they are no longer in the lightbox on the product info page, it appear to BREAK the lightbox function on the "read reviews" and "write reviews" pages. In fact with this code in place the image on the "read reviews" and "write reviews" pages doesn't even open up in a standard Zen Cart popup window. Will need to do a bit more testing..

DivaVocals:

Sadly there's an addendum to this... so while YES this code stops ZLB from treating the image on the "read reviews" and "write reviews" pages as an additional images so they are no longer in the lightbox on the product info page, it appear to BREAK the lightbox function on the "read reviews" and "write reviews" pages. In fact with this code in place the image on the "read reviews" and "write reviews" pages doesn't even open up in a standard Zen Cart popup window. Will need to do a bit more testing..
Sample link to demonstrate the behavior I am describing: https://www(dot)laserdiscvault(dot)com/Laserdiscs-Not-on-DVD/Previously-Viewed/5-Fingers-Laserdisc-1952-1384-80/Reviews

Click the "larger image" link.. Note that the image doesn't open in a lightbox effect or even in a default image popup either.. Instead, it opens the actual image file. The product info pages work just fine.. the issue is only on the "read reviews" and "write reviews" pages..

Because I posted a similar class file fix to the Zen Colorbox support thread (to fix the SAME issue), it should be noted that the Zen Colorbox module doesn't have the same issue with the class file fix in place.

Here's the difference on a site using Zen Colorbox: http://eitestsite(dot)eyeitalia(dot)com/shop/index.php?main_page=product_reviews&products_id=331
Click the "larger image" link, and note that the image opens with the lightbox effect working as expected.

Unless a solution for this is found, I will probably swap Zen Lightbox for Zen Colorbox on this site..

Wanted to share my findings with the community though..

DivaVocals:

Sample link to demonstrate the behavior I am describing: https://www(dot)laserdiscvault(dot)com/Laserdiscs-Not-on-DVD/Previously-Viewed/5-Fingers-Laserdisc-1952-1384-80/Reviews

Click the "larger image" link.. Note that the image doesn't open in a lightbox effect or even in a default image popup either.. Instead, it opens the actual image file. The product info pages work just fine.. the issue is only on the "read reviews" and "write reviews" pages..

Because I posted a similar class file fix to the Zen Colorbox support thread (to fix the SAME issue), it should be noted that the Zen Colorbox module doesn't have the same issue with the class file fix in place.

Here's the difference on a site using Zen Colorbox: http://eitestsite(dot)eyeitalia(dot)com/shop/index.php?main_page=product_reviews&products_id=331
Click the "larger image" link, and note that the image opens with the lightbox effect working as expected.

Unless a solution for this is found, I will probably swap Zen Lightbox for Zen Colorbox on this site..

Wanted to share my findings with the community though..

Have you changed something since posting this? Appears that both show up in a different "holder", I don't see any additional images attached to the main image(s), and I can't tell if there is something "added" to the name or not. I will say that the shape of the corners is different than what I have and I haven't looked yet to see what would "cause" or "allow" the beveled corners instead of the actual box shape. But once again, don't see the problem... :)

mc12345678:

Have you changed something since posting this? Appears that both show up in a different "holder", I don't see any additional images attached to the main image(s), and I can't tell if there is something "added" to the name or not. I will say that the shape of the corners is different than what I have and I haven't looked yet to see what would "cause" or "allow" the beveled corners instead of the actual box shape. But once again, don't see the problem... :)

Not sure what you mean.. The second example I posted (http://eitestsite(dot)eyeitalia(dot)com/shop/index.php?main_page=product_reviews&products_id=331) was to show the difference between how Zen Colorbox works CORRECTLY after the class file change when you click the "larger image" link on the review pages. I've made no changes to that site since posting the link, let alone a change which would be relevant to the issue I speak of. The rounded corners on the images is not an issue it is a stylesheet change which is "allowed" via CSS. The lightbox effect was always rounded on this site (it is also a stylesheet change - which is "allowed" via CSS).

The first site demonstrates the issue: https://www(dot)laserdiscvault(dot)com/Laserdiscs-Not-on-DVD/Previously-Viewed/5-Fingers-Laserdisc-1952-1384-80/Reviews
After making the change to the class file as previously posted (http://www.zen-cart.com/showthread.php?45314-Zen-Lightbox-addon-Support-Thread/page341&p=1215927#post1215927) when you click the "larger image" link the image it self is displayed.. when you click the "larger image" link it SHOULD result in the image appearing inside the lightbox effect or AT LEAST the default image popup. However, neither is the case.

Again here is a summary of the issue:
IF you are using TPP AND have the reviews tab turned on AND you have ZLB install, the reviews page default image is treated like an additional product image when you view the images on the product info page. So when you view the images on the product info page it appears as if the main image is counted twice.

The issue is MUCH MORE obvious when you have a main product image and NO additional images.. Because the reviews page image is being treated as an additional image, the net effect is that the lightbox will show 1 of 2 images. (the "second" image being the product reviews page image)

Making the change to the ZLB class file as previously posted (http://www.zen-cart.com/showthread.php?45314-Zen-Lightbox-addon-Support-Thread/page341&p=1215927#post1215927) DOES fix this issue (stops ZLB from counting the reviews image when viewing the images on the product info page), but it creates another with the "larger image" link on the review pages ("read reviews" and "write reviews" pages). (Again as described above and is demonstrated here: https://www(dot)laserdiscvault(dot)com/Laserdiscs-Not-on-DVD/Previously-Viewed/5-Fingers-Laserdisc-1952-1384-80/Reviews)

Not sure what is not clear here.. please re-read this post: http://www.zen-cart.com/showthread.php?45314-Zen-Lightbox-addon-Support-Thread&p=1216096#post1216096

I'll see if I can find my original posts describing the issue the class file change I posted was supposed to solve, but I think this is covered here.. Let me know what is not clear.. but the rounded corners on the lightbox or the images aren't the issue or even a cause of the issue.. and you WON'T see additional images when you click the "larger image" link on the REVIEWS page... (you're not supposed to.. and that is also not the issue I am describing here) additional images only show on the product info page..

DivaVocals:

Not sure what you mean.. The second example I posted (http://eitestsite(dot)eyeitalia(dot)com/shop/index.php?main_page=product_reviews&products_id=331) was to show the difference between how Zen Colorbox works CORRECTLY after the class file change when you click the "larger image" link on the review pages. I've made no changes to that site since posting the link, let alone a change which would be relevant to the issue I speak of. The rounded corners on the images is not an issue it is a stylesheet change which is "allowed" via CSS. The lightbox effect was always rounded on this site (it is also a stylesheet change - which is "allowed" via CSS).

The first site demonstrates the issue: https://www(dot)laserdiscvault(dot)com/Laserdiscs-Not-on-DVD/Previously-Viewed/5-Fingers-Laserdisc-1952-1384-80/Reviews
After making the change to the class file as previously posted (http://www.zen-cart.com/showthread.php?45314-Zen-Lightbox-addon-Support-Thread/page341&p=1215927#post1215927) when you click the "larger image" link the image it self is displayed.. when you click the "larger image" link it SHOULD result in the image appearing inside the lightbox effect or AT LEAST the default image popup. However, neither is the case.

Again here is a summary of the issue:
IF you are using TPP AND have the reviews tab turned on AND you have ZLB install, the reviews page default image is treated like an additional product image when you view the images on the product info page. So when you view the images on the product info page it appears as if the main image is counted twice.

The issue is MUCH MORE obvious when you have a main product image and NO additional images.. Because the reviews page image is being treated as an additional image, the net effect is that the lightbox will show 1 of 2 images. (the "second" image being the product reviews page image)

Making the change to the ZLB class file as previously posted (http://www.zen-cart.com/showthread.php?45314-Zen-Lightbox-addon-Support-Thread/page341&p=1215927#post1215927) DOES fix this issue (stops ZLB from counting the reviews image when viewing the images on the product info page), but it creates another with the "larger image" link on the review pages ("read reviews" and "write reviews" pages). (Again as described above and is demonstrated here: https://www(dot)laserdiscvault(dot)com/Laserdiscs-Not-on-DVD/Previously-Viewed/5-Fingers-Laserdisc-1952-1384-80/Reviews)

Not sure what is not clear here.. please re-read this post: http://www.zen-cart.com/showthread.php?45314-Zen-Lightbox-addon-Support-Thread&p=1216096#post1216096

I'll see if I can find my original posts describing the issue the class file change I posted was supposed to solve, but I think this is covered here.. Let me know what is not clear.. but the rounded corners on the lightbox or the images aren't the issue or even a cause of the issue.. and you WON'T see additional images when you click the "larger image" link on the REVIEWS page... (you're not supposed to.. and that is also not the issue I am describing here) additional images only show on the product info page..

Welp, what's not clear here, is why aren't you seeing a lightbox when I am. So, I went to the site location (https://www(dot)laserdiscvault(dot)com/Laserdiscs-Not-on-DVD/Previously-Viewed/5-Fingers-Laserdisc-1952-1384-80/Reviews), I see the laserdisc image, just below that a clickable link to show a larger image. When I click on either of those, the background darkens, a white window expands with a "circle-of-thought" while it processes, then the image of the laserdisc appears towards the "top" part of the new light colored area, leaving just enogh room to have some info at the bottom. This info appears to be the title/name of the laserdisc. In the lower right corner is a close button.

So again, the part that is confusing me is why do I see that (and I consider what I described a light box), but you don't? I've tried it on both desktop and mobile, and while desktop is far faster (like instant almost), they both have provided the same result.

mc12345678:

Welp, what's not clear here, is why aren't you seeing a lightbox when I am. So, I went to the site location (https://www(dot)laserdiscvault(dot)com/Laserdiscs-Not-on-DVD/Previously-Viewed/5-Fingers-Laserdisc-1952-1384-80/Reviews), I see the laserdisc image, just below that a clickable link to show a larger image. When I click on either of those, the background darkens, a white window expands with a "circle-of-thought" while it processes, then the image of the laserdisc appears towards the "top" part of the new light colored area, leaving just enogh room to have some info at the bottom. This info appears to be the title/name of the laserdisc. In the lower right corner is a close button.

So again, the part that is confusing me is why do I see that (and I consider what I described a light box), but you don't? I've tried it on both desktop and mobile, and while desktop is far faster (like instant almost), they both have provided the same result.Well how about that..:laugh:

Well then NEVERMIND.. Dunno what happened.. but d@mned if this ain't working..

Need coffee..

NOW...

Carry-on..:smile:

Hi all,
First time posting, long time reading :blush:

I've slowly done my own site over the last couple of years and managed to figure out most things ( thanks to you guys here) but I'm out of my depth with this one.
I've installed the lightbox but having an issue with displaying the images.
When an image on the products page/s is clicked, it enlarges and displays part of the image at the bottom of the screen
Link http://evorc.com.au/index.php?main_page=product_info&cPath=0&products_id=2

Any help on this would be greatly appreciated :cool:

Looks rather interesting doesn't it...sorry have to joke at times to stay semi-sane.

Have you made sure that all your lightbox files are in their correct locations. I notice that none of them open into a light box.

What do you have your setting at in the admin section.

I also noticed that your header image is duplicating itself too.

open the zip and compare the contents to the server files to make sure they are in the right folders ---then as a safe measure reupload them to each respective folder.

sometimes the files get caught up in some ftp vortex that we do not see and appear to upload correctly but really get corrupted a bit.

see if that helps

Jason Cox:

Hi all,
First time posting, long time reading :blush:

I've slowly done my own site over the last couple of years and managed to figure out most things ( thanks to you guys here) but I'm out of my depth with this one.
I've installed the lightbox but having an issue with displaying the images.
When an image on the products page/s is clicked, it enlarges and displays part of the image at the bottom of the screen
Link http://evorc.com.au/index.php?main_page=product_info&cPath=0&products_id=2

Any help on this would be greatly appreciated :cool:

DarkAngel:

Looks rather interesting doesn't it...sorry have to joke at times to stay semi-sane.

Have you made sure that all your lightbox files are in their correct locations. I notice that none of them open into a light box.

What do you have your setting at in the admin section.

I also noticed that your header image is duplicating itself too.

open the zip and compare the contents to the server files to make sure they are in the right folders ---then as a safe measure reupload them to each respective folder.

sometimes the files get caught up in some ftp vortex that we do not see and appear to upload correctly but really get corrupted a bit.

see if that helps

Looking over the page coe, I would agree with DarkAngel that there may be some issue with the file(s) uploaded. The effect is rather unusual and appears to be that the image(s) load to the full screen/full height.

Forgot to mention, don't let that be your last post! :)

Restricting Image Display Size Width to Screen Size Width (or browser width)?

Is this possible?

The reason is, I am putting ultra high resolution images for my products since most devices are HiDpi/Retina now. So right now, images are opening according to their result ion and running off the screen. I am sure there is a way to modify the code to get browser width and display in to that size.

Change the dimensions of your large images.. > sle39lvr:

Restricting Image Display Size Width to Screen Size Width (or browser width)?

Is this possible?

The reason is, I am putting ultra high resolution images for my products since most devices are HiDpi/Retina now. So right now, images are opening according to their result ion and running off the screen. I am sure there is a way to modify the code to get browser width and display in to that size.

I cannot do that, for the reasons I listed already. For example, 2000x2000 image, I want to display in a 1000x1000 window (or smaller if the browser window width is smaller). I guess I will find the code where it picks up image width and height and divide by 2.

sle39lvr:

I cannot do that, for the reasons I listed already. For example, 2000x2000 image, I want to display in a 1000x1000 window (or smaller if the browser window width is smaller). I guess I will find the code where it picks up image width and height and divide by 2.
Umm, kinda hate to say it, but if you use this plugin to accomplish what you are intending, you will have done what you have said you can not do.

The help provided identified the image type that must be modified to suit your needs. Basically before the image is directed to be shown, you will want to modify the max dimensions of the large image to be no larger than the screen display, which should force the image to be recalculated/remade in the cache directory. Be prepared though to have your storage file space increase/fluctuate as a result. If however, you want a 2000x2000 image to always show at 1000x1000 all you need to do is adjust your admin settings for IH4 and it will do the rest of the work for you.

mc12345678:

If however, you want a 2000x2000 image to always show at 1000x1000 all you need to do is adjust your admin settings for IH4 and it will do the rest of the work for you.

Could you elaborate on this please?

sle39lvr:

I cannot do that, for the reasons I listed already. For example, 2000x2000 image, I want to display in a 1000x1000 window (or smaller if the browser window width is smaller). I guess I will find the code where it picks up image width and height and divide by 2.

mc12345678:

Umm, kinda hate to say it, but if you use this plugin to accomplish what you are intending, you will have done what you have said you can not do.

The help provided identified the image type that must be modified to suit your needs. Basically before the image is directed to be shown, you will want to modify the max dimensions of the large image to be no larger than the screen display, which should force the image to be recalculated/remade in the cache directory. Be prepared though to have your storage file space increase/fluctuate as a result. If however, you want a 2000x2000 image to always show at 1000x1000 all you need to do is adjust your admin settings for IH4 and it will do the rest of the work for you.
Exactly.. why upload a 2000 x 2000 image if the desired display dimensions are 1000 x 1000.. Change the image settings for the large image to 1000h 1000w and then Zen Cart or IH4 (if installed) will take care of the rest..

However on smaller displays (like say a tablet or smartphone) a 1000 x 1000 image will over flow the edge of the display.. THIS requires that Zen Lightbox be responsive, and this kind of functionality is just not supported with the current version of Zen Lightbox or any other lightbox module available.