Zen Colorbox

[DivaVocals]

WheelZoom makes use of the existing displayed image and zooms in using css and is easy to add into colorbox.. I added it to my site and it works. When colorbox displays the image, hovering over the image, spin the mouse wheel to zoom in/out grab the zoomed in image to move it around. Sample installation, download wheelzoom from Jack Moore wed site and place the script file in your template jscript folder.

modify includes/classes/zen_colorbox/jquery_colorbox.php add

echo '<script type="text/javascript" src="' . $template->get_template_dir('.js', DIR_WS_TEMPLATE, $current_page_base, 'jscript') . '/wheelzoom.js"></script>"></script>';

modify includes/classes/zen_colorbox/autoload_default.php add edits in red

$("a[rel^='colorbox']").colorbox({onComplete:function(){ wheelzoom(document.querySelectorAll('.cboxPhoto')); }, <?php require_once(DIR_FS_CATALOG . DIR_WS_CLASSES . 'zen_colorbox/options.php'); ?>});;

That's all you need to do for wheelzoom to work in colorbox!
If you use img as instructions, when colorbox close so will all images on your site.. Use cboxPhoto instead of img tag.. When I figure out why git cola stopped posting, I'll add it to my github page..

Interesting.. thanks for the share.. Was thinking as I looked this over that this would be nice if this was an admin selectable option.. Maybe I'll give that a play when my time permits..

[davewest]

Interesting.. thanks for the share.. Was thinking as I looked this over that this would be nice if this was an admin selectable option.. Maybe I'll give that a play when my time permits..

You make it hard to keep it simple... uploaded my true files.. I was thinking of using both zoom and wheelzoom with a switch, but decided to just do wheelzoom which covers all I needed.

Yes, I did a switch, ZEN_COLORBOX_SCALEPHOTOS its part of the options file on my site.. removed from autoload..

if (ZEN_COLORBOX_SCALEPHOTOS == 'true') {
echo 
', onComplete:function(){ wheelzoom(document.querySelectorAll(\'.cboxPhoto\')); }';
}

[DivaVocals]

You make it hard to keep it simple... uploaded my true files.. I was thinking of using both zoom and wheelzoom with a switch, but decided to just do wheelzoom which covers all I needed.

Yes, I did a switch, ZEN_COLORBOX_SCALEPHOTOS its part of the options file on my site.. removed from autoload..

if (ZEN_COLORBOX_SCALEPHOTOS == 'true') {
echo 
', onComplete:function(){ wheelzoom(document.querySelectorAll(\'.cboxPhoto\')); }';
}

hahahahaha.. Sorry about that.. It's just that I liked the idea of this as an additional feature, and was gonna incorporate it into the module Then I thought that in doing so it should be an option that could be turned off..

[HeathenMagic]

I just wondered if there is a way to make Attribute images use the colorbox functionality?

[danielosko]

I am using a new install of ZenCart 1.5.5a with the "responsive_classic" template.... and although Colorbox works perfectly on my PC's Product Information Pages, it only shows the picture on a totally blank page when viewed from any mobile device. (phones or tablets). Colorbox did work fine when I had ZenCart 1.5.4 with the "winchester_black" template.

Any ideas on a fix?
Thanks,
Danny:

[holawill]

i just installed Zen Colorbox with the "responsive_classic" template, in step 7 Now paste the sql that you copied in step 5 into the sql area and press send, i clicked send, errors displayed at top:


can anyone please advise how to fix this?

[davewest]

I've not had any problems running jQuery Colorbox on ZC 1.5.5a!!

PHP5.6, jQuery 3.1.1, Colorbox 1.5.14, Wheelzoom 3.0.4, base template (Responsive Sheffield Blue v2.0)

Still in a test environment, just finished converting the template layout and starting the install/upgrading plugins. I use Colorbox for more than images so my install is a bit different as posted on GitHub.

I would suggest running uninstalls or try looking at your database and manually remove lost installs before trying it again. I noticed in RSB, the script for colorbox mobile wasn't where I use mine, but I didn't spend time looking for I removed it and installed my version.

When you refreshed admin, did colorbox config show up! Did you remove Slimbox?

[mc12345678]

i just installed Zen Colorbox with the "responsive_classic" template, in step 7 Now paste the sql that you copied in step 5 into the sql area and press send, i clicked send, errors displayed at top:


can anyone please advise how to fix this?

Have you worked through the issues you were having with installation?

If the sql had been run while under a different template, or if it had been installed into a database that had it installed previously and is now upgraded, or if it was installed and never removed (there is a separate sql query to run) then likely to receive sql errors similar to above, though really should have more information available. If there is a sql install error there is likely also going to be an error log in the logs directory.

After I had some rest and took more care about comparing files for installation (code "commented out" by use of <!-- and --> tags in a template file can be seen as, well, empty or minor text even though it is very important to operation) I found that this was installable easily with ZC 1.5.5(.0/.a/.b) and functional...

[holawill]

Hi mc12345678,

1. I removed all configuration_key for lightbox, finally i successfully installed colorbox.
2. but under mobile user agent testing, it always shows connecting... and the page does not show correctly, so i followed your advice and checked \templates\tpl_modules_main_product_image.php, and changed "<!--" to "<//!--" on both lines 23 and 28, it works well now on mobile user agent now, but the main image does not show, just additional images display, any ideas?

[mc12345678]

Hi mc12345678,

1. I removed all configuration_key for lightbox, finally i successfully installed colorbox.
2. but under mobile user agent testing, it always shows connecting... and the page does not show correctly, so i followed your advice and checked \templates\tpl_modules_main_product_image.php, and changed "<!--" to "<//!--" on both lines 23 and 28, it works well now on mobile user agent now, but the main image does not show, just additional images display, any ideas?

So there is/was a misunderstanding of my previous comment. The important thing I noticed was that when merging/inserting the code from tpl_modules_main_product_image.php that all text was important even the text between <!-- and -->. This makes more sense to those that use comparison software that can consider that text as minor or unimportant. So, the code in those sections should be restored.

What you are probably experiencing is a javascript error that is causing the code from includes/modules/pages/product_info/jscript_zen_colorbox.php to error out and not continue processing.

In an effort to add functionality a check was not incorporated for those that don't have the additional code that is sought. I've posted a preliminary solution to this issue at https://github.com/daniel-hopkins/zen-colorbox/issues/9. It worked for me where I don't have the extra code, but I don't know if it still works for those that do. Looks like it would, but as they say the proof is in the pudding.