Zen Colorbox

[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

// 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.

[mc12345678]

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.

[simon1066]

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"

that is causing the problem.

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(addslashes($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>

[mc12345678]

Simon1066, seems reasonable.

[torvista]

Similarly for additional images.

[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

[mc12345678]

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.

[mikebr]

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....roducts_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

[mc12345678]

Here is the link to a test product:
http://ojemporium.com/teesrus/index....roducts_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...

[mikebr]

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