Welcome Guest Search | Active Topics | Sign In | Register

Image Zoom Panel too large for mobile device Options
Mike Webb
Posted: Tuesday, November 28, 2017 11:47:59 AM
Rank: Newbie
Groups: Member

Joined: 7/18/2012
Posts: 3
I have set up an ImageZoom in code and I am using media queries within my css.

When I reduce the size of the viewport to mobile phone size (or anything smaller than the full sized image) and then click on the image to see it full size, it is centred in the page correctly but the left and right side of the image are truncated/cropped.

I have tried to affect the image size (width) using ZoomPanelStyle.CssText and ZoomPanelStyle.Cssclass and cannot resize the image when it is in "clicked" full size mode. I really need to be able to resize this as a percentage, is this possible?

Help

Mike Webb
eo_support
Posted: Friday, December 1, 2017 1:12:46 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,221
Hi,

You can use CSS selector to control the final image size. For example, you can follow these steps to set the zoomed out image to be 100 by 100:

1. Apply a dummy CSS class name to ZoomPanelStyle:

Code: HTML/ASPX
<ZoomPanelStyle Css-Class="dummy_class" />


Here CSS class "dummy_class" does not have to exist. The purpose of this class is to enable the CSS selector in the next step;

2. Add the following CSS to your page:

Code: CSS
.dummy_class img
{
    width: 100px;
    height: 100px;
}


Here the key is the CSS selector ".dummy_class img". This applies all images inside an element with class="dummy_class". Because "dummy_class" is applied to the "ZoomPanel", which contains the zoomed out image, the above style is applied to zoomed out image.

Hope this helps. Please feel free to let us know if you still have any question.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.