Zen Lightbox addon [Support Thread]

Love this mod, really dresses up the old website! But...

Can't find my solution after running several searches on the support thread and the rest of the forum. Not covered in the read me either.

Clean new install of zen cart 1.3.9h, (think the h is right, doing this from memory), image handler for_vx_2-0Rev8d, and zen light box 1.6.1. Installed in the order given. Works great on most images EXCEPT -

1. Main image on individual product page. Maybe that's a feature, not a flaw? Keep from downloading the largest version of the file unless you really mean to do so?

2. But the frustrating one for me is the images on my ez pages do not have the lightbox effect.

Read me states will do so out of the box for every image that has a link. Made sure of that. Any idea what I'm missing?

I am totally ignorant regarding scripting and coding. Manage to stumble my way through by careful application of the knowledge (and mistakes) of others on this forum.

Link is phoenixwoodworks D o t net . The "About Phoenix" sidebox on the upper right contains the ez pages. And the Glossary link is the one I'm most concerned with.

Any help you offer will be most gratefully appreciated.

Thanks,

Bruce

bigdiogi:

Works great on most images EXCEPT -

1. Main image on individual product page. Maybe that's a feature, not a flaw? Keep from downloading the largest version of the file unless you really mean to do so?

2. But the frustrating one for me is the images on my ez pages do not have the lightbox effect.

Read me states will do so out of the box for every image that has a link. Made sure of that. Any idea what I'm missing?

Link is phoenixwoodworks D o t net . The "About Phoenix" sidebox on the upper right contains the ez pages. And the Glossary link is the one I'm most concerned with.

Any help you offer will be most gratefully appreciated.

Thanks,

Bruce

Hi Bruce, I'm not sure what you mean by #1, can you please explain?

for #2 it will work on ez-pages however since they are generated manually, you have to also manually add a reference to the lightbox. - rel="lightbox"
try changing your image link(s) on your glossary page

FROM

<a href="graphics/barrel.jpg"><img src="graphics/barrel.jpg"

TO

<a href="graphics/barrel.jpg" rel="lightbox"><img src="graphics/barrel.jpg"

and see if that helps you.

daniel

niestudio:

Hi Bruce, I'm not sure what you mean by #1, can you please explain?

for #2 it will work on ez-pages however since they are generated manually, you have to also manually add a reference to the lightbox. - rel="lightbox"
try changing your image link(s) on your glossary page

FROM

<a href="graphics/barrel.jpg"><img src="graphics/barrel.jpg"

> 
> **TO**
> ```html
<a href="graphics/barrel.jpg" rel="lightbox"><img src="graphics/barrel.jpg"

and see if that helps you.

daniel

Hi Bruce,
On second look you are correct, this should be working automatically. It appears that there is a bit of code missing from V1.6x. thanks for bringing it to my attention, I'll work on getting it re-implemented. In the meantime, that "fix" should still work for you if you want to try it.

daniel

niestudio:

Hi Bruce, I'm not sure what you mean by #1, can you please explain?

Sorry not to be clear. When an individual product is displayed on the main page, the primary image does not open a lightbox on hover. The additional images all do however.

My point was since the initial, or primary image is already the _MED image, perhaps the mod is configured not to automatically load the _LRG image during every - on hover. Thought it might be coded that way and not an abnormality.

for #2 it will work on ez-pages however since they are generated manually, you have to also manually add a reference to the lightbox. - rel="lightbox"
try changing your image link(s) on your glossary page

FROM

<a href="graphics/barrel.jpg"><img src="graphics/barrel.jpg"

> 
> **TO**
> ```html
<a href="graphics/barrel.jpg" rel="lightbox"><img src="graphics/barrel.jpg"

and see if that helps you.

daniel

Should have mentioned I'd already tried that with no results. After thrashing around for a solution for hours, easy to forget everything you've attempted! That is mentioned in the read me. I have gone back and added that to all links. Still no improvement.

I do have an empty anchor immediately proceeding each image, like <a name="barrel"> </a> for my index links to jump to. Tried removing it from one image and saw no change. Could those anchors have any negative effect?

Any other suggestions?

bigdiogi:

Sorry not to be clear. When an individual product is displayed on the main page, the primary image does not open a lightbox on hover. The additional images all do however.

My point was since the initial, or primary image is already the _MED image, perhaps the mod is configured not to automatically load the _LRG image during every - on hover. Thought it might be coded that way and not an abnormality.

This hover is not part of lightbox but it is for image handler that you also have installed...and as far as I can tell and what they have stated it does not work for the main product image as part of the pack. probably since that one is large enough, hopefully to not need it and it is the one that can be clicked for a larger view vs the ones on the product listing pages.

bigdiogi:

Should have mentioned I'd already tried that with no results. After thrashing around for a solution for hours, easy to forget everything you've attempted! That is mentioned in the read me. I have gone back and added that to all links. Still no improvement.

I do have an empty anchor immediately proceeding each image, like <a name="barrel"> </a> for my index links to jump to. Tried removing it from one image and saw no change. Could those anchors have any negative effect?

Any other suggestions?

got it to almost work...course since I do not have the image in my store it just hangs but you can try this:

use the code at the beginning

<a href="images/name-of-image.jpg" rel="lightbox"> 
```then at the end of the image link add the </a> and see if that helps. I do not know if it is an external page you have or if you have inserted the information into the ez pages area itself but give it a try.

however you may need to play with the images/ part since you do not have the images in the main images folder but your templates images folder

DarkAngel:

got it to almost work...course since I do not have the image in my store it just hangs but you can try this:

use the code at the beginning

<a href="images/name-of-image.jpg" rel="lightbox"> ```then at the end of the image link add the </a> and see if that helps. I do not know if it is an external page you have or if you have inserted the information into the ez pages area itself but give it a try.

That's exactly what I do have. (He goes to look again, riddled with self doubt, though he's SURE that's what he typed.) Yep, what I got. Here's first image tag...

<a href="images/barrel.jpg "rel="lightbox"><img src="images/barrel.jpg" width="300" border=0  ></a>

however you may need to play with the images/ part since you do not have the images in the main images folder but your templates images folder

Notice I've moved pics from directory "graphics" (on the same level of dir tree as "images" to dir "images". They are in main template folder. Have also added _MED and _LRG suffixed versions of the pics in their respective directories.

Oh yeah, someone asked the question if this was internal link. Nope, pasted the code into ez pages editor. Should I try making a separate page and use an internal link? Can I steal the javascript info for the header from - "view page source"? Do I need that in the header if it loads in the main page? Won't that language be called with header template?

You can tell how overwhelmingly I'm out of my depth here! Appreciate your patience.

bigdiogi:

That's exactly what I do have. (He goes to look again, riddled with self doubt, though he's SURE that's what he typed.) Yep, what I got. Here's first image tag...

<a href="images/barrel.jpg "rel="lightbox"><img src="images/barrel.jpg" width="300" border=0 ></a>

> 
> 
> Notice I've moved pics from directory "graphics" (on the same level of dir tree as "images" to dir "images". They are in main template folder. Have also added _MED and _LRG suffixed versions of the pics in their respective directories.

the source code I played with was from your custom page and it listed them as being in the template/images folder...hmmm

with the IH2 imstalled you may need to remove the _MED and _LRG from the names of the images...it names them with _01 and so forth for each additional image, it also used the bmz_cache folder to store its images and ignores the Larg and Med folders.

not sure if LB ignores them too or just goes to the image link....maybe not truncating the link for the actual image???


> Oh yeah, someone asked the question if this was internal link. Nope, pasted the code into ez pages editor.


this is how i tested it by putting it directly into the ez page spot, but as I said...it just hangs cause I do not have the image nor that folder but the LB did come up.

> Should I try making a separate page and use an internal link? Can I steal the javascript info for the header from - "view page source"? Do I need that in the header if it loads in the main page? Won't that language be called with header template?
> 
> You can tell how overwhelmingly I'm out of my depth here! Appreciate your patience.

I am not that experienced either...only been playing with css and php for a few years now but do try to rearrange and fix some things on my own test store.

I will try downloading the image then setting the path to my stor to see if it do indeed work or not.

get back to you

just tried it on my test store

http://fantasiesrealm.com/market2/index.php?main_page=page&id=24

on the shelf image and it works

Well this is great! Got the onClick behavior working. I thought the onHover behavior was a feature of zen Lightbox not IH. But I did figure out a work around. Stole the code from "View Source". This -

<img src="bmz_cache/b/b5233a7cfa57af0be9130f5763986905.image.150x99.jpg" alt="81" title=" 81 " width="150" height="99" style="position:relative" onmouseover="showtrail('bmz_cache/3/3ece05810123fa0c4d2a17b727d91e63.image.300x199.jpg','81',150,99,300,199,this,0,0,150,99);" onmouseout="hidetrail();"  />  

And altered it to this -

<img src="images/quarter_sawn.jpg" alt="quarter_sawn.jpg"   width="200"  style="position:relative" onmouseover="showtrail('images/quarter_sawn.jpg',' ',200,150,400,300,this,0,0,200,150);" onmouseout="hidetrail();"  /> 

In case someone as incompetent as me stumbles across this thread, some detail. Path to image follows <img src= and showtrail( . First pair of numbers in string are width and height of image as displayed (the 200, 150). I'd constrained image size with width="200". Next two numbers are full size of image (400,300) and the last two original width and height again. Assume you could also call a larger version with a different path in the showtrail info.

Sorry if this seems like kindergarten to some of you old hands, but I had to puzzle this all out for myself. Trying to save someone else the same frustration. Love searching the threads and finding someone dealing with your issue, but their last post is "Fixed it!" with never a clue as to how. Trying to be a bit more helpful than that.

The good news is - we finally kicked it's little ######## and got the desired result. Thanks for everyone that offered help and advise. REALLY appreciate your time and effort.

bigdiogi:

Well this is great! Got the onClick behavior working. I thought the onHover behavior was a feature of zen Lightbox not IH. But I did figure out a work around. Stole the code from "View Source". This -

<img src="bmz_cache/b/b5233a7cfa57af0be9130f5763986905.image.150x99.jpg" alt="81" title=" 81 " width="150" height="99" style="position:relative" onmouseover="showtrail('bmz_cache/3/3ece05810123fa0c4d2a17b727d91e63.image.300x199.jpg','81',150,99,300,199,this,0,0,150,99);" onmouseout="hidetrail();" /> ```And altered it to this - > ``` <img src="images/quarter_sawn.jpg" alt="quarter_sawn.jpg" width="200" style="position:relative" onmouseover="showtrail('images/quarter_sawn.jpg',' ',200,150,400,300,this,0,0,200,150);" onmouseout="hidetrail();" /> ```In case someone as incompetent as me stumbles across this thread, some detail. Path to image follows <img src= and showtrail( . First pair of numbers in string are width and height of image as displayed (the 200, 150). I'd constrained image size with width="200". Next two numbers are full size of image (400,300) and the last two original width and height again. Assume you could also call a larger version with a different path in the showtrail info. > > Sorry if this seems like kindergarten to some of you old hands, but I had to puzzle this all out for myself. Trying to save someone else the same frustration. Love searching the threads and finding someone dealing with your issue, but their last post is "Fixed it!" with never a clue as to how. Trying to be a bit more helpful than that. > > The good news is - we finally kicked it's little ######## and got the desired result. Thanks for everyone that offered help and advise. REALLY appreciate your time and effort.

yay for your sugar. don't it feel grand when you figure out sumpin on your own and it works.

glad you posted how you fixed but me is a big dodo and need what file to add it to...I will keep a copy of this work around should I ever need it for someone else's store.

DarkAngel:

yay for your sugar. don't it feel grand when you figure out sumpin on your own and it works.

Yeah it do. And so far, it's always happened before I shoot myself in total frustration!

glad you posted how you fixed but me is a big dodo and need what file to add it to...I will keep a copy of this work around should I ever need it for someone else's store.

Sorry. Trying not to talk down to this technically savvy crowd. Doctored code above simply is used to position your image on the page. It is an image tag with the necessary java script embedded within.

Just put that line where you want your pic. Make sure your path to the image is correct in both places. Fix the number string to match the dimensions of your pic. Two places for the original size, one for the "zoomed" size. And you're good to go.

Hope that walked the fine line between treating you like an idiot and assuming you know more than you do! Hard to do sometime.

Thanks again for your tremendous efforts on my behalf. I couldn't begin to do this without benefiting from the knowledge and mistakes of others.

Appreciate it.

I've been following this and I am not sure what the original issue was or what your fix is supposed to do.. I can say this owever.. It appears that your fix overrides the IH2 hover settings. Which brings to mind the question of why use IH2's hover feature at all if you are going to hard code in your own image path and hover settings.. (or perhaps I'm misunderstanding all of this..)

bigdiogi:

Yeah it do. And so far, it's always happened before I shoot myself in total frustration!

Sorry. Trying not to talk down to this technically savvy crowd. Doctored code above simply is used to position your image on the page. It is an image tag with the necessary java script embedded within.

Just put that line where you want your pic. Make sure your path to the image is correct in both places. Fix the number string to match the dimensions of your pic. Two places for the original size, one for the "zoomed" size. And you're good to go.

Hope that walked the fine line between treating you like an idiot and assuming you know more than you do! Hard to do sometime.

Thanks again for your tremendous efforts on my behalf. I couldn't begin to do this without benefiting from the knowledge and mistakes of others.

Appreciate it.

He was trying to get the lightbox effect to work on images in his ez pages.

Forgot to say: Because this function, per the readme, should work out of the box, niestudio was researching the issue. He discovered some missing code from V1.6x and is in the process of getting that taken care of.

Bigdiogi's fix is a work around for the meantime.

Hope niestudio does not take my posts as critical of his/her terrific add on. Works fabulous site wide - except on the ez pages. And really only needed it on 15 or 20 images on one page. Obviously I'm a little confused about which functions are served by zen lightbox and which by IH. And what the mod is designed to do and not do. Just loved the effortless "zoom in" effect on the images and wanted the same functionality on my ez pages.

Overjoyed to only need my little workaround on a few images and tickled pink by how effortlessly this works everywhere else.

ScriptJunkie:

He was trying to get the lightbox effect to work on images in his ez pages.

ScriptJunkie:

Forgot to say: Because this function, per the readme, should work out of the box, niestudio was researching the issue. He discovered some missing code from V1.6x and is in the process of getting that taken care of.

Bigdiogi's fix is a work around for the meantime.Thanks for the clarification!:smile: It was hard to follow what was going on.. and the link referenced was clearly from IH2's bmz_cache folder..

bigdiogi:

Hope niestudio does not take my posts as critical of his/her terrific add on. Works fabulous site wide - except on the ez pages. And really only needed it on 15 or 20 images on one page. Obviously I'm a little confused about which functions are served by zen lightbox and which by IH. And what the mod is designed to do and not do. Just loved the effortless "zoom in" effect on the images and wanted the same functionality on my ez pages.

Overjoyed to only need my little workaround on a few images and tickled pink by how effortlessly this works everywhere else.

ok but I am still confused for the hover effect you added is not on the expages---like the custom page...but it is on the page that holds all the images of that category---like the medium boxes. they were all listed with no hover then when you did your coding they went to having a hover.

I will keep the "fix" for ez pages hover and the LB code for them too---just in case...but that that is why I was confused as to what file you added it to. I did not realize that was an ez-page...lol

remember that even though the techs know what to do where that if you do post info as a "fix" or "workaround" there are a lot of us that are beginners and need all the info and it saves the tech more time to help with other stuff, unless the method does not work for the next party looking...imho

bigdiogi:

Hope niestudio does not take my posts as critical of his/her terrific add on. Works fabulous site wide - except on the ez pages. And really only needed it on 15 or 20 images on one page. Obviously I'm a little confused about which functions are served by zen lightbox and which by IH. And what the mod is designed to do and not do. Just loved the effortless "zoom in" effect on the images and wanted the same functionality on my ez pages.

Overjoyed to only need my little workaround on a few images and tickled pink by how effortlessly this works everywhere else.Which module provides which feature is IMHO clearly laid out in each modules (ZLB and IH2) respective readme file, but since we've already gone down this path let's make sure it's clear for those following this thread..

The "on hover" functionality (what you have referred to as the "zoom in effect") you added to your EZ Pages is NOT a feature of Zen Lightbox. Nor is the "on hover" functionality a "primary" feature of IH2. By this I mean that as clearly outlined in the IH2 readme file, IH2's primary purpose is to manage and optimize the PRODUCT and CATEGORY images ONLY (it does NOT work on other site images). IH2's TRUE value is in the image management /optimization of product and category images that it provides. It's "on hover" feature is a "bonus" feature, and has IMHO LONG been a source of confusion about the TRUE purpose/value of IH2 for shopowners.

Zen Lightbox as it's readme clearly indicates adds a lightbox effect to not only product image images, but other images on your Zen Cart site as well. A lightbox effect is different from the "on hover" effect as follows:

lightbox also is a simple, unobtrusive javascript used to overlay images on a web page> You undoubtedly have seen information or forms or other calls to action appear over the top of a web page you're visiting. The rest of the web page is shaded or grayed out.
These are sometimes referred to as a lightbox. Often, a lightbox overlays a black or other solid color with content in a div. The lightbox in this article allows you to change the opacity of the overlay behind the lightbox to allow a hint of the content on the page to show through.The "on hover" effect you've added to your EZ Page images is not a feature that either ZLB or IH2 will provide. This explains WHY I was confused. Though you have a solution to your "issue", as it turns out the "issue" you had is not related to EITHER of these modules.. (ZLB or IH2)

DivaVocals:

The "on hover" effect you've added to your EZ Page images is not a feature that either ZLB or IH2 will provide. This explains WHY I was confused. Though you have a solution to your "issue", as it turns out the "issue" you had is not related to EITHER of these modules.. (ZLB or IH2)

I'm tempted to apologize for wasting everyone's time with my "issue", though I thought trying to get help with our "issues" was the purpose of the forum. I search for a minimum of an hour through the forums before I post to try to prevent asking the same questions over and over. I skim the FAQs. I search the web. I fiddle and try various solutions that occur to me. THEN I ask for help.

The Zoom functionality included in IH is covered in the Read Me after the Acknowledgments. That's why I missed it, thought I had read everything I needed to read.

Obviously, you have knowledge and experience superior to my own on these issues. Many, many do - as I've stated previously. 'Thanks so much for the lecture. Really needed that.