Horizontal gallery image caption - Support | Kriesi.at

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
March 1, 2022 at 4:54 pm #1342740

vilk85
Participant

Hello,

By using horizontal gallery I would like to achive simillar effect like here https://ibb.co/nfyb1BM .

These are our products icons with the proper links.

For now I struggle to display captions under each image. I found similar topic here
https://kriesi.at/support/topic/display-the-image-caption-in-the-horizontal-gallery/ However I tried to implement this function into function.php file at the bottom and it did not work at all so I recovered previous function php to remove the dead code. Can you help me out with this?

Would be great if I could display two lines in different style like on the example. Lets say one line would be the title of the image and another line the alt name.

I also would like to change the scrolling preferences. The scrolling distance is definitely too small for UX. One press should scroll at lease one whole image or more.

I would appreciate your support.

March 3, 2022 at 2:59 pm #1343021
Mike
Moderator
Hey Chris,
Thank you for your patience, the scrolling effect of the Horizontal Gallery has two options, one is to enlarge the active image and move to the next with each click, the second doesn’t enlarge the image but it also moves to the next with each click, it doesn’t “scroll” through the images it “steps” through them.
To change this would require re-writing the script, a better solution is to enlarge the current image so that the users will know which image is active.
I see that you say you are using this for products, perhaps the Product Slider (see the top element “Recent Top Sellers”) would be a better option as it slides the way you wish.
Anyways to add a caption & sub caption below the Horizontal Gallery you first need to add a image title and alt in the media library, not the caption in the Horizontal Gallery

then add this code to the end of your functions.php file in Appearance ▸ Editor:
```
 function horizontal_gallery_subline(){
    ?>
    <script>
(function($){
         $('.av-horizontal-gallery-link').css({'bottom':'30px'});
         $('.av-horizontal-gallery-img').each(function(){
             var imgTitle = $(this).attr('title');
             var imgAlt = $(this).attr('alt');
             $(this).after('<span class="title-under-image">' + imgTitle + '</span><span class="alt-under-image">' + imgAlt + '</span>').css({"margin": "-20px 0"});
             $(this).css({'padding-bottom' : '20px','background-color' : 'transparent'});
             $('.title-under-image').css({"display":"block","text-align": "center","color": "#000","font-weight":"bold"});
             $('.alt-under-image').css({"display":"block","text-align": "center","color": "#444"});
         });

 })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'horizontal_gallery_subline'); 
```
the results expected are this

Best regards,
Mike
March 3, 2022 at 8:57 pm #1343054
Guenni007
Participant
Test Mikes Code
but we had to find a solution for .av-horizontal-gallery is set to overflow: hidden
the alt shown under the title is cut off. But if we set the overflow to visible – the element goes over the max-width of the container.
Maybe just to give to av-horizontal-gallery a padding-bottom of 30px – and maybe you like to shift then the arrows
```
#top .av-horizontal-gallery {
 padding-bottom : 30px ;
}
#top .avia-slideshow-arrows a {
  top: 40% ;
}
```
__________
And by the way – your link to the other page :
this is deprecated now:
$(window).load(function() {
and had to be replaced by:
$(window).on('load', function(){

Next : this is nearly a code that i posted – so i remember it well – put there is something wrong :
there is an opening p-tag that has no closing p-tag ! it has to be :
$(this).after('<p class="text-under-image">' + imgTitle + '</p>');
March 3, 2022 at 9:52 pm #1343056
Guenni007
Participant
So i would change Mikes Code a little.
And to have that not on all horizontal galleries – i would give a custom-class to the ALB Element f.e.: subline-gallery
```
function horizontal_gallery_subline(){
?>
<script>
(function($){
	$('.av-horizontal-gallery.subline-gallery').css("padding-bottom" , "30px" );
	$('.av-horizontal-gallery.subline-gallery .av-horizontal-gallery-link').css("bottom" , "50px");
	$('.av-horizontal-gallery.subline-gallery .avia-slideshow-arrows a').css("top" , "40%");

	$('.av-horizontal-gallery.subline-gallery .av-horizontal-gallery-img').each(function(){
	    var imgTitle = $(this).attr('title');
	    var imgAlt = $(this).attr('alt');
	    $(this).after('<span class="title-under-image">' + imgTitle + '</span><span class="alt-under-image">' + imgAlt + '</span>').css({"margin": "-20px 0"});
	    $(this).css({
	        "padding-bottom"    : "20px",
	        "background-color"  : "transparent"
	    });
	    $('.title-under-image').css({
	        "display"       : "block",
	        "text-align"    : "center",
	        "color"         : "#000",
	        "font-weight"   : "bold"
	    });
	    $('.alt-under-image').css({
	        "display":"block",
	        "text-align": "center",
	        "color": "#444"
	    });
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'horizontal_gallery_subline'); 
```
test-page: https://webers-testseite.de/horizontal-gallery/
March 4, 2022 at 1:11 pm #1343121

Rikard
Keymaster

Hi,

Thanks for helping out @guenni007 :-)

Best regards,
Rikard

March 9, 2022 at 4:18 pm #1343871

vilk85
Participant

Hello!

First of all I would like to thank you for your time and effort to find solution for my problem this is priceless.

@guenni007 I tried to paste the script into the functions.php unfortunately it does not bring any effect.
here is the test page https://gilbt.com/horizontal_gallery_test_page/

@Mike Product slider is dedicated only for the shop products it won’t work for me. I prefer to use horizontal gallery
There is also a problem with stepping thru the gallery. Please take a look at the test page. First step require at least 3 clicks. From the UX perspective this could be a problem.

I provided login credentials for you. I would appreciate if you take a look at functions.php to determine why this code does not work.

March 10, 2022 at 2:47 am #1343931
Mike
Moderator
Hi,
Thanks for your feedback about the stepping through the horizontal gallery, the reason it “seems” that it takes 3 clicks is because the user is not getting any feedback that their clicks are doing anything, if the “enlarge the active image” option was used the user would see the progression of the clicks.
I can understand that you don’t want to use this option, so perhaps you could add a border around the active item with css like this:
```
.av-horizontal-gallery .av-horizontal-gallery-wrap.av-active-gal-item{
  border:4px solid #FF4800;
}
```
Best regards,
Mike
March 10, 2022 at 12:38 pm #1343985
vilk85
Participant
Thank @Mike. That solves the clicking problem.

Still need help witch sub_line captions.

There also seems to be a problem on the mobile view. Whole gallery is being cropped and image sizes differs ( despite of the settings 300x300px) it does not look good.

Kind Regards
Chris
- This reply was modified 3 years, 1 month ago by vilk85.
March 11, 2022 at 1:09 pm #1344134
Mike
Moderator
Hi,
I reason the sublines were not showing was because you forgot to add the custom class subline-gallery to the element, I added it for you and this css:
```
@media only screen and (max-width: 1024px) {
.responsive .av-horizontal-gallery.subline-gallery .av-horizontal-gallery-wrap {
    min-width:300px;
    min-height: 300px;
}
.av-horizontal-gallery.subline-gallery {
	min-height: 300px;
}
}
```
Please clear your browser cache and check.

Best regards,
Mike
March 14, 2022 at 9:01 pm #1344464

vilk85
Participant

Thank you @Mike,

It seems that was the case of not showing the captions. However mobile view still looks really bad: images are cropped and the captions are visible only in the top line.

March 16, 2022 at 4:42 am #1344666
Mike
Moderator
Hi,
It looks like someone enabled the Enlarge Active Image option that you didn’t want to use, so I disabled it and I added this css:
```
@media only screen and (max-width: 767px){
.responsive .av-horizontal-gallery-inner {
    position: static;
    min-height: 300px;
}
}
```
please clear your browser cache and check.

Best regards,
Mike
March 17, 2022 at 8:23 pm #1344980
vilk85
Participant
Thanks @Mike for looking into it!

I switched on the enlarge option. I’m playing around with the gallery to see what works best for me because there are still some issues with it.

For now the biggest issue is that on the mobile version. Gallery is quite unusable. Please take a look.

mobile view 1
and
mobile view 2

Some images are cropped and some are not. I don’t understand why.
There is also the problem with captions. Most of them contain “click to show details” for some reason. Also bottom line is cropped so the user can not really read it.
- This reply was modified 3 years, 1 month ago by vilk85.
March 18, 2022 at 3:58 pm #1345106

Mike
Moderator

Hi,

Thanks for the screenshots, but I’m not experiencing this with Android, please see the screenshots in the Private Content area. If you are using an iPhone it can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

March 22, 2022 at 4:10 pm #1345541
vilk85
Participant
Thanks Mike.

I cleared all the temporary data and it did not help. I checked the test page on the Android ant the image is fine but there is still “click to show details” writing beneath which I do not want.

I spent some more time to play with it and I found what can cause the “click to show details” and also image crop simultaneously. The problems appear when there is a custom link used.

https://ibb.co/s1fBdS3
https://ibb.co/FgdDCZh

I set every other image with link and the others with no link. Please take a look.

https://gilbt.com/horizontal_gallery_test_page

Unfortunately on the mobile view bottom line of the description is cropped.

What can we do about it?
- This reply was modified 3 years, 1 month ago by vilk85.
March 23, 2022 at 1:09 pm #1345661
Mike
Moderator
Hi,
I tried removing the links and adding them back but I didn’t find and difference and I didn’t see the gallery like in your first screenshot, I did see that the text below the images were not showing so I added this css:
```
@media only screen and (max-width: 767px){
.responsive #main .av-horizontal-gallery-img {
    height: 300px;
    margin: -20px 0 0 0!important;
}
}
```
and now they show, please see the screenshot in the Private Content area, and clear your browser cache and check.
I see that you are using wprocket cache, I recommend disabling your caching plugins while you build your site so you are sure to see the actual site and not the cache.

Best regards,
Mike
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.