X-Cart forums

[ScrapOrchard]

So, as a web designer, I pretty much hate, hate, hate xCart's default pop-up detailed image viewer, can we say ICK!? So I had purchased a really cool dynamic image mod, with a pretty neat shadow box. Unfortunately, the mod just didn't work for our needs (we use our product images for marketing a lot and the mod didn't have/use direct links to the images). Anywho, I was complain.. ahem, talking with Steve (cflsystems.com) who along with Bill (alteredcart.com) who have seriously have been invaluable.. he advise that the newest version of xCart had a built in Colorbox (which, weeee, is so much sexier than lightbox or shadowbox). We seriously *just* push 4.3.2 to production and there is no way in hell I am ever going to upgrade again.. hehehe!

So I asked Mr. Steve, how hard would it be to install colobox for 4.3.2 and he advised it would probably be pretty simple. So last night I did some comparisons, and was able to get it installed (yay!) (well I haven't checked how it looks/works on a Windows machine but I will test that later today at work...ehehehe!) but I have run into a couple problems.

I did email Mr. Steve, but honestly, he has *got* to be tired of hearing from me I swear I talk to him more on a daily basis than I do my own Mom (and I *live* with her!).

So I thought I would just post and see if anyone has any solutions or suggestions to resolve a couple issues I ran into with Colorbox:

1. When I modified the code to implement Colorbox, I lost the mouseover/image swap between the main and detailed product images... anyone know how to get that back?

2. Anyone know why the box kind of disappears/flickers between navigating to the next image?

3. Anyone know why the opacity of the overlay background is so low? I used the css and images for Example 1 on the Colorbox website... but my overlay background is not as dark as in the example.


Anywho, thank you in advance for any direction you can give me!

[ScrapOrchard]

Well, I got the flickering to stop.. I guess the 'fade' option is the culprit. Any ideas how to resolve 1 and 3?

[cflsystems]

1. Look at the original code - you need this part -

onmouseover="javascript: dicon_over.call(this, '{$i.thbn_url|amp|escape:javascript}', {$i.thbn_image_x|default:$product.image_x}, {$i.thbn_image_y|default:$product.image_y}, {$i.is_png});"

3. change the colorbox setting

opacity0.85The overlay opacity level. Range: 0 to 1.

[ScrapOrchard]

awesome! thanks, steve!

[ScrapOrchard]

Worked. Now I just need to research how to pre-load the images so the mouseover is more responsive. I know the images are preloading for the Colorbox function.. surely I can leverage that for the mouseover, no?

[CenturyPerf]

Is there a way to use the X-Cart default Colorbox image popup for images coded into the static pages?

I'm working on a 4.4.3 site and would prefer to call the existing image popup instead of trying to install a second image viewer.

I'm using CKeditor as the primary editor.

[cflsystems]

Of course. You just need to call them using colorbox - http://colorpowered.com/colorbox/core/example1/index.html
And make sure colorbox css and js files are loaded

[CenturyPerf]

Thanks Steve,

Let me be more clear ... I need to use this within static, NON-root, embedded pages. In my 4.0.19 site I had to implement Lightbox (obviously Colorbox or anything else was not part of the core X-Cart coding). When I used Lightbox and FCKeditor on my 4.0.19 site it was integrated in, where all I had to do was select "Lightbox" as the effect under image properties when I was adding an image to the page.

How would I call the image as a popup using Colorbox within CKeditor?

I read when researching this that Colorbox and CKeditor are not too friendly with each other.

[ScrapOrchard]

Okay. Let me see if I am understanding the situation correctly. Your previous version 4.0.19 had an option to pick Lightbox..? We had something similar, but it was a mod by Telefirma. As I understand it, the newest version of xCart *has* Colorbox already installed.. and you should be able to select it in your image settings.

I don't 100% know what CKeditor is, but it sounds like it is what you are using to edit your pages? Not exactly sure how that plays into the problem, but if there is an option to work in the source code instead of maybe like a WYSIWYG, I would select that and you should be able to copy/paste the code needed for Colorbox... but again, I *thought* Colorbox was part of the default installation of the newest version of xCart.

[CenturyPerf]

In the later versions of X-Cart you can select from a couple WYSIWYG editors as your default editor for use throughout the site. CKeditor is the one I chose over TinyMCE and the others ... all are included and part of the 4.4.x branches (same as your 4.3.x).