Lightbox swipe feature request & Gallery navigation - Support

Tagged: feature request, Lightbox

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

Author

Posts
February 13, 2023 at 4:06 pm #1397773
THP Studio
Participant
Hey Gunter,

Sorry, forgot to add this to the other feature request thread.

Back when you introduced v5 you had this in the changelog:
feature: added swipe to all devices supporting touch screens (not only to mobile devices)

I mistakenly took this to mean that you could now swipe in the lightbox (in addition to using the arrows as navigation) but clearly I misunderstood.

Which brings me to the first feature request:

On mobile (or devices that support swipe) could we add the ability in the lightbox to swipe left/right on images, rather than just rely on the arrows?

Secondly, on the ALB Gallery element, it would be great to have an option for desktop to also display the navigation arrows when the “Big Image with Thumbnails below” setting is selected, meaning the user doesn’t have to hover the thumbnails to change the image (which may not be super intuitive for some users). Perhaps there could be 3 options – hover thumbs, show navigation arrows, use both hover and arrows.

Any questions please let me know.

Thanks for considering it.

Have a great day.

Tim
- This topic was modified 1 year, 10 months ago by THP Studio.
February 13, 2023 at 7:17 pm #1397808

Alwin
Participant

I would really see the swipe option for lightbox too :)

Best Wishes,
Alwin

February 14, 2023 at 10:42 am #1397876

Yigit
Keymaster

Hi Tim,

I have posted your requests on our GitHub and added a link to this thread as a reference. We will let you know when there’s an update :)

Cheers!
Yigit

February 14, 2023 at 1:18 pm #1397910

Günter
Keymaster

Hi,

Update for swipe feature:

Please replace enfold\js\avia-snippet-lightbox.js and enfold\js\avia-snippet-lightbox.min.js

with

https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_5_4_1/js/avia-snippet-lightbox.js
https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_5_4_1/js/avia-snippet-lightbox.min.js

Do not forget to clear server and browser cache (or toggle theme options if using merged js) and make a backup of the files for a fallback.

Best regards,
Günter

February 14, 2023 at 2:05 pm #1397919

Alwin
Participant

Hello Gunter,

– Am I supposed to replace the complete code content of these 2 files with the code as on the github links?

– Is this a method supported by the Enfold developers?

– How do I do this in a Child Theme?

Thanks very much for your help :)

Kind regards,
Alwin

February 14, 2023 at 2:23 pm #1397921
Yigit
Keymaster
Hi Alwin,

– Am I supposed to replace the complete code content of these 2 files with the code as on the github links?

Yes.

– Is this a method supported by the Enfold developers?

Certainly! Günter is the lead developer :)

– How do I do this in a Child Theme?

Please add the following code to functions.php file of your child theme
```
function ava_change_wp_enqueue_scripts_mod() {
    $vn = avia_get_theme_version();
    $options = avia_get_option();
    $min_js = avia_minify_extension( 'js' );
    wp_deregister_script( 'avia-lightbox-activation' );
    wp_enqueue_script( 'avia-child-lightbox-activation', get_stylesheet_directory_uri() . "/js/avia-snippet-lightbox{$min_js}.js", array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'ava_change_wp_enqueue_scripts_mod', 100 );
```
and place the two files inside /js/ folder in your child theme

Regards,
Yigit
- This reply was modified 1 year, 10 months ago by Yigit.
February 14, 2023 at 3:20 pm #1397935
Guenni007
Participant
hey Yigit – does your code snippet load both files at the same time ( twice so to say ) – shouldn’t it load conditionally – as in funcitions.php to look if
avia_minify_extension( ‘js’ ) is set?

f.e.:
```
function wp_change_lightbox_script() {
	global $avia_config;
	$vn = avia_get_theme_version();
	$options = avia_get_option();
	$child_theme_url = get_stylesheet_directory_uri();
	$min_js = avia_minify_extension( 'js' );
	
	wp_deregister_script( 'avia-lightbox-activation' );
	$condition = ! empty( $avia_config['use_standard_lightbox'] ) && ( 'disabled' != $avia_config['use_standard_lightbox'] );
  	avia_enqueue_script_conditionally( $condition , 'avia-lightbox-activation-child', "{$child_theme_url}/js/avia-snippet-lightbox{$min_js}.js", array('avia-default'), $vn, true);
}
add_action( 'wp_enqueue_scripts', 'wp_change_lightbox_script', 100 );
```
February 14, 2023 at 3:34 pm #1397938
Guenni007
Participant
by the way: on the functions.php there are a lot of conditions for different scripts/styles – does the code only look to the closest conditon that is found?

Why i ask: i do want to change two scripts : sticky header and now lightbox . But on both there is only one $condition ( as in functions.php too )
```
function wp_change_parent_scripts() {
	global $avia_config;
	$vn = avia_get_theme_version();
	$options = avia_get_option();
	$child_theme_url = get_stylesheet_directory_uri();
	$min_js = avia_minify_extension( 'js' );
	
	wp_deregister_script( 'avia-sticky-header' );
	$condition  = ( isset( $options['header_position'] ) && $options['header_position'] == 'header_top' );
	$condition2 = ( isset( $options['header_sticky'] ) && $options['header_sticky'] == 'header_sticky' ) && $condition;
	avia_enqueue_script_conditionally( $condition2 , 'avia-sticky-header-child', "{$child_theme_url}/js/avia-snippet-sticky-header{$min_js}.js", array('avia-default'), $vn, true);
	
	wp_deregister_script( 'avia-lightbox-activation' );
	$condition = ! empty( $avia_config['use_standard_lightbox'] ) && ( 'disabled' != $avia_config['use_standard_lightbox'] );
  	avia_enqueue_script_conditionally( $condition , 'avia-lightbox-activation-child', "{$child_theme_url}/js/avia-snippet-lightbox{$min_js}.js", array('avia-default'), $vn, true);
}
add_action( 'wp_enqueue_scripts', 'wp_change_parent_scripts', 100 );
```
February 14, 2023 at 3:42 pm #1397940

Yigit
Keymaster

Hey @guenni007,

hey Yigit – does your code snippet load both files at the same time ( twice so to say ) – shouldn’t it load conditionally – as in funcitions.php to look if
avia_minify_extension( ‘js’ ) is set?

True. Thanks for the heads up. I updated the code I posted.

Why i ask: i do want to change two scripts : sticky header and now lightbox . But on both there is only one $condition ( as in functions.php too )

Can you please provide more details? Not sure if I understood clearly.

Regards,
Yigit

February 14, 2023 at 3:49 pm #1397941

Günter
Keymaster

Hi,

I forgot to mention, that the fix will be part of next release 4.5.2.

So you can actually replace the 2 original files in ..\enfold\js\…

No need to copy to child theme.

~~Script from Yigit is not correct, as it loads the same code twice (.min is minified only).~~

@Guenni007

Your code should work. Depending on theme option either the normal version of the file or the .min. version is loaded.
If you do not upload a .min. version you can skip {$min_js} (or set it to ” hardcoded).

Best regards,
Günter

February 14, 2023 at 4:28 pm #1397945
Guenni007
Participant
yes – i tested the code – my question was just for interest to understand how the conditions work. The $condition appears several times ( also in the functions.php in the original ) – is it so that if a condition is called only the closest is decisive ?
```
$condition = ! empty( $avia_config['use_standard_lightbox'] ) && ( 'disabled' != $avia_config['use_standard_lightbox'] );
$condition = ( avia_get_submenu_count('avia') > 0 );
$condition  = ( isset( $options['header_position'] ) && $options['header_position'] == 'header_top' );
etc. etc.
```
February 14, 2023 at 4:44 pm #1397947

Alwin
Participant

Hello Günter,

I forgot to mention, that the fix will be part of next release 4.5.2.

Do you mean that the swipe option for lightbox will be part of version 4.5.2?

February 14, 2023 at 4:55 pm #1397950

THP Studio
Participant

@Alwin yes you can see it listed there already: https://kriesi.at/support/topic/enfold-upcoming-fixes/

@Gunter thank you so much for adding this so quickly! I haven’t tested it yet, will likely wait for the official release, but thanks again for acting on this request.

Any thoughts on the second request of the navigation options? I’ll paste it here again for ease of use:

Secondly, on the ALB Gallery element, it would be great to have an option for desktop to also display the navigation arrows when the “Big Image with Thumbnails below” setting is selected, meaning the user doesn’t have to hover the thumbnails to change the image (which may not be super intuitive for some users). Perhaps there could be 3 options – hover thumbs, show navigation arrows, use both hover and arrows.

Thanks a lot.

February 14, 2023 at 5:15 pm #1397955
Günter
Keymaster
Hi Tim,

ALB Gallery element

I’m checking it for next release.

@Guenni007

only the closest is decisive

Yes, the last value assigned to $condition is used, in your case
```
$condition  = ( isset( $options['header_position'] ) && $options['header_position'] == 'header_top' );
```
Best regards,
Günter
February 14, 2023 at 5:25 pm #1397956

THP Studio
Participant

Awesome, thanks again Gunter, really appreciate it.

February 15, 2023 at 3:18 pm #1398092

Guenni007
Participant

and to have a similar request – maybe it would be very interesting if the postnavigation ( left right arrows on portfolio and posts ) works with swipe too.
so far I have done this with an edited plugin; however, it would be nice if it were implemented natively in Enfold.

February 15, 2023 at 4:44 pm #1398104

Günter
Keymaster

Hi,

@Guenni007

thanks for this input.
Added it to our dev repo (maybe already in next release).

Best regards,
Günter
Author

Posts

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

The topic ‘Lightbox swipe feature request & Gallery navigation’ is closed to new replies.