-
Posts
-
Hi,
I saw a post about this issue before (when it wasn’t an issue for me!), but now I can’t find it, so not sure if there is a resolution yet. When using a gallery in the layout builder, when the page is viewed, the thumbnail images stay greyed out (same as their hover state) until you scroll down the page, which is a problem when there are only a few images that don’t require a scroll of the page to view them all!
Is this a bug? Is there a fix or workaround?
Thanks,
Matt
Hi,
Please make sure you are using the latest theme because almost every day or so an update has been released and 1.31 is the current version from a day ago.
You can try opening up /js/avia.js and find line 261 and add // (two slashes) in front of that line so it would look like the code below
//overlay = $("<span class='image-overlay "+span_class+"' style='opacity: 0;'><span class='image-overlay-inside'></span></span>").appendTo(link);Thanks,
Nick
Hi Nick,
I am using the latest theme. It seems to be an intermittent problem though, so it’s not an issue at the moment! I can’t reproduce the problem currently.
I distinctly remember commenting out line 260 (not 261, from memory) of avia.js was one of the workarounds for fixing the ‘tooltip not displaying’ problem, which I used at first but then found another post where the moderator had given the following CSS fix:
.avia-gallery-thumb .image-overlay.overlay-type-image {
display: none !important;
}so I used that instead and uncommented line 260. The overlay still appears on hover but the link symbol doesn’t, which fixes the tooltip problem, but didn’t sort the problem that is the subject of my initial post. I have now uncommented line 260 aswell and will keep an eye out for the issue again…
Thanks,
Matt
Hey Matt,
It’ll take a bit of time to find the exact cause of some of these sometimes-happens-sometimes-not bugs so if you do find a specific way to re-create it let us know so we can dig into it a bit further :)
Regards,
Devin
I came across this more recent post that addresses this issue: https://kriesi.at/support/topic/galery-pictures-load-effect
Hi,
Open up enfold/js/shortcode.js and search for following code around line 205:
//trigger displaying of thumbnails
gallery.on(‘avia_start_animation’, function()
{
images.each(function(i)
{
var image = $(this);
setTimeout(function(){ image.addClass(‘avia_start_animation’) }, (i * 110));
});
});
change it to:
//trigger displaying of thumbnails
gallery.on(‘avia_start_animation’, function()
{
images.each(function(i)
{
var image = $(this);
setTimeout(function(){ image.addClass(‘avia_start_animation’) }, (i * 110));
});
}).trigger(‘avia_start_animation’);
and the gallery thumbs should load immediately.
I have implemented it and it seems to work, but my question is, why hasn’t this been written into the code for us? It doesn’t make any sense to have to scroll down a complete page of thumbnail images before you get to see them not greyed out! Now I may have to amend the code everytime I do a theme update, so is there a good reason this fix hasn’t been applied to the code for us?
Thanks,
Matt
Afaik Kriesi added this gallery effect because it looks nice and if you’ve just some images in a gallery (and not a complete page of thumbnails) it makes sense. For now we won’t implement this code into the theme files because we like the fade in effect…
OK, at least I understand your (Kriesi’s) way of thinking. I agree it does look nice, just a shame most galleries I ever create have more images than fit on a single screen! I suppose I could use the thumbnail with larger image layout but I prefer having decent sized thumbnails that don’t necessarily require the user to enlarge to get a feel for what they are looking at. Thanks for taking the time to explain though!
- The topic ‘Gallery images faded until scroll’ is closed to new replies.