feat: add zoom right to left support #665
Comments
|
Hey @RedPlugDesign 👋🏼 Thanks for opening this issue! While I can't give you a time estimate, we'll look into this and get back to you. In the meantime, any additional context about how the example "Default (LTR)" you provided differs from the "RTL" would be useful; IE are there any significant CSS/JS changes other than |
|
Mainly just the floats, padding and text alignment. Aside from the column container, nothing specifically applied to the images or zoom container |
|
Hey @RedPlugDesign, I wanted to let you know that we had a chance to discuss this as a team and determined that we don't currently have the bandwidth to tackle RTL support right now. I'll leave this ticket open and we'll come back to it when we've had a chance to clear our backlog. In the meantime, if anyone else would like to see support for this feature comment or react to this post. This will help us prioritize this task moving forward. |
|
Disappointing, but understandable. |
|
To enable RTL support for external zoom, simply include the following code. /rtl:ignore/ |
|
Thanks for the follow-up, but this is not working for me. I am using the I also tried this on the Demo CodePen with no results. Is there a way to force the |
@paulstraw I have an issue with right to left language and my current set up. I believe it is from how the code calculates the 'right' positioning of the image, but I cannot verify.
Examples:
The default Javascript is used, and the only parameters are:
new Drift(e, { paneContainer: e.closest('.drift'), inlinePane: 1 });CSS is fairly standard, and I have tried the default CSS & current JS also:
`.drift-zoom-pane.drift-inline {
position: absolute;
width: 150px;
height: 150px;
border-radius: 75px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.drift-zoom-pane.drift-open {
background: var(--white);
}
.drift-zoom-pane.drift-open.drift-loading {
background: none;
}
.drift-loading .drift-zoom-pane-loader {
background: rgba(255, 255, 255, 0.75);
content: '';
display: block;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 999;
}
.drift-zoom-pane-loader:after {
content: '';
animation: loader-rotate 1s linear infinite;
background: transparent;
border: 2px solid var(--button_color_25);
border-bottom-color: var(--button_color);
border-radius: 50%;
@include border-box();
height: calc(var(--master_spacing) * 2.5);
left: 50%;
margin-left: calc(-1 * var(--master_spacing) * 1.25);
margin-top: calc(-1 * var(--master_spacing) * 1.25);
opacity: 0.75;
filter: alpha(opacity=75);
padding: 0;
position: absolute;
top: 50%;
width: calc(var(--master_spacing) * 2.5);
z-index: 999;
}`
Most demo's use the separate window, and I havent been able to set up a proper RTL test. Has this been seen before or are there any suggestions?
The text was updated successfully, but these errors were encountered: