-
Posts
-
Hello Enfold Team,
First thank you for the overall great support!The topic I’m opening doesn’t seem to be fully resolved by some other threads. Whatever solution is implement it needs to not be overwritten when the client updates the parent theme.
My client wants all animation removed from the thumbnails and the large image. Currently they seem to fade in even though I have disabled animations per: https://kriesi.at/support/topic/disable-gallery-animation-2/ and https://kriesi.at/documentation/enfold/animation/#disable-gallery-image-animation.
2nd issue I’m having: in an effort to improve page load times, I resized the images for the gallery to 514 width by 666 height. However, now they are being stretched. This is probably related to the fact that the images are portrait orientation so they are taller than their width. Since the client intends to add up to 27 images to this gallery which will add more columns to the thumbnails, I don’t necessarily want to place it inside a narrower grid column. Do you have any suggestions for limiting the height of the gallery so that the entire large image can be seen on an average screen of 1366 x 768 or even a 1920 x 1080?
Related to the 2nd issue, the client may upload images that have larger file dimensions but they will have the same portrait orientation, so the key issue is speed of loading the image when a thumbnail is rolled over. Now, the large image has a bit of a lag in loading. I am using WP Super Cache and have set it to preload mode, but images still don’t seem to be preloaded.
Any suggestions for speeding up the loading of the large gallery image when a visitor hovers over a thumbnail is appreciated.
Hey rlhinirv57,
Thank you for the inquiry.
You can disable the animation from the element’s Advanced > Animation toggle. Set the Thumbnail fade in effect to the first option. And use this css code to display the actual size of the images and prevent them from being stretched.
#top div .avia-gallery .avia-gallery-big-no-crop-thumb img { width: auto !important; height: auto !important; }Best regards,
IsmaelHello Ismael, Thank you – I already disabled animations on the Developer tab of the gallery.
Checking the Enfold demo, I see that there’s a delay of the large image swap when rolling over the thumbnails, so it appears that this is a “feature” of the gallery object.
What my client does not like is that delay as one large gallery image is swapped for another. While none of their clients may roll over the gallery thumbnails fast enough for there to simply be a white screen where the large image is, the goal is to speed up the swap between one large image and the next. I may not have been clear enough in my previous post about the issue.
Is there some javascript or other css that causes the delay when one large image is swapped out for another? Would it be possible to modify in a child theme, so that the customization isn’t lost when the parent theme is updated? I am providing a link to a beta page below with only the gallery object.
Hi,
We can set the speed of the animation or transition, but we have to manually edit the aenfold\config-templatebuilder\avia-shortcodes\gallery\gallery.js file. Look for this code:
big_prev.stop().animate({opacity:0}, function() { $next.insertAfter(oldImg); oldImg.remove(); big_prev.animate({opacity:1}); big_prev.attr('title',$(_self).attr('title')); });Add the transition speed (ms) in the animate function.
big_prev.stop().animate({opacity:0}, function() { $next.insertAfter(oldImg); oldImg.remove(); big_prev.animate({opacity:1}, 200); big_prev.attr('title',$(_self).attr('title')); }, 200);// https://api.jquery.com/animate/
Best regards,
IsmaelThank you Ismael – that does improve the speed of the image swap!
Do you think it’s possible for me to make this work in a child theme if I replicate the structure of the folders and include the one modification? i.e. childtheme\config-templatebuilder\avia-shortcodes\gallery\gallery.js
Just not wanting to need to edit this file again as soon as the client updates the parent theme. If it’s not possible, not a deal breaker.
Hi,
Thank you for the update.
Yes, you can do the modifications in the child theme, but you have to include the gallery shortcode file (.php) or template. In the php file, look for the extra_assets function.
function extra_assets() { //load css wp_enqueue_style( 'avia-module-gallery', AviaBuilder::$path['pluginUrlRoot'] . 'avia-shortcodes/gallery/gallery.css', array( 'avia-layout' ), false ); wp_enqueue_script( 'avia-module-gallery', AviaBuilder::$path['pluginUrlRoot'] . 'avia-shortcodes/gallery/gallery.js', array( 'avia-shortcodes' ), false, true ); }Change the path of the js script in the wp_enqueue_script function. However, first you have to create a new shortcode path in the child theme so that you can override the existing shortcodes or create new ones. Please check this documentation for more info.
// https://kriesi.at/documentation/enfold/intro-to-layout-builder/
Best regards,
Ismael
- You must be logged in to reply to this topic.