WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 27.06.2021 16:30:23

losttrip
Member

OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

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.

Offline

#2 27.06.2021 17:12:17

florian
Administrator

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

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

Last edited by florian (27.06.2021 17:13:33)


"Beginne den Tag mit einem Lächeln – dann hast Du's hinter Dir."

Offline

#3 27.06.2021 17:27:02

losttrip
Member

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

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!

Offline

#4 28.06.2021 06:34:57

losttrip
Member

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

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.

Offline

#5 28.06.2021 09:55:36

florian
Administrator

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

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.


"Beginne den Tag mit einem Lächeln – dann hast Du's hinter Dir."

Offline

#6 28.06.2021 12:55:46

choppopo
Guest

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

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

#7 28.06.2021 15:13:50

losttrip
Member

Re: OFA OneForAll Lightbox2 Add Mobile Swipe Functionality

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!

Offline

Board footer

Powered by FluxBB

up