Zen Colorbox

[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

[mc12345678]

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

So I think the colorbox code adds some amount of style information to the displayed image. I would think that the background image would be added to that information rather than replace it. The other thing was that I was thinking that perhaps the executed code loaded from the footer might be better suited in a colorbox "event" loader. At least then it may stay together with the colorbox files and logic. If not done that way, would still suggest "testing" for the existence of #cboxContent to be sure that at some future point this additional code wouldn't cause a javascript error that could affect site operation.

Just my two cents worth.