Horizontal Gallery on mobile phones: can I jump directly into the lightbox? - Support

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

Author

Posts
July 17, 2022 at 10:54 pm #1358626
mistermagoo8691
Participant
Hi folks.
I’ve noticed a strange behaviour in all my horizontal galleries, when accessed from a mobile phone.

When you use them on a PC, they work like this:
1) You see several images, and the “current” one is larger than the others.
2) You scroll through the images by clicking on the < and > arrows, and the “current” image changes each time, getting larger than the others.
3) If you click on the larger image, it opens it even larger the lightbox. If you hover it without clicking, you see a small “enlarge” icon over the upper border of the image.
Fine, clear, easy, intuitive.

When you use them on a mobile phone, they work like this:
1) Only one image is shown.
2) You scroll through the images by swiping with your finger or clicking on the < and > arrows: the current image changes (it’s still shown one at the time).
3) If you tap on the current image (and this is what I don’t like), nothing happens to the image, except for the “enlarge” icon that is partially visible on the upper border of the image (in fact it is cut in half, only the bottom part is visible). The user barely notices it, believe me…
If you tap again on the current image, then the lightbox opens and the image is larger than before (fine, this is good).

Question 1: coudl you please confirm that it is working as expected?
Question 2: would it be possible, on mobile only, to open directly the lightbox when taping on an image, skipping the step of “showing the enlarge icon”?

If you want to experience what I’ve tried to describe, check the first “Galleria Fotografica” that you see in this page, just below the introduction.

Thanks folks!
Bye,
A.-
- This topic was modified 2 years, 4 months ago by mistermagoo8691.
- This topic was modified 2 years, 2 months ago by Mike.
July 19, 2022 at 6:24 pm #1358803

mistermagoo8691
Participant

Wow, that’s a hard one, isn’t it? I just wanted to know if you cannot support me because you don’t understand the problem… in this case I can add several screeshots (or even a video, if this can help….)
Thanks!

July 19, 2022 at 8:56 pm #1358814
Guenni007
Participant
well one thing is that on touch devices ( mobile phones ) there is no hover effect.
you can do this to show it always on the touch device case:
```
.avia_mobile #top .av-active-gal-item .av-horizontal-gallery-link {
   opacity: 1 !important;
}
```
or use that class instead touch-device

but that one thing you mentioned i could not reproduce : that there is only a half lightbox button.
Next: on my simulated mobile devices – your gallery do that what you like to have – it opens directly the lightbox on click.

Edit: aha – i know now why – you make the button a 100% width and height.
July 20, 2022 at 12:37 pm #1358885
mistermagoo8691
Participant
Yes, @Guenni007, you are right! I forgot that I added this to the CSS…
```
#top .av-horizontal-gallery-link {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    transform: none !important;
}
```
…after reading this suggestion by @Nikko in the thread below:
https://kriesi.at/support/topic/horizontal-gallery-need-the-lightbox-to-open-when-the-picture-is-clicked/

In fact this is what I want to achieve: when the user clicks on the image in the horizontal gallery, this should open the Lightbox directly. Nothing in between!

This is exactly what happens with the CSS above, if you’re browsing from a a PC. But on a mobile, you must still do the “double tap” (first tap on the image, the “enlarge icon” appears, and the you tap again anywhere and the lightbox opens).

Is there any way to achieve what I’d like to achieve, both on PC and Mobile?

THX
Bye!
A.-
- This reply was modified 2 years, 4 months ago by mistermagoo8691.
- This reply was modified 2 years, 4 months ago by mistermagoo8691.
July 23, 2022 at 4:30 pm #1359290

Mike
Moderator

Hi,
Thank you for your patience, I check the first Galleria Fotografica on my Android phone with Chrome and for me the horizontal gallery images open in the lightbox on the first tap, I didn’t need to “double tap”.
What phone and browser are you using?

Best regards,
Mike

July 25, 2022 at 10:51 am #1359362
mistermagoo8691
Participant
Hi Mike. See the attached video. I am using Chrome on an iPhone.

https://www.youtube.com/shorts/U4-e40FQ_nY

As you can see, the firts tap on the image shows the “enlarge” icon (it is not visible in full, you can see half of that), and then only the second tap opens it in the lightbox.

As I explained above, I’ve added the CSS below after the suggestion on @nikko in the mentioned thread, because I wanted to open the lightbox on the first click on PC (and I thought it worked on mobiles on first tap too).
Well, it works fine on the PC… but it does not work on mobile (apparently on IOS only, based on what you told me)!
```
#top .av-horizontal-gallery-link {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    transform: none !important;
}
```
THX
Ciao!
A.-
July 25, 2022 at 11:21 am #1359367

Mike
Moderator

Hi,
Thanks for the feedback, I have asked team members with an iPhone to check and advise, I only have an Android. Thank you for your patience.

Best regards,
Mike

July 29, 2022 at 12:29 pm #1359834

mistermagoo8691
Participant

Hi @Mike, did you have any feedback from your colleagues? Thanks in advance!

August 1, 2022 at 5:18 am #1360054
Ismael
Moderator
Hi,

Thank you for your patience.

We can use this css code to move the expand or link icon back to the bottom right corner of the gallery image. The link will still cover the whole image or will still be accessible by clicking any parts of the gallery image.
```
#top .av-horizontal-gallery-link:before {
    position: absolute;
    right: 10px;
    bottom: 0;
}
```
Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael
August 1, 2022 at 6:48 pm #1360164
mistermagoo8691
Participant
Hi @Ismael. I’ve added the script, but almost nothing changed.

Please note: I’ve added it to the existing snippet, therefore now I have both:
```
/* old snippet */
#top .av-horizontal-gallery-link {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    transform: none !important;
}

/* new snippet */
#top .av-horizontal-gallery-link:before {
position: absolute;
    right: 10px;
    bottom: 0;
}
```
There is only one small change: the icon now appears in a different position, as you said.

But please note: my goal is different: I want to open the image in the lightbox as soon as I tap on it, immediately. The “expand” icon is useless.

Now it works like this: 1) I tap on an image in the horizontal gallery on my mobile => 2) the useless “expand” icon appears (useless, because the image size does not change at all) => 3) I need to tap again in order to open it in the lightbox. I want to go from (1) to (3) directly.
Please note: it work exacytly like this on PC!

@Mike wrote that it happens on IOS only, and he was looking for a device to test it…

THX
Ciao,
A.-
- This reply was modified 2 years, 3 months ago by mistermagoo8691.
August 17, 2022 at 7:20 pm #1361995

mistermagoo8691
Participant

Hi folks. Any news on this one?

August 18, 2022 at 5:20 pm #1362093
Ismael
Moderator
Hi!

Sorry for the delay. Adding this script in the functions.php file might help. The script should trigger a double tap/click when the horizontal gallery link is clicked and hopefully open a lightbox without having to tap twice on mobile view.
```
// custom script: open horizontal gallery lightbox on single tap 
function ava_custom_script_single_tap_horizontal_gallery_link()
{
    ?>
    <script type="text/javascript">
        (function($) {
            if(false == $.avia_utilities.isMobile) return;
            
            $('.av-horizontal-gallery-link').on('click', function() {
                $(this).dblclick();
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_script_single_tap_horizontal_gallery_link', 9999 );
```
You should also use both css to fix the position of the expand/enlarge icon.
```
#top .av-horizontal-gallery-link {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    transform: none !important;
}

#top .av-horizontal-gallery-link:before {
position: absolute;
    right: 10px;
    bottom: 0;
}
```
Cheers!
Ismael
August 18, 2022 at 10:07 pm #1362133

mistermagoo8691
Participant

Thanks Ismael!

But on IOS (I cannot check on Android) it is still showing me the “<= =>” enlarge icon after the first tap, and then opening it in the lightbox only after the second tap.
You can check for example with this one:you’ll find an horizontal gallery just below the first descrption section.

Gressoney Saint Jean – sentiero 1B – Colletto Taf

Thnks for yout efforts, Ismael!
But what I don’t understand is: this behaviour should be annoying for everyone, isn’t it? If I see a picture on the screen, I want to enlarge it by tapping on it once. Why should I tap on it TWICE, just to make a useless “enlarge icon” appear on firts tap? :)
THX
Bye!
A.-

August 19, 2022 at 3:00 am #1362142
Ismael
Moderator
Hi!

Thank you for your patience.

Have you tried purging the cache and disabling the Performance > File Compression settings after adding the script? Please try to check the site on incognito mode as well.

Aside from triggering a click event, we can also try and remove the expand icon on mobile view with this css.
```
@media only screen and (max-width: 989px) {
  /* Add your Mobile Styles here */
  #top .av-horizontal-gallery-link:before {
    display: none !important;
  }
}
```
Let us know if removing the expand icon works.

Best regards,
Ismael
August 23, 2022 at 5:55 pm #1362540

mistermagoo8691
Participant

Hi Ismael. Thanks again for your effort.
I purged the cache, the compression is constantly disbled, I am always doing my checks in incognito mode.

I added this change on the CSS, and the only result is that now the “enlarge” icon disappeared. But I still need to tap on my images twice: once to select the image, and the second one to have it open in the lightbox.

You can try by yourself with an IOS phone with the “Galleria fotografica” you see here, just below the first section (https://www.sentierigressoney.it/sentieri/gressoney-saint-jean-sentiero-1b-colletto-taf/). I have other 50 pages with a similar Horizontal Gallery that are working the same way…

Thanks!
Bye,
A.-

August 25, 2022 at 8:09 am #1362723
Ismael
Moderator
Hi,

We may have finally found the cause of the issue. On mobile device, the browser tries to satisfy the hover state by adjusting the opacity of the .av-horizontal-gallery-link on first tap and only activates the lightbox on the second. To prevent this, we set the initial opacity of the link to 100% or 1 and disabled the element transition.
```
@media only screen and (max-width: 989px) {
  /* Add your Mobile Styles here */
  #top .av-horizontal-gallery-link:before {
    display: none !important;
  }

  #top .av-horizontal-gallery-link {
     -webkit-transition: none;
      transition: none;
      opacity: 1 !important;
  }
}
```
Thank you for your patience.

Best regards,
Ismael
August 26, 2022 at 8:31 pm #1362906

mistermagoo8691
Participant

IT IS WORKING!!!!

Thank you, thank you very much for having spent so much time trying to fix this one!

Isn’t the Horizontal Gallery working definitely better this way on mobile phones?? I still cannot understand how the “standard” behaviour is acceptable by other people! :) If I tap on an image on the horizontal gallery, it must open directly in the lightbox, period!

Well, who cares why other people like to have an intermediate tap? Today I am happy! :-)
Thanks, thanks so much.
Bye!
A.-

August 27, 2022 at 12:25 pm #1362922

Mike
Moderator

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

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

The topic ‘Horizontal Gallery on mobile phones: can I jump directly into the lightbox?’ is closed to new replies.