OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

losttrip · 27.06.2021 16:30:23

The Lightbox2 used for images in OFA does not support touch swipe functionality. In today's mobile world, swipe is expected. Tapping on one side of the other of an image to change images is not the best user experience. User's of my client sites are left confused and often don't think there are other images to see, so they just close the lightbox after viewing one image.

Are there any plans to update the OneForAll lightbox2 for a lightbox with swipe?

Are there plans to implement the ability to choose different lightboxes (like in FolderGallery)?

How difficult would it be to manually change the lightbox2 to something else?

I have done some searching around and swipe is only on the Roadmap for Lightbox3 and there is no development ongoing. I also found some workarounds ( https://stackoverflow.com/questions/284 … uchscreens ) but they seem to be outdated, and I honestly don't know enough to trust them.

Thank you for your time and consideration.

florian · 27.06.2021 17:12:17

Are there any plans to update the OneForAll lightbox2 for a lightbox with swipe?

Not until you asked ;-)

Are there plans to implement the ability to choose different lightboxes (like in FolderGallery)?

No, this would be too much effort

How difficult would it be to manually change the lightbox2 to something else?

Quite simple actually:
1. Download swipebox from https://swipebox.codes/
2. In /modules/oneforall/js, create a folder swipebox
3. Unzip locally and copy the contents of the src folder to /modules/oneforall/js/swipebox
4. Open view_overview.php and view_item.php and change

<script type="text/javascript" src="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/lightbox2/js/lightbox.js"></script>
	<script type="text/javascript">
	//  Lightbox2 options
	lightbox.option({
		'albumLabel': '<?php echo $MOD_ONEFORALL[$mod_name]['TXT_IMAGE']; ?> %1 <?php echo $TEXT['OF']; ?> %2'
	})
	</script>

to

	<link rel="stylesheet" href="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/swipebox/css/swipebox.css">
	<script type="text/javascript" src="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/swipebox/js/jquery.swipebox.min.js"></script>
	<script type="text/javascript">
	;( function( $ ) {
		$( '.swipebox' ).swipebox();
	} )( jQuery );
	</script>

and in the view_overview.php

$thumb_prepend = '<a href="'.$img_url.$image_file.'" rel="lightbox[image_'.$item_id.']" title="'.$img_title.'"><img src="';
$img_prepend   = '<a href="'.$img_url.$image_file.'" rel="lightbox[image_'.$item_id.']" title="'.$img_title.'"><img src="';

to

$thumb_prepend = '<a href="'.$img_url.$image_file.'" rel="lightbox[image_'.$item_id.']" class="swipebox"  title="'.$img_title.'"><img src="';
$img_prepend   = '<a href="'.$img_url.$image_file.'" rel="lightbox[image_'.$item_id.']" class="swipebox"  title="'.$img_title.'"><img src="';

and in the view_item.php

$prepend = '<a href="'.$img_url.$image_file.'" rel="lightbox[image_'.ITEM_ID.']"  title="'.$img_title.'"><img src="';

to

$prepend = '<a href="'.$img_url.$image_file.'" rel="lightbox[image_'.ITEM_ID.']" class="swipebox" title="'.$img_title.'"><img src="';

Accordingly you could integrate any other gallery script, if you don't like swipebox

Beitrag geändert von florian (27.06.2021 17:13:33)

losttrip · 27.06.2021 17:27:02

I haven't even tried this yet, but the fact that you are so quick with replies, knowledgeable and approachable is a breath of fresh air in this world.

Thank you!

losttrip · 28.06.2021 06:34:57

I implemented swipebox as you explained, and it worked. But I don't love swipebox, and more importantly, neither does my client.

I checked out all the viable lightbox options and photoswipe ( https://photoswipe.com/ ) has everything good about lightbox AND swipebox. But I read over the docs and I don't think it can be easily installed like you did for swipebox. Can you confirm this?

I know that RFG (Responsive Folder Gallery) uses photoswipe as it's Standard lightbox... but I have looked at that code, and I am lost.

Do you know if photoswipe is able to be used in OFA?

Thanks for any insight you might be able to offer.

florian · 28.06.2021 09:55:36

Thank you for your warm words in #3.
Unfortunately, it looks really complicated to implement photoswipe. I guess this would be possible somehow too, but will take some hours to do so.
Maybe image lightbox would be an option? This should be possible without a complete rebuild of the thumbnail/image logic of OfA.

choppopo · 28.06.2021 12:55:46

Photoswipe isnt easy to use, because it requires those data-propertys to work good.

Better see what Lightboxes are used in Foldergallery: Featherlight Gallery supports Swipe

losttrip · 28.06.2021 15:13:50

Thank you both for your insight about Photoswipe.
I had looked at the other options you suggested. Image Lightbox is likely what I will work toward. I will see what I can figure out.
Thanks again!

losttrip · 23.09.2021 05:43:46

I found the lightbox I want to use - https://simplelightbox.com/
I've tried implementing it following your directions. But for some reason, the lightbox does not work.

I think it's this part I need to make changes to, but I've tried everything I can think of to target the image link, but none have worked:

$( '.simplelightbox' ).simplelightbox();

<link rel="stylesheet" href="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/simplelightbox/simple-lightbox.css">
	<script type="text/javascript" src="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/simplelightbox/simple-lightbox.jquery.min.js"></script>
	<script type="text/javascript">
	;( function( $ ) {
		$( '.simplelightbox' ).simplelightbox();
	} )( jQuery );
	</script>

Any guidance would be greatly appreciated.

Edit:
I accidentally left "swipebox" as the directory name for js file above when I posted this. I did not have "swipebox" in my actual code, I had the proper:

<link rel="stylesheet" href="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/simplelightbox/simple-lightbox.css">

Beitrag geändert von losttrip (25.09.2021 20:34:26)

florian · 23.09.2021 08:51:28

The script has to be initialized after the images.
To get it working, change your code to

<link rel="stylesheet" href="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/swipebox/simple-lightbox.css">
<script type="text/javascript" src="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/simplelightbox/simple-lightbox.jquery.min.js"></script>
<!--(MOVE) JS BODY BTM+ -->
<script type="text/javascript">
;( function( $ ) {
	$( '.simplelightbox' ).simplelightbox();
} )( jQuery );
</script>
<!--(END)-->

The comment lines are important. They will trigger the output filter to move the code to the end of the <body>.

Make also sure that in your page template the [THUMBS] are placed in a div with the class simplelightbox, e.g.

<div class="simplelightbox">
[THUMBS]
</div>

Then the gallery should work.

Edit: corrected wrong line order in first code example

Beitrag geändert von florian (24.09.2021 00:49:01)

losttrip · 23.09.2021 23:51:20

I've tried and tried, but the lightbox is not working.

I looked at the source code after implementing your suggested code, and there seemed to be a stray closing source tag. So, I tried moving the closing tag inside the closing (MOVE) comment. That got rid of the stray tag, but still the lightbox doesn't function.

Here are all the changes I have in place:
In both view_overview.php and view_item.php, changed:

<script type="text/javascript" src="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/lightbox2/js/lightbox.js"></script>
	<script type="text/javascript">
	//  Lightbox2 options
	lightbox.option({
		'albumLabel': '<?php echo $MOD_ONEFORALL[$mod_name]['TXT_IMAGE']; ?> %1 <?php echo $TEXT['OF']; ?> %2'
	})
	</script>

to

<link rel="stylesheet" href="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/simplelightbox/simple-lightbox.css">
<script type="text/javascript" src="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/simplelightbox/simple-lightbox.jquery.min.js"></script>
<!--(MOVE) JS BODY BTM+ -->
<script type="text/javascript">
;( function( $ ) {
	$( '.simplelightbox' ).simplelightbox();
} )( jQuery );
</script>
<!--(END)-->

in the view_overview.php, changed:

$thumb_prepend = '<a href="'.$img_url.$image_file.'" rel="lightbox[image_'.$item_id.']" title="'.$img_title.'"><img src="';
$img_prepend   = '<a href="'.$img_url.$image_file.'" rel="lightbox[image_'.$item_id.']" title="'.$img_title.'"><img src="';

to:

$thumb_prepend = '<a href="'.$img_url.$image_file.'" rel="lightbox[image_'.$item_id.']" class="simplelightbox"  title="'.$img_title.'"><img src="';
$img_prepend   = '<a href="'.$img_url.$image_file.'" rel="lightbox[image_'.$item_id.']" class="simplelightbox"  title="'.$img_title.'"><img src="';

in the view_item.php, changed:

$prepend = '<div class="shop_item_thumb_column"><a href="'.$img_url.$image_file.'" rel="lightbox[image_'.ITEM_ID.']" title="'.$img_title.' '.$img_caption.'"><img src="';

to:

$prepend = '<div class="simplelightbox"><a href="'.$img_url.$image_file.'" rel="lightbox[image_'.ITEM_ID.']" class="simplelightbox" title="'.$img_title.'"><img src="';

I know you said

Make also sure that in your page template the [THUMBS] are placed in a div with the class simplelightbox, e.g.

I already had the div class in this prepend, for grid/flex styling) rather than in the Item Detail (Footer). But, just in case it made a difference, I took it out of the prepend and put the following in the Item Detail (Footer)

<div class="simplelightbox">
[THUMBS]
</div>

And still no success.

Is there anything else I need to add? Do I need to include the simple-lightbox.js file somewhere? In the head?
https://github.com/andreknieriem/simplelightbox

Is there something obvious that I have wrong? When I click the Item Item Detail thumbnail, the source image just loads on a blank page, without the lightbox.

Thank you.

losttrip · 24.09.2021 00:26:13

I also tried including the a tag as shown in the demo site:

$('.simpleLightbox a').simpleLightbox();

<link rel="stylesheet" href="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/simplelightbox/simple-lightbox.css">
<script type="text/javascript" src="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/simplelightbox/simple-lightbox.jquery.min.js"></script>
<!--(MOVE) JS BODY BTM+ -->
<script type="text/javascript">
;( function( $ ) {
	$( '.simplelightbox a' ).simplelightbox();
} )( jQuery );
</script>
<!--(END)-->

... but that made no difference.

Would it be better to just js and NOT use the jquery route (options are from the developer site(s):

// using plain js
new SimpleLightbox({elements: '.imageGallery1 a'});

// or if using jQuery
$('.imageGallery1 a').simpleLightbox();

Beitrag geändert von losttrip (24.09.2021 00:29:10)

florian · 24.09.2021 01:12:35

Sorry for confusion by posting wrong code, I corrected my code example.

So this is the complete code in my testing instance, which replaces the original lightbox2 code:

<script>window.jQuery || document.write('<script src="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/jquery/jquery.min.js"><\/script>')</script>
	<script type="text/javascript" src="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/simple-lightbox/simple-lightbox.jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/simple-lightbox/simple-lightbox.css" />
	<!--(MOVE) JS BODY BTM+ -->
	<script type="text/javascript">	
	 (function() {
        var $gallery = new SimpleLightbox('.gallery a', {});
    })();
	</script>
	<!--(END)-->

To avoid that the page settings have to be changed, e.g. to make sure that in the page settings just

[THUMBS]

still works, change somewhere down (around line 424) in the view_item.php

$thumbs = implode("\n", $thumb_arr);

to

$thumbs = '<div class="gallery">'.implode("\n", $thumb_arr).'</div>';

To use the simple lightbox on the OfA overview pages too, all changes have to be applied to the view_overview.php too.

And, although the naming is wrong, one or both the checkboxes of "Use Lightbox2" in the page settings (depending on where to use it) still have to be checked.
attachment.php?item=3048&download=1

This works well in my testing environment, tested on desktop and smartphone.

I have no idea what causes your issues.
Maybe it's a problem that you use the class name simplelightbox or that the images have the class "simplelightbox" too.
Maybe the files are not in place and/or there are other JS errors (have a look at the browser's error console).

I also do not know if using this or that code from the developer's code examples might work better.

Beitrag geändert von florian (24.09.2021 01:19:55)

losttrip · 24.09.2021 01:41:24

I will definitely try your NEW solution. Thank you.

I obviously don't know what I'm doing, but I'm confused:

florian schrieb:

I have no idea what causes your issues.

I was testing using your suggestion from post #9, which is different from your latest post.

#9:

<script type="text/javascript">
;( function( $ ) {
	$( '.simplelightbox' ).simplelightbox();
} )( jQuery );
</script>

Does this original solution work for you?

In your #12 version, you used:

<script type="text/javascript">	
	 (function() {
        var $gallery = new SimpleLightbox('.gallery a', {});
    })();
	</script>

In #12 you also added a new line to the top:

<script>window.jQuery || document.write('<script src="<?php echo WB_URL; ?>/modules/<?php echo $mod_name; ?>/js/jquery/jquery.min.js"><\/script>')</script>

Is this #12 version just a different way of implementing this lightbox, or was your suggestion from #9 not operational?

The only reason I used:

$( '.simplelightbox' ).simplelightbox();

Was because I was mimicking your original (swipebox) solution:

$( '.swipebox' ).swipebox();

florian · 24.09.2021 06:35:17

#9 was not my solution.

I thought the only issue that it did not work was that your code was not moved to the bottom of the body (because at the first try to implement that gallery I had exactly the same problem which I solved by moving the <script> part to the bottom). So I tried to adapt my findings to the code you posted.

In conclusio I think the script is too difficult to get it working.

Beitrag geändert von florian (25.09.2021 09:27:57)

WBCE CMS Forum

#1 27.06.2021 16:30:23

OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#2 27.06.2021 17:12:17

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#3 27.06.2021 17:27:02

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#4 28.06.2021 06:34:57

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#5 28.06.2021 09:55:36

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#6 28.06.2021 12:55:46

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#7 28.06.2021 15:13:50

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#8 23.09.2021 05:43:46

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#9 23.09.2021 08:51:28

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#10 23.09.2021 23:51:20

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#11 24.09.2021 00:26:13

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#12 24.09.2021 01:12:35

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#13 24.09.2021 01:41:24

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

#14 24.09.2021 06:35:17

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

Fußzeile des Forums