What's New
- AuthorPosts
Hello!
I would like to report something I think could be a bug maybe?
1. The left/right arrows don’t get tinted with the same color configured in the UI Color setting. Only hover works. So, it remains white/gray (hsla(0,0%,93.3%,.9)) in normal state.
2. The Counter toggle does nothing when enabled. It’s supposed to show current and total pics (ie: 2/8) somewhere on the Lightbox view?Now, is the Lightbox option directly linked to PS core feature? If it’s a feature fully managed by SiteBuilder, could the following features be implemented for future versions?
1. A toggle to enable/disable showing miniatures? Also, maybe allow to customize its place next to the main picture (left, right, top, bottom).
2. An option to configure the color of the surrounding shadow of the picture, or maybe a toggle to hide/show it, or both? This is the custom CSS I use to hide it:.elementor-lightbox .elementor-lightbox-image, .elementor-lightbox .elementor-video-container { box-shadow: unset; }
Thank you!
- This topic was modified 18d by blackrider.
Attachments:
1. Thanks for your reporting, it can be fixed by adding this code to the custom CSS code field.
.elementor-lightbox .swiper .elementor-swiper-button svg {fill: var(--lightbox-ui-color);}.elementor-lightbox .swiper-container .swiper-pagination-fraction, .elementor-lightbox .swiper .swiper-pagination-fraction{color: var(--lightbox-ui-color);}
The code will be included in the next update.
2. It works, see the attached pic. Clearing the Smarty cache is required after enabling the Counter setting.1. “miniatures” Did you mean “thumbnail images”? Draw a pic to show me what you want to achieve.
2. Great, a shadow setting will be added in the next version.Attachments:
2. It works, see the attached pic. Clearing the Smarty cache is required after enabling the Counter setting.
Right, forgot to try clearing cache. Thanks!
1. “miniatures” Did you mean “thumbnail images”? Draw a pic to show me what you want to achieve.
I attached 2 pics as an example for the thumbnail images (98237589834-2, 98237589834-3).
Maybe not fully suitable as I think that it will require to rework the navigation buttons (place, touch area…), also rework breakpoints as the thumbnails will need to be relocated when in portrait or landscape, but would be a good option to have for future releases.Attachments:
Now, I would like to report some new posible bugs I have found while customizing the Lightbox element:
1. The navigation buttons size setting doesn’t work, only the header works. Seems that this setting is overwritting ‘–lightbox-navigation-icons-size’ instead of ‘–lightbox-navigation-icon-size’, being the last one the one that contains the actual value. (98237589834-4, 98237589834-5, 98237589834-6)And, I think that adding the possibility to configure the following options would great too:
1. Be able to adjust main product image size/max size, and apply border settings. I have done it using the following CSS:.elementor-lightbox .elementor-lightbox-image { max-height: 80%; border-radius: 10px; }
2. Be able to add a background for navigation buttons (maybe yes or not, I don’t care too much), but I have managed to add it with the following CSS:
(...)::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background-color: #efefef; border-radius: 50%; z-index: -1; }
3. Be able to disable/enable or fully customize the timeout of the header and navigation buttons hide effect. I have overwritten its behaviour with the following CSS, so non of the elements gets hidden:
.elementor-slideshow--ui-hidden .elementor-slideshow__footer, .elementor-slideshow--ui-hidden .elementor-slideshow__header { opacity: 1; } .elementor-slideshow--ui-hidden .elementor-swiper-button-next, .elementor-slideshow--ui-hidden .elementor-swiper-button-prev { opacity: 1; }
4. Be able to place a custom text (also icon) just below the main product image, so we can write little notes/tips, like: ‘(icon) Hover your mouse over to see the image in more detail.’. (98237589834-3)
I think the n4 will be usefull because in my case I won’t use the Zoom button (header). I have created a little piece of code with CSS/JS to recreate the mouse hover effect, so the image can be re-scaled like this way. (mouse-hover-effect.txt)
Maybe you could integrate that feature in SiteBuilder on future releases too?Thank you!
- This reply was modified 15d by blackrider.
Adding thumbnail images is doable, will do it in the feature.
2. More color settings will be added in the feature.
3. Agree, the timeout hide effect will be removed in the next update to keep those buttons showing all the time.
4. Thanks for your code, but I will keep this as it is, the current behavior is more universal. A setting will be added in the next update to show image title out there.
- AuthorPosts
You must be logged in to reply to this topic.