Zen Lightbox addon [Support Thread]

Hello Everyone.

I'm a very new user to Zencart, but after reading what lightbox can do, I thought it sounded great and decided to download the file.

I fear I may have completely installed both lightbox & imagehandler incorrectly.

First problem. The readme instructions ask me to rename some files. Problem is I don't know what my "template" is anymore! I have both cherry_zen and Cherry Zen 1.8 showing up in my files. Is there any way to determine which I'm actually using?

2) When I upload the includes & image folder to my server, do the files need to go directly into the zencart folder on my server? I initially had dropped them into the zencart folder itself, but wasn't sure if that was wrong.

3) Although I can see that lightbox is somewhat working on my website, there are glitches?

- The box size around my images doesn't match up (see link here - http://beautifulexpressions.hwyman.c...products_id=11

- When I added a page to my ezpage - I thought that it was supposed to get a lightbox, but it isn't.
http://beautifulexpressions.hwyman.c...page=page&id=7

Lastly, If someone could please explain how I can use lightbox to create some sort of an image gallery it would be greatly appreciated.

Please forgive me for so many seemingly 'silly' questions, but I'm really that new to all of this! I did backup my site before starting, so hopefully I haven't gone and screwed anything up.

Thanks again!

:smile:

Quote:

---

Originally Posted by thec0wboy

Hello Everyone.

I'm a very new user to Zencart, but after reading what lightbox can do, I thought it sounded great and decided to download the file.

I fear I may have completely installed both lightbox & imagehandler incorrectly.

First problem. The readme instructions ask me to rename some files. Problem is I don't know what my "template" is anymore! I have both cherry_zen and Cherry Zen 1.8 showing up in my files. Is there any way to determine which I'm actually using?

---

in admin go to the tools tab and choose template manager?? something like that, it will show you the template you are currently using

goint to the link I saw nothing using image handler at all neither when i clicked on one of the category links there...after uploading did you go to admin and install it---tools/image handler 2?

Quote:

---

2) When I upload the includes & image folder to my server, do the files need to go directly into the zencart folder on my server?

---

now anytime you upload files from any mod you are uploading the entire folder---that will overwrite your original folder. You open up the folder on your desktop and grab the files in it...upload those to the exact same path as your computer folder has them

like the includes may have a classes folder inside, then you grab the contents of that classes fodler and put them on your server in the exact same folder includes/classes/put your files in there

hope that did not confuse you more---I am best at confusion

Quote:

---

I initially had dropped them into the zencart folder itself, but wasn't sure if that was wrong.

---

you probably want to put them into the images folder---if you have your store files loose then yes but if you hae your store file iin another fodler then they will go into it like store/images you will se it right above the includes folder

Quote:

---

3) Although I can see that lightbox is somewhat working on my website, there are glitches?

- The box size around my images doesn't match up (see link here - http://beautifulexpressions.hwyman.c...products_id=11

- When I added a page to my ezpage - I thought that it was supposed to get a lightbox, but it isn't.
http://beautifulexpressions.hwyman.c...page=page&id=7

---

when I clicked on the image of the airplanes there -- the image came up in the lightbox effect so it is working right. if you mean that sort of drop shadow around your image...that may be the way it is coded in the template...apple zen template has many different features to it and that drop shadow is an image not something in the stylesheet file.

There is a code in the readme tht you can add to your ez-pages where you add the image so you can get the lightbox effect there, I think.
Lastly, If someone could please explain how I can use lightbox to create some sort of an image gallery it would be greatly appreciated.

Quote:

---

Please forgive me for so many seemingly 'silly' questions, but I'm really that new to all of this! I did backup my site before starting, so hopefully I haven't gone and screwed anything up.

Thanks again!

:smile:

---

the best thing you did was backup the store before doing anything...yay you. Keep that up and anytime you get worse problems you will be able to revert back should there not be a fix.

Thanks for the reply :)

I have figured out which template I'm using now which is great.

As for the ez pages. The read-me file mentions that it should work as soon as it's installed?

"EZ-Pages

By default the lightbox effect will be applied to all links that point to images on your EZ-Pages. This functionality can easily be modified via the admin."

So I simply pasted the link to an image on my website in the ez pages area;

<img src="http://www.beautifulexpressions.hwyman.com/images/161520.jpg">

I was hoping that the image in the ez page would magically get the lightbox qualities, but no such luck.

What am I missing?


Although the images on the product page do have the lightobox attributes, the box size has gone wacky on me. The words "larger image" has shifted down, and it isn't centered anymore either?

Help :D

Quote:

---

Originally Posted by thec0wboy

Thanks for the reply :)

I have figured out which template I'm using now which is great.

As for the ez pages. The read-me file mentions that it should work as soon as it's installed?

"EZ-Pages

By default the lightbox effect will be applied to all links that point to images on your EZ-Pages. This functionality can easily be modified via the admin."

So I simply pasted the link to an image on my website in the ez pages area;

<img src="http://www.beautifulexpressions.hwyman.com/images/161520.jpg">

I was hoping that the image in the ez page would magically get the lightbox qualities, but no such luck.

What am I missing?


Although the images on the product page do have the lightobox attributes, the box size has gone wacky on me. The words "larger image" has shifted down, and it isn't centered anymore either?

Help :D

---

EZ page functionality doesn't work immediately on install, Daniel is working on fixing that in the next release. In the meantime, here's a work-around:

instead of

Code:

---

<img src="http://www.beautifulexpressions.hwyman.com/images/161520.jpg">

---

try this

Code:

---

<a href="images/161520.jpg" rel="lightbox"><img src="images/161520.jpg"></a>

---

or, if you must use an absolute link (like you're using now),

instead of

Code:

---

<img src="http://www.beautifulexpressions.hwyman.com/images/161520.jpg">

---

try this:

Code:

---

<a  href="http://www.beautifulexpressions.hwyman.com/images/161520.jpg"  rel="lightbox"><img  src="http://www.beautifulexpressions.hwyman.com/images/161520.jpg"></a>

---

Regarding your issue with the product image and the "larger image" text being wacky, I'm not sure I can help you with that. Sounds like the template/display is being thrown off by a conflict between the actual image size vs. the image size set in your image settings....

Thank you ScriptJunkie,

You're a scholar and a saint :)

The last method you described appears to have worked. I kind of thought that when I clicked on the image, it would expand to a larger one though. It seems like when I click on the pictures now they show up smaller? Any clue where I can change this setting, or does it simply have to do with the original size of the uploaded picture?

Essentially I'd like to have small previews that they can click on and then see the larger image.

I'd also love to make a gallery where they can scroll thru the pictures. Can anyone point me in the right direction on this?

Thanks again :) Zencart forums are fantastic! :clap:

Quote:

---

Originally Posted by thec0wboy

Thank you ScriptJunkie,

You're a scholar and a saint :)

The last method you described appears to have worked. I kind of thought that when I clicked on the image, it would expand to a larger one though. It seems like when I click on the pictures now they show up smaller? Any clue where I can change this setting, or does it simply have to do with the original size of the uploaded picture?

Essentially I'd like to have small previews that they can click on and then see the larger image.

I'd also love to make a gallery where they can scroll thru the pictures. Can anyone point me in the right direction on this?

Thanks again :) Zencart forums are fantastic!

---

Thank you, but I can't take credit :) I just recall having read somewhere on the thread another person had that issue, so I searched for it until I found the solution is all :)

Re: Gallery....check Admin>Configuration>Zen Lightbox> Include Main Image in Gallery - should be set to "true"

Also, you need to follow the image file naming protocol for zen cart. For example:

Main Image: flower.jpg
Additional product images: flower_01.jpg, flower_02.jpg, etc

Re: Lightbox making images smaller instead of larger - you're absolutely right - it should make them larger than the main product image.

Assuming you're not also using any other image modifying addons, There are a few ways to accomplish this.

Method 1:

Change

Code:

---

<a  href="http://www.beautifulexpressions.hwyman.com/images/161520.jpg"  rel="lightbox"><img  src="http://www.beautifulexpressions.hwyman.com/images/161520.jpg"></a>

---

to

Code:

---

<a  href="http://www.beautifulexpressions.hwyman.com/images/161520.jpg"  rel="lightbox"><img src="http://www.beautifulexpressions.hwyman.com/images/161520.jpg" width="125" height="125"></a>

---

Naturally, you'll adjust the width and height size to whatever size you want your thumbnails to be...I just put in 125 and 125 as an example.


Method 2

Another way to accomplish this is to use the zen cart image size folders and suffixes. Tutorial

For example, let's say you want thumbnails on the ez page to be 125z125...you take your image (already sized to 125z125) and name it myImage_MED.jpg and put it in the images/medium folder. Then let's say you want the larger image for the lightbox to be 600x600. You take your image (already sized to 600x600) and name it myImage_LRG.jpg and put it in your images/large folder.

Then, you would write your URL for the ez page like this:

Code:

---

<a  href="http://www.beautifulexpressions.hwyman.com/images/large/myImage (or in your case161520).jpg"  rel="lightbox"><img  src="http://www.beautifulexpressions.hwyman.com/images/medium/myImage (or in your case161520).jpg"></a>

---

Method 3

Lastly, IMHO, the best way to accomplish this is to also install ImageHandler2, because this allows you to use one size image per product (plus any additional images like image_01, image_02, etc). You take the largest image you have for a product (the one you want in the lightbox), and simply upload it to the main images folder. Then use the settings in the IH2 mod to resize the images for you. This way, you don't have to manually create three different sized images per product (large for the light box, medium for your thumbnails and main product image, and small for sideboxes, etc).

If you install IH2, then the first method I gave you (the one that now incorrectly returns smaller images in the light box rather than larger images) will work correctly.

Hope this helps :)

Quote:

---

Originally Posted by thec0wboy

Thanks for the reply :)

I have figured out which template I'm using now which is great.

As for the ez pages. The read-me file mentions that it should work as soon as it's installed?

"EZ-Pages

By default the lightbox effect will be applied to all links that point to images on your EZ-Pages. This functionality can easily be modified via the admin."

So I simply pasted the link to an image on my website in the ez pages area;

<img src="http://www.beautifulexpressions.hwyman.com/images/161520.jpg">

I was hoping that the image in the ez page would magically get the lightbox qualities, but no such luck.

What am I missing?


Although the images on the product page do have the lightobox attributes, the box size has gone wacky on me. The words "larger image" has shifted down, and it isn't centered anymore either?

Help :D

---

ok, I don't think that would make a difference of how the image was added---either html or by the html editor you have in the store...I usually add the images to other pages with the editor and just click the button

but i thought somewhere on that read me it said to use this...cause it is supposed to be built in but it does not seem to work:

Code:

---

<a rel="lightbox" href=http://www.beautifulexpressions.hwyman.com/images/161520.jpg><image width="375" vspace="10" height="164" border="0" align="left" src=http://www.beautifulexpressions.hwyman.com/images/161520.jpg"></a>

---

that should get you the image--sized and where you want it to be--left, right, center and the lightbox. Just remember to adjust the width, height and align to suit your needs

Hi Just installed this on my test site and when I have secondary images should it show next and prev buttons ??

It shows that the main image is 1of2 but no way to see next image is there some other process I need to do to activate this>>
test site link
http://happy-cutters.com/catalog/ind...&products_id=3
thanks

Quote:

---

Originally Posted by rugersmum

Hi Just installed this on my test site and when I have secondary images should it show next and prev buttons ??

It shows that the main image is 1of2 but no way to see next image is there some other process I need to do to activate this>>
test site link
http://happy-cutters.com/catalog/ind...&products_id=3
thanks

---

DOH worked it out the next button only appears when you hover on image and is not visible on load

mmm re my above post i gave had a few comments on this and mainly that it would be better if the next buttons were fixed and not on hover cant this be achieved???
thanks