image "click to closeup" expanding image off-center

[Brian-Vdubwarehouse]

Having an image with the "click to closeup" feature. When you click on an image to expand it, it opens off center, to the right, partially off the screen.

When I use the inspect the page through firefox, I find the following code

<div style="left: 540.5px; display: inline;" id="closeup_div" class="closeup"><img style="display: inline;" id="closeup_image" src="graphics/00000001/4.jpg" alt=""><div><a id="closeup_close">close</a></div></div>

That left: "540.5px" seems to be the issue, but I can not figure out where I can edit this.

An example of the issue can be seen on this page if you click to enlarge the image: http://www.vdubwarehouse.com/mm5/mer...ct_Code=481046

Any help would be appreciated

[Brian-Vdubwarehouse]

Anyone have any idea's on this? Haven't come up with a solution yet.

Thanks

[RayYates]

You can try adding position: relative; to the .container class

[Brian-Vdubwarehouse]

Are you talking about changing position: absolute to relative in the style.css under the .closeup { section?
If so, that didn't do it, it then centered the image top to bottom (so you had to scroll down to view) but was still offset the same amount to the right

[Dan - Glendale Designs]

Looks like there are multiple "product_display_imagemachine" tags and "closeup_div" elements implemented.

[Brian-Vdubwarehouse]

Sorry, things got super busy and this fell low on the priority list, where would I find that in Miva so I can edit it? I really think all I need to do is edit the "left: 540.5px" part of it, but I can't find in Miva where to edit that part.

[doakh]

Your inline style using developer tools for the lightbox has a 'left:503.5px' and 'display:inline' for

<div class="closeup" id="closeup_div" style="display:none"; >

You need to change 'display:inline' to 'display:block' and change 'left' to '0' to start with.

[Dan - Glendale Designs]

By default this particular theme implements the following code towards the end of the PROD - Product Display template, underneath the global footer item. At some point an additional snippet was introduced further up in the product screen, possibly the Product Display Layout template. Remove this duplicate closeup/image machine code and I bet it will resolve this issue.

<div id="closeup_div" class="closeup">
     <img id="closeup_image" src="graphics/en-US/cssui/blank.gif" alt="" /><div><a id="closeup_close">close</a></div>
</div>
<mvt:item name="product_display_imagemachine" param="body:product:id" />

[Brian-Vdubwarehouse]

Your inline style using developer tools for the lightbox has a 'left:503.5px' and 'display:inline' for

<div class="closeup" id="closeup_div" style="display:none"; >

You need to change 'display:inline' to 'display:block' and change 'left' to '0' to start with.

Do you know where I can change this?
I'm in the following
Home > Edit Page: Product Display > Page
And in
Edit Page: Product Display

I don't see anything there listing "left:503.5px"

[Brian-Vdubwarehouse]

By default this particular theme implements the following code towards the end of the PROD - Product Display template, underneath the global footer item. At some point an additional snippet was introduced further up in the product screen, possibly the Product Display Layout template. Remove this duplicate closeup/image machine code and I bet it will resolve this issue.

<div id="closeup_div" class="closeup">
<img id="closeup_image" src="graphics/en-US/cssui/blank.gif" alt="" /><div><a id="closeup_close">close</a></div>
</div>
<mvt:item name="product_display_imagemachine" param="body:product:id" />

I deleted that out of the "template" in the edit page: product Display.
It didn't fix the alignment issue, but it did fix the issue I was having where you would have to click twice to close, so that's good. But the main issue of the alignment is still there.

Thank you for the help

[Dan - Glendale Designs]

It looks like you removed the one at the bottom of the PROD template, not the one in the Product Display template. Try reversing that. The left and display properties are correct for that theme and there is a reason the closeup/image machine items are at the bottom of template by default.

[Brian-Vdubwarehouse]

That's actually the only instance of that coding on the PROD page, is there another place I should be? The footer is actually empty, and if I search product display template, it takes me to PROD (Edit Page: Product DIsplay)

Not sure if I'm missing something

[Dan - Glendale Designs]

Put the piece of code that you removed back in, take out the one that you didn't.

[Brian-Vdubwarehouse]

Yeah, I put that piece of code back in, but I don't see another example on it anywhere on the PROD page. Even if I do a search for it it only finds one instance on that page. That's why I was wondering if I should be looking on another page?

[Dan - Glendale Designs]

You're back to two, there's another one somewhere. If there weren't two, things wouldn't have worked at all when you removed the one at the bottom of the template.

That's why I was wondering if I should be looking on another page?

Are any of the template sections closed on the PROD screen? Outside of that, hard for us to say where it is from this side, but it's definitely there.