www.wysiwygwebbuilder.com

Posted: **Sat Jul 25, 2020 3:02 pm**

http://www.stripjs.com/
A Lightbox that only partially covers the page
This makes it less intrusive and leaves room to interact with the page on larger screens
while giving smaller mobile devices the classic Lightbox experience.

How to use this ligtbox with the photogallery object in WYSIWYG:
I found the solution here; https://home.et.utwente.nl/slootenvanf/ ... -lightbox/
-----------------------------------------------------
Download the script and the css files here;
https://github.com/staaky/strip/tree/master/dist
download strip.pkgd.min.js
for the css download both, the css file and the map strip-skins
Insert a filepublisher object on your page
insert the strip.css
insert the map strip-skins
insert the strip.pkgd.min.js
-------------------------------------------
Insert a HTML object on your page
HTML object insert in resources

Code: Select all

$JQUERY$
strip.pkgd.min.js

-----------
choose between head head tags
insert in HTML:

Code: Select all

<link href="css/strip.css" rel="stylesheet">  
<script>
jQuery(function($){
 $(document).ready(function()
{
	$('.content a:has(img)').each(function() { // old pre-wp5 style way of image inclusion
		url = $(this).attr("href");
		extension = url.substr( (url.lastIndexOf('.') +1) ).toLowerCase();
		//console.log("old pre-wp5 style url="+url+" ext="+extension);
		if (extension=="jpg"||extension=="png") { // if link points to an image, add strip lightbox:
			$(this).addClass("strip");
			$(this).attr("data-strip-group","gallery-group");
			$(this).attr("data-strip-caption", $(this).find("img").attr("alt") );
		}
	});
	$('.content figure img').each(function() { // new wp5 style way of image inclusion
		url = $(this).attr("src");
		extension = url.substr( (url.lastIndexOf('.') +1) ).toLowerCase();
		//console.log("new wp5 style url="+url+" ext="+extension);
		if (extension=="jpg"||extension=="png") { // if link points to an image, add strip lightbox:
			$(this).parent().addClass("strip");
			$(this).parent().attr("data-strip-group","gallery-group");
			$(this).parent().attr("href",url);
			if ($(this).attr("alt").length>0) $(this).parent().attr("data-strip-caption", $(this).attr("alt") );
		}
	});
  });
});
</script>

Important
In HTML options set- use HTML5 semantic tags,( the script uses the figure element!)
Make your gallery
!!DON'T CHOOSE LIGHT BOX GALLERY, BUT OPEN IN THE SAME BROWSER WINDOW !!
give the gallery a class name that you must use in the script
select the gallery- properties - insert class
I've used content as a class name in the script
----------------------------------------------------
@ $(this).attr("data-strip-group","gallery-group"); you can name your group with any name!
for instance $(this).attr("data-strip-group","art");
This script works great and is responsive!
I also suggested to implement this lightbox into the programme

www.wysiwygwebbuilder.com

Strip, a Lightbox that only partially covers the page,works with the photogallery

Strip, a Lightbox that only partially covers the page,works with the photogallery