Zen Lightbox addon [Support Thread]

Love this thing... so glad that it was made a contrib.

I'd like to build a new feature into it. I am setting up a photo gallery cart, and its very frustrating for users to go back to the main menu to select a new/prev product, and then view the image.

I'd like to provide a next/prev product link while lightbox is active. This would enable users to quickly slideshow/preview other products, without having to return to the product info page. Has anyone done this? Does anyone have and advice about the best way to go about it?

Thanks for your input and time,

Nathan

I'm pretty sure that those features are built into the Lightbox code, but they may not be implemented specifically in this contrib.

I think this is what you're looking for.

http://www.huddletogether.com/projects/lightbox2/

I am having this issue with the overlapping of the css horizontal menu when opening up an image with light box, tried reading thru post but no significant answer. The same thing happens with the "secured" side box, you can barely see it on the right of image.

Here is image of issue:

The url is: http://tinyurl.com/2cxv23

Thanks,

Gerry

I have noticed that on this page:

http://tinyurl.com/297jgt

When clicking on large image, the lightbox opens as usual and the css dropdown menu (not css horizontal, sorry), disappears in the background. How so?

Gerry

Zinfandel:

Question:
Regardless of whether it's an IH2 zoom image being displayed, or the faded out background with lightbox, the menu text behind shines right thru!!

Before I go off to kill another day experimenting with the code, does anyone know why this might be the case and how to change it??

Thanks!

How did you fix this issue, you're store (http://tinyurl.com/2268ze) doesn't have the problem anymore, I have it now:
http://tinyurl.com/2dsyhl

You're css menu disappears, with lightbox engaged.

Gerry

The "Next" and "Previous" button is cover part of the image, how can I solve this problem?

http://sonicviewdiscount.com/Shops/index.php?main_page=product_info&products_id=5

take a look at image 6, and 7.

thanks

gcampos:

How did you fix this issue, you're store (http://tinyurl.com/2268ze) doesn't have the problem anymore, I have it now:
http://tinyurl.com/2dsyhl

You're css menu disappears, with lightbox engaged.

Gerry

I too have the problem of the menu over the top of the lightbox?
anyone?

cheers
Steve

ok gcampus here's the fix ive just done it and all is 100% :)

you need to change the following in the lightbox css:-

change the z-index on this section to 1000:

#lightbox {
left:0;
line-height:0;
position:absolute;
text-align:center;
top:40px;
width:100%;
z-index:100;
}

and in this section again to 1000:

#overlay {
-moz-opacity:0.6px;
background-color:#000;
filter:alpha(opacity=60);
height:500px;
left:0;
opacity:0.6px;
position:absolute;
top:0;
width:100%;
z-index:90;
}

:clap:
enjoy the lightbox :)

Symmo

Since part of the controversy and problem with this excellent mod is that it does not conform to the template over ride practice, how drastic would the rewrite be in order to make it fall under the complete template over ride structure? Granted it would not work if you switched back to the classic or default template but that may very wel be a reason that you do switch back templates is for troubleshooting purposes.

I have played with this mod enough now that I have finally given my 1.3.7 a bug and can't find it. Now when I click any product image it opens a new window full screen and displays the picture. This is the behavior I get now since I have removed all the files of the mod from my cart. Somehow I left either an extra file in the structure or a file was inadvertently modified.

Does anyone have a concise set of directions for adding this mod to a freshly installed 1.3.7 cart without IH2?

symmo:

ok gcampus here's the fix ive just done it and all is 100% :)

you need to change the following in the lightbox css:-

change the z-index on this section to 1000:

#lightbox {
left:0;
line-height:0;
position:absolute;
text-align:center;
top:40px;
width:100%;
z-index:100;
}

and in this section again to 1000:

#overlay {
-moz-opacity:0.6px;
background-color:#000;
filter:alpha(opacity=60);
height:500px;
left:0;
opacity:0.6px;
position:absolute;
top:0;
width:100%;
z-index:90;
}

:clap:
enjoy the lightbox :)

Symmo

do the trick it did, thanks. now on to more figuring... :ohmy:

Gerry

can someone take a look at the attached image and help ? The next and back button is over lapping the image which is kind annoying.

thanks

taydu:

can someone take a look at the attached image and help ? The next and back button is over lapping the image which is kind annoying.

thanks

That should be easy, just expand the image by 25-50px on a white background. shouldnt take but a few minutes. If you want send me the images and I'll fix them for you.

Gerry

i know i could do that, but i have a lot of picture. What I want to do is edit the lightbox template to shift the image down the top so it won't over lap but i dónt know where in the template to edit.

taydu:

i know i could do that, but i have a lot of picture. What I want to do is edit the lightbox template to shift the image down the top so it won't over lap but i dónt know where in the template to edit.

Well then it looks like you'll have to play with the css files for that purpose, open up the includes/templates/YOUR_Template/css/stylesheet_lightbox.css and look for :

#prevLink,#nextLink {
background:transparent url(../../template_default/images/lightbox/blank.gif) no-repeat;
display:block;
height:100%;
width:63px;
}

#prevLink {
background-image:url(../../template_default/images/lightbox/prevlabel.gif);
background-position:left 0;
background-repeat:no-repeat;
float:left;
left:0;
}

#nextLink {
background-image:url(../../template_default/images/lightbox/nextlabel.gif);
background-position:right 0;
background-repeat:no-repeat;
float:right;
right:0;
}
```I dont have multiple images to show the next/prev buttons so wouldnt know what to change, but this is the area.

Good luck.

Gerry

thanks i'll give it a try

Anyone know how to get multiple images working with this?

I used the filename xx.jpg for one of my products, I upload xx_01.jpg to the same main dir where xx is, and I still don't see anything, am I doing something wrong?

teebo:

Anyone know how to get multiple images working with this?

I used the filename xx.jpg for one of my products, I upload xx_01.jpg to the same main dir where xx is, and I still don't see anything, am I doing something wrong?

Try these:

How to add multiple images:
https://www.zen-cart.com/tutorials/index.php?article=58

Image Preparation:
https://www.zen-cart.com/tutorials/index.php?article=224

Gerry

#prevLink,#nextLink {
background:transparent url(../../template_default/images/lightbox/blank.gif) no-repeat;
display:block;
height:100%;
width:63px;
position:absolute;
top:-25px;
}

seem to work but there a tiny problem, please look at attached image ...

How can I make so i have a complete white box, not just the two rabbit ears

Does anyone know how to do this image effect?

As you can see popup ajax images are on top of the page instead of opening another page. Does anyone have a solution like the sample site below and explain how please?

http://secretsoftheboudoir.co.uk/ind...oduc ts_id=35

Thanks

oavs:

Does anyone know how to do this image effect?

As you can see popup ajax images are on top of the page instead of opening another page. Does anyone have a solution like the sample site below and explain how please?

http://secretsoftheboudoir.co.uk/ind...oduc ts_id=35

Thanks

Use the ZEN lightbox, this is the thread you're in, or are you refering to the fade in/out which I would like to know "how to".

Ps the actual link is:
http://secretsoftheboudoir.co.uk/index.php?main_page=product_info&cPath=12_3&products_id=35

Gerry