Zen Colorbox

Thank you so much for your input. This is new to me, but digging in and I found Nu HTML Checker. I used the chrome inspect and see what you were talking about https://code.jquery.com/jquery-1.12.0.min.js, is invoked via document.write. Then read up, if it is invoked by document.write() is the issue. In admin I tried Dev Tools looking for document.write() nothing.

Then in Nu HTML Checker I found this:

<script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"%3E%3C/script%3E'));</script>↩ <script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="includes/templates/maxtemp/jscript/jquery.min.js"%3E%3C/script%3E'));</script>↩

So first thought is a header and in common/html_header.php I found it:

/** CDN for jQuery core **/
?>

<script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"%3E%3C/script%3E'));</script> <script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="<?php echo $template->get_template_dir('.js',DIR_WS_TEMPLATE, $current_page_base,'jscript'); ?>/jquery.min.js"%3E%3C/script%3E'));</script> <?php /** Way out of my comfort zone here or knowledge... can this be rewritten in a link in that header file? First download this file to my_template/jscript/jquery-1.12.0.min.js Then put this in the header? <script type="text/javascript" src="my_template/jscript/jquery-1.12.0.min.js"></script> It says it is for CDN for JQuery core, Not sure what that is...? Again thank you! Making notes here of what I try so others can follow. Hope to help someone else. :)

MaxBodine:

Thank you so much for your input. This is new to me, but digging in and I found Nu HTML Checker. I used the chrome inspect and see what you were talking about https://code.jquery.com/jquery-1.12.0.min.js, is invoked via document.write. Then read up, if it is invoked by document.write() is the issue. In admin I tried Dev Tools looking for document.write() nothing.

Then in Nu HTML Checker I found this:

<script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"%3E%3C/script%3E'));</script>↩ <script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="includes/templates/maxtemp/jscript/jquery.min.js"%3E%3C/script%3E'));</script>↩

So first thought is a header and in common/html_header.php I found it:

/** CDN for jQuery core **/
?>

<script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"%3E%3C/script%3E'));</script> <script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="<?php echo $template->get_template_dir('.js',DIR_WS_TEMPLATE, $current_page_base,'jscript'); ?>/jquery.min.js"%3E%3C/script%3E'));</script> <?php /** Way out of my comfort zone here or knowledge... can this be rewritten in a link in that header file? First download this file to my_template/jscript/jquery-1.12.0.min.js Then put this in the header? <script type="text/javascript" src="my_template/jscript/jquery-1.12.0.min.js"></script> It says it is for CDN for JQuery core, Not sure what that is...? Again thank you! Making notes here of what I try so others can follow. Hope to help someone else. :)

Ok so, first off, the jquery file(s) are considered recommended to be attempted remotely rather than locally, secondly the issue is (if hadn't figured it out yet) is that it seems that jquery-1.7.0 is being loaded instead of something at least more recent.. You can find where that file is referenced by using the tools->developers tool kit and searching all files (lower row of search tools) for the content I posted before (in part or whole). That should result in finding one or more files that are related to the mobile/tablet files where this issue is occurring.

You could try renaming: includes/templates/maxtemp/jscript/jscript_jquery-1.7.1.min.js such that it does not begin with jscript and see what happens... be prepared to rename it back as some of the other javascript software may not work on the newer 1.12 version that is also loaded.

Hi mc12345678,

THANK YOU!!!

I did rename that file, it worked. I followed through completing a purchase too. But if you don't mind explaining, I am not clear on how you knew it was the jscript_jquery-1.7.1.min.js file?

In chrome inspect I am seeing the warning on the jquery-1.12.0.min.js. What did you use to see that there was an issue with jscript_jquery-1.7.1.min.js?

/** CDN for jQuery core **/
?>

<script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"%3E%3C/script%3E'));</script> <script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="<?php echo $template->get_template_dir('.js',DIR_WS_TEMPLATE, $current_page_base,'jscript'); ?>/jquery.min.js"%3E%3C/script%3E'));</script> <?php /** I appreciate the time you have spent guiding me, and hope others benefit from this thread. Do you have a donation button somewhere? I would like to buy you a drink or two :) Thanks again!

MaxBodine:

Hi mc12345678,

THANK YOU!!!

I did rename that file, it worked. I followed through completing a purchase too. But if you don't mind explaining, I am not clear on how you knew it was the jscript_jquery-1.7.1.min.js file?

In chrome inspect I am seeing the warning on the jquery-1.12.0.min.js. What did you use to see that there was an issue with jscript_jquery-1.7.1.min.js?

/** CDN for jQuery core **/
?>

<script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"%3E%3C/script%3E'));</script> <script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript type="text/javascript" src="<?php echo $template->get_template_dir('.js',DIR_WS_TEMPLATE, $current_page_base,'jscript'); ?>/jquery.min.js"%3E%3C/script%3E'));</script> <?php /** I appreciate the time you have spent guiding me, and hope others benefit from this thread. Do you have a donation button somewhere? I would like to buy you a drink or two :) Thanks again!

If you take a look back at post 259, from a desktop computer I was able to suggest to the store that I was on a mobile (or was it laptop) device so that the page would be displayed/presented with the same issues as seen on a mobile. While doing so, I kept an eye on the console section of the browser debug tools. Tada, said it had an issue with access 1.7.1, so... might as well try to turn it off. :)

As with most that have a signature with their post, mine (eventually) leads to what was desired to offer, though primarily I have a dot com site associated with my username.

Anyways, yes, I hope others (when they find this discussion) will be able to address their related issue(s), as well.

Found it - Thank you!

I note that when the product name has a word in quotation marks, this causes a problem with the title tag being prematurely closed.

in tpl_modules_main_product_image.php

<script type="text/javascript"><!--document.write('<?php echo '<a href="' . zen_colorbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="' . $rel . '" class="' . "nofollow" . '" title="' . addslashes($products_name) . '">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>'); //--></script>

I changed to

<script type="text/javascript"><!--document.write('<?php echo '<a href="' . zen_colorbox($products_image_large, addslashes($products_name), LARGE_IMAGE_WIDTH, LARGE_IMAGE_HEIGHT) . '" rel="' . $rel . '" class="' . "nofollow" . '" title="' . htmlspecialchars($products_name) . '">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>'); //--></script>

which made things ok.

Does anyone have this plugin on github to manage issues and updates?

torvista:

I note that when the product name has a word in quotation marks, this causes a problem with the title tag being prematurely closed.

in tpl_modules_main_product_image.php

I changed to

which made things ok.

Does anyone have this plugin on github to manage issues and updates?

https://github.com/mc12345678/zen-colorbox

And already queued I thought as discussed: https://github.com/mc12345678/zen-colorbox/issues/11

Ha, ha...I can hardly remember that! Too much else going on.

There is an issue with Colorbox causing SitemapXML admin page to only show the Upgrade button.
https://www.zen-cart.com/showthread.php?126810-SitemapXML-v-2&p=1351164#post1351164

I would like to supress the title shown in the lightbox on one particular instance.

In
includes/classes/zen_colorbox/autoload_default.php

I find

// Disable Colorbox on main reviews page image
$("#productMainImageReview a").removeAttr("data-cbox-rel");

which tells me I can add something custom in here along these lines:
https://github.com/jackmoore/colorbox/issues/778

But first as a proof of concept I don't find this
productMainImageReview
anywhere, so I suspect that particular line is outdated? I have tried changing it to other things but it does not supress the lightbox.

So, I would appreciate a check on this to demonstrate how options can be passed on a specific page.
Thanks.

torvista:

I would like to supress the title shown in the lightbox on one particular instance.

In
includes/classes/zen_colorbox/autoload_default.php

I find

which tells me I can add something custom in here along these lines:
https://github.com/jackmoore/colorbox/issues/778

But first as a proof of concept I don't find this
productMainImageReview
anywhere, so I suspect that particular line is outdated? I have tried changing it to other things but it does not supress the lightbox.

So, I would appreciate a check on this to demonstrate how options can be passed on a specific page.
Thanks.

That line is from incorporation of functionality with Tabbed Products Pro as outlined in post #30 where images within the various tab(s) were being linked to colorbox and therefore when the sort of carousel feature was enabled, the main product image could appear multiple times within the list instead of just one occurrence of the main image and one occurrence of each associated additional image.

I could see that additional code for that operation to be "easily" placed in either:
includes/classes/zen_colorbox/display_link.php
or
includes/classes/zen_colorbox/display_js_link.php

as part of the existing "onComplete:" action.

Would "break out" to php to identify the current page and have that or other additional code inserted based on what page it is and what additional code is necessary. If want to get "creative" could add additional anchor type values in the associated includes/modules/pages/XXXX javascript file to be acted upon when either file is opened/called on that particular page.

ZC v1.5.6c
Relevant mods: SBA, IH5, Colorbox

I've noticed that this mod is not escaping the apostrophe in a product's title - causing the javascript in templates/tpl_modules_main_product_image.php to fail and the medium image on the product info page to not display.

e.g
Product name: A Dog's Life

Colorbox code in templates/tpl_modules_main_product_image.php is

<script type="text/javascript"><!--
document.write('<?php echo '<a href="' . zen_colorbox($products_image_large, addslashes($products_name), defined('LARGE_IMAGE_WIDTH') ? LARGE_IMAGE_WIDTH : '', defined('LARGE_IMAGE_HEIGHT') ? LARGE_IMAGE_HEIGHT : '') . '" data-cbox-rel="' . $data_colorbox . '" class="' . "nofollow" . '" title="' . zen_output_string_protected($products_name) . '">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT,'id="SBA_ProductImage"') . '<br \/><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '<\/span><\/a>'; ?>');
//--></script>

Output is

<!--
document.write('<a href="images/artwork/0615_a_dogs_life.jpg" data-cbox-rel="colorbox" class="nofollow" title="A Dog's Life"><img src="bmz_cache/a/artwork-0615_a_dogs_lifejpg.image.500x347.jpg" alt="A Dog\'s Life" title=" A Dog\'s Life " width="500" height="347" id="SBA_ProductImage" /><br \/><span class="imgLink">larger image<\/span><\/a>');
//-->

You can see that it is the apostrophe in ```
title="A Dog's Life"

My solution is, and I hope someone will correct me if there's a better way, to add 'addslashes' like so

<script type="text/javascript"><!-- document.write('<?php echo '<a href="' . zen_colorbox($products_image_large, addslashes($products_name), defined('LARGE_IMAGE_WIDTH') ? LARGE_IMAGE_WIDTH : '', defined('LARGE_IMAGE_HEIGHT') ? LARGE_IMAGE_HEIGHT : '') . '" data-cbox-rel="' . $data_colorbox . '" class="' . "nofollow" . '" title="' . zen_output_string_protected[B](addslashes[/B]($products_name)[B])[/B] . '">' . zen_image($products_image_medium, addslashes($products_name), MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT,'id="SBA_ProductImage"') . '<br \/><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '<\/span><\/a>'; ?>'); //--></script>

Simon1066, seems reasonable.

Similarly for additional images.

ZenCart 1.5.6c
PHP 7.1
Zen ColorBox 2.1.3 installed

my main Product Image contains both a Foreground image and a background Image.
When Zooming in only the foreground image shows in the Color Box.
Anyway to get both images into the zoomed ColorBox?
thanx
Mike

mikebr:

ZenCart 1.5.6c
PHP 7.1
Zen ColorBox 2.1.3 installed

my main Product Image contains both a Foreground image and a background Image.
When Zooming in only the foreground image shows in the Color Box.
Anyway to get both images into the zoomed ColorBox?
thanx
Mike
I was notified of this post when it was made and have been trying to find some clear documentation or examples of how this might be implemented but am having difficulty visualizing how it is currently implemented to then offer a suggestion.

Is there perhaps a link to this that can be shared either here or via PM?

My thought is that if the two images are in some way captured within one another, then the "outer" designated image would be the one to have the data link applied, but then also wondering if somehow the two images need to be "merged" to a single image perhaps on the fly..

Say that because the colorbox typically displays a single object per designation. So another way may to use another linked document that puts the two images on the page/object to be displayed so that both the background and main image are displayed as a single object.

mc12345678:

I was notified of this post when it was made and have been trying to find some clear documentation or examples of how this might be implemented but am having difficulty visualizing how it is currently implemented to then offer a suggestion.

Is there perhaps a link to this that can be shared either here or via PM?

My thought is that if the two images are in some way captured within one another, then the "outer" designated image would be the one to have the data link applied, but then also wondering if somehow the two images need to be "merged" to a single image perhaps on the fly..

Say that because the colorbox typically displays a single object per designation. So another way may to use another linked document that puts the two images on the page/object to be displayed so that both the background and main image are displayed as a single object.

Here is the link to a test product:
http://ojemporium.com/teesrus/index.php?main_page=product_info&cPath=65&products_id=180
Using AIS to change background and foreground Main Product images.
Graphic is the foreground image.

Colorbox only zooms in on foreground image

thanx
mike

mikebr:

Here is the link to a test product:
http://ojemporium.com/teesrus/index.php?main_page=product_info&cPath=65&products_id=180
Using AIS to change background and foreground Main Product images.
Graphic is the foreground image.

Colorbox only zooms in on foreground image

thanx
mike

On my "initial" testing, I see what has been done to apply the background image (at least the result of). I was able to at least in part get the desired result when the style tag was applied to the image tag instead of the overall div for the mainProductImage. To do that, I cut the style out of the div tag and pasted it into the image tag and then when I opened the colorbox, at least that information carried over. There may still need to be some massaging of its behaviour when opening with that background, but I was also able to get it to display. Again, I was just breezing through but it seems like a change to how the background image characteristics are applied so that they go to the image of the div will be a step in the right direction. I didn't look at the javascript to apply the background to give much assistance, just know the result...

mc12345678:

On my "initial" testing, I see what has been done to apply the background image (at least the result of). I was able to at least in part get the desired result when the style tag was applied to the image tag instead of the overall div for the mainProductImage. To do that, I cut the style out of the div tag and pasted it into the image tag and then when I opened the colorbox, at least that information carried over. There may still need to be some massaging of its behaviour when opening with that background, but I was also able to get it to display. Again, I was just breezing through but it seems like a change to how the background image characteristics are applied so that they go to the image of the div will be a step in the right direction. I didn't look at the javascript to apply the background to give much assistance, just know the result...

I was working with the tpl_footer.php and added the following code:

<script> jQuery(function($) { $("#productMainImage").click(function(){ var sty=$( "#productMainImage" ).attr( "style" ); $("#cboxContent").attr("style", sty); }) }) </script>

This seems to do the trick
Any thoughts
Thanx
Mike